WebP-Images über die Befehlszeile erstellen

Katie Hempenius
Katie Hempenius
X

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

Bilder in WebP konvertieren

  1. Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  2. Klicken Sie auf Terminal. Hinweis: Wenn die Schaltfläche „Terminal“ nicht angezeigt wird, müssen Sie möglicherweise die Option „Vollbild“ verwenden.
  3. Geben Sie den folgenden Befehl ein:
cwebp -q 50 images/flower1.jpg -o images/flower1.webp

Mit diesem Befehl wird die Datei images/flower1.jpg mit der Qualität 50 (0 ist die schlechteste; 100 ist die beste) konvertiert und als images/flower1.webp gespeichert.

Anschließend sollte in der Konsole in etwa Folgendes angezeigt werden:

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 |

Sie haben das Bild gerade in WebP konvertiert.

Wenn Sie den cwebp-Befehl jedoch für ein Image nach dem anderen ausführen, würde die Konvertierung vieler Images viel Zeit in Anspruch nehmen. In diesem Fall können Sie stattdessen ein Skript verwenden.

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

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

✔🎬 Check-in

Das Verzeichnis images/ sollte jetzt sechs Dateien enthalten:

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

Aktualisiere als Nächstes diesen Glitch, damit WebP-Bilder in Browsern bereitgestellt werden, die das unterstützen.

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

Mit dem Tag <picture> kannst du WebP in neueren Browsern bereitstellen und dabei die Unterstützung älterer Browser beibehalten.

  • Ersetzen Sie in index.html <img src="images/flower1.jpg"/> durch den 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.

✔🎬 Check-in

Anschließend 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 Sie WebP-Bilder auf der Website korrekt implementiert haben.

WebP-Nutzung mit Lighthouse prüfen

Mit der Leistungsbewertung Bilder in Formaten der nächsten Generation bereitstellen von Lighthouse erfahren Sie, ob alle Bilder auf Ihrer Website Formate der nächsten Generation wie WebP verwenden.

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen und dann auf Vollbild Vollbild.
  2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Wahltaste + J“ auf einem 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 Bilder in Formaten der nächsten Generation bereitstellen bestanden wurde.

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

Fertig! Du stellst jetzt WebP-Bilder auf deiner Website bereit.