WebP-Images über die Befehlszeile erstellen

Katja Hempenius
Katie Hempenius
X

Das Webp-Befehlszeilentool wurde bereits für Sie installiert. Sie können also loslegen. Dieses Tool wandelt JPG-, PNG- und TIFF-Bilder in WebP um.

Bilder in WebP konvertieren

  1. Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  2. Klicken Sie auf Terminal. Wenn die Terminal-Schaltfläche nicht angezeigt wird, müssen Sie möglicherweise die Vollbildoption verwenden.
  3. Geben Sie den folgenden Befehl ein:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

Dieser Befehl wandelt die Datei images/flower1.jpg mit einer Qualität von 50 (0 ist die schlechteste, 100 ist die beste Methode) um und speichert sie als images/flower1.webp.

Danach sollten Sie in der Konsole in etwa Folgendes sehen:

Saving file 'images/flower1.webp'
File:      images/flower1.jpg
Dimension: 504 x 378
Output:    29538 bytes Y-U-V-All-PSNR 34.57 36.57 36.12   35.09 dB
           (1.24 bpp)
block count:  intra4:        750  (97.66%)
              intra16:        18  (2.34%)
              skipped:         0  (0.00%)
bytes used:  header:            116  (0.4%)
             mode-partition:   4014  (13.6%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |      22%|      26%|      36%|      17%|     768
      quantizer:  |      52 |      42 |      33 |      24 |
   filter level:  |      16 |       9 |       6 |      26 |

Das Bild wurde in WebP konvertiert.

Wenn Sie den Befehl cwebp jedoch so für jedes Bild einzeln ausführen, dauert es sehr lange, viele Bilder zu konvertieren. In diesem Fall können Sie stattdessen ein Skript verwenden.

  • Führen Sie das folgende Skript in der Konsole aus (vergessen Sie nicht die Graviszeichen):
`for file in images/*; do cwebp -q 50 "$file" -o "${file%.*}.webp"; done`

Dieses Script konvertiert alle Dateien im Verzeichnis images/ mit der Qualität 50 und speichert sie als neue Datei (gleicher Dateiname, aber mit der Dateiendung .webp) im selben Verzeichnis.

✔⁂ Einchecken

Im Verzeichnis images/ sollten jetzt 6 Dateien vorhanden sein:

flower1.jpg
flower1.webp
flower2.jpg
flower2.webp
flower3.png
flower3.webp

Aktualisiere als Nächstes diesen Glitch, um WebP-Bilder für Browser bereitzustellen, die dies unterstützen.

WebP-Bilder mit dem <picture>-Tag hinzufügen

Mit dem Tag <picture> können Sie WebP in neueren Browsern bereitstellen und gleichzeitig ältere Browser unterstützen.

  • Ersetzen Sie in index.html <img src="images/flower1.jpg"/> durch folgenden HTML-Code:
<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
  • Ersetzen Sie als Nächstes die <img>-Tags für flower2.jpg und flower3.png durch <picture>-Tags.

✔⁂ Einchecken

Danach sollten die <picture>-Tags in index.html so aussehen:

<picture>
  <source type="image/webp" srcset="images/flower1.webp">
  <source type="image/jpeg" srcset="images/flower1.jpg">
  <img src="images/flower1.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower2.webp">
  <source type="image/jpeg" srcset="images/flower2.jpg">
  <img src="images/flower2.jpg">
</picture>
<picture>
  <source type="image/webp" srcset="images/flower3.webp">
  <source type="image/png" srcset="images/flower3.png">
  <img src="images/flower3.png">
</picture>

Prüfen Sie als Nächstes mit Lighthouse, ob die WebP-Bilder auf der Website korrekt implementiert sind.

WebP-Nutzung mit Lighthouse prüfen

Mit der Leistungsprüfung Bilder in Formaten der nächsten Generation bereitstellen von Lighthouse können Sie feststellen, ob alle Bilder auf Ihrer Website Formate der nächsten Generation wie WebP verwenden.

  1. Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.
  2. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Lighthouse.
  4. Achten Sie darauf, dass in der Liste Kategorien das Kästchen Leistung angeklickt ist.
  5. Klicken Sie auf die Schaltfläche Bericht erstellen.
  6. Prüfen Sie, ob die Prüfung Images in Formaten der nächsten Generation bereitstellen bestanden wurde.

Die Prüfung „Bilder in Formaten der nächsten Generation bereitstellen“ in Lighthouse bestehen

Fertig! Sie stellen jetzt WebP-Bilder auf Ihrer Website bereit.