WebP-Images über die Befehlszeile erstellen

Katie Hempenius
Katie Hempenius
X

WebP Befehlszeilentool wurde bereits für Sie installiert, Sie können also loslegen. Dieses Tool Konvertiert JPG-, PNG- und TIFF-Bilder 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 images/flower1.jpg-Datei mit einer Qualität von 50 (0 ist die schlechteste, 100 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 Befehl cwebp jedoch so ausführen, dass jedes Bild einzeln konvertiert wird, dauert es sehr lange, bis viele Bilder konvertiert sind. Wenn das notwendig ist, können Sie 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 Script konvertiert alle Dateien im Verzeichnis images/ mit einer Qualität von 50 und speichert sie als neue Datei (mit demselben Dateinamen, aber 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 <picture>-Tag können Sie WebP-Bilder für neuere Browser bereitstellen und gleichzeitig die Unterstützung für ältere Browser beibehalten.

  • Ersetzen Sie in index.html <img src="images/flower1.jpg"/> durch Folgendes: HTML:
<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 die WebP-Bilder auf der Website.

WebP-Nutzung mit Lighthouse prüfen

Die Leistungsprüfung Bilder in modernen Formaten bereitstellen von Lighthouse bietet folgende Vorteile: ob alle Bilder auf eurer Website Formate der nächsten Generation wie WebP nutzen.

  1. Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild
  2. Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  3. Klicken Sie auf den Tab Lighthouse.
  4. Achten Sie darauf, dass das Kästchen Leistung in der Liste Kategorien ausgewählt 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.

Übergabe von „Bilder in Formaten der nächsten Generation bereitstellen“ Prüfung in Lighthouse

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