WebP-Bilder verwenden

Katie Hempenius
Katie Hempenius
X

Was hat das mit mir zu tun?

WebP-Bilder sind kleiner als JPEG- und PNG-Bilder – in der Regel um 25–35 %. Dadurch wird die Seitengröße reduziert und die Leistung verbessert.

WebP ist ein hervorragender Ersatz für JPEG-, PNG- und GIF-Bilder. Darüber hinaus bietet WebP sowohl verlustfreie als auch verlustbehaftete Komprimierung. Bei der verlustfreien Komprimierung gehen keine Daten verloren. Bei der verlustbehafteten Komprimierung wird die Dateigröße reduziert, was jedoch zu einer möglichen Verschlechterung der Bildqualität führen kann.

Bilder in WebP konvertieren

Im Allgemeinen werden zum Konvertieren von Bildern in WebP einer der folgenden Ansätze verwendet: das Befehlszeilentool cwebp oder das Imagemin WebP-Plug-in (npm-Paket). Das WebP-Plug-in von Imagemin ist im Allgemeinen die beste Wahl, wenn für Ihr Projekt Build-Skripts oder Build-Tools wie Webpack oder Gulp verwendet werden. Die Befehlszeile ist dagegen eine gute Wahl für einfache Projekte oder wenn Sie Images nur einmal konvertieren müssen.

Wenn Sie Bilder in WebP konvertieren, können Sie eine Vielzahl von Komprimierungseinstellungen festlegen. Für die meisten Nutzer muss jedoch nur die Qualitätseinstellung beachtet werden. Sie können eine Qualitätsstufe von 0 (schlechteste) bis 100 (beste) angeben. Es lohnt sich, damit zu experimentieren und herauszufinden, welche Stufe für Ihre Anforderungen den richtigen Kompromiss zwischen Bildqualität und Dateigröße darstellt.

cwebp verwenden

Konvertieren Sie eine einzelne Datei mit den Standardkomprimierungseinstellungen von cwebp:

cwebp images/flower.jpg -o images/flower.webp

So konvertierst du eine einzelne Datei mit einer Qualität von 50:

cwebp -q 50 images/flower.jpg -o images/flower.webp

So konvertieren Sie alle Dateien in einem Verzeichnis:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Imagemin verwenden

Das Imagemin WebP-Plug-in kann allein oder mit Ihrem bevorzugten Build-Tool (z. B. Webpack, Gulp oder Grunt) verwendet werden. Dazu müssen Sie normalerweise etwa 10 Codezeilen zu einem Build-Skript oder der Konfigurationsdatei für Ihr Build-Tool hinzufügen. Hier sind Beispiele für Webpack, Gulp und Grunt.

Wenn Sie keines dieser Build-Tools verwenden, können Sie Imagemin auch als Node-Script verwenden. Mit diesem Script werden die Dateien im Verzeichnis images konvertiert und im Verzeichnis compressed_images gespeichert.

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

imagemin(['images/*'], {
  destination: 'compressed_images',
  plugins: [imageminWebp({quality: 50})]
}).then(() => {
  console.log('Done!');
});

WebP-Bilder bereitstellen

Wenn Ihre Website nur WebP-kompatible Browser unterstützt, können Sie diesen Artikel überspringen. Andernfalls können Sie WebP-Bilder für neuere Browser und ein Fallback-Bild für ältere Browser bereitstellen:

Vorher: html <img src="flower.jpg" alt="">

Nachher: html <picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>

Die Tags <picture>, <source> und <img>, einschließlich ihrer relativen Reihenfolge, wirken zusammen, um dieses Endergebnis zu erzielen.

<picture>

Das <picture>-Tag bietet einen Wrapper für null oder mehrere <source>-Tags und ein <img>-Tag.

<source>

Das <source>-Tag gibt eine Medienressource an.

Der Browser verwendet die erste aufgeführte Quelle, die in einem unterstützten Format vorliegt. Wenn der Browser keines der in den <source>-Tags aufgeführten Formate unterstützt, wird das Bild geladen, das im <img>-Tag angegeben ist.

<img>

Das <img>-Tag sorgt dafür, dass dieser Code in Browsern funktioniert, die das <picture>-Tag nicht unterstützen. Wenn ein Browser das <picture>-Tag nicht unterstützt, werden die nicht unterstützten Tags ignoriert. Daher „sieht“ es nur das <img src="flower.jpg" alt="">-Tag und lädt dieses Bild.

HTTP-Header Accept lesen

Wenn Sie ein Anwendungs-Back-End oder einen Webserver haben, mit dem Sie Anfragen umschreiben können, können Sie den Wert des HTTP-Accept-Headers lesen, der angibt, welche alternativen Bildformate unterstützt werden:

Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8

Das Lesen dieses Anfrageheaders und das Umschreiben der Antwort basierend auf dem Inhalt hat den Vorteil, dass das Bild-Markup vereinfacht wird. Das <picture>-Markup kann bei vielen Quellen ziemlich lang werden. Unten sehen Sie eine Apache-mod_rewrite-Regel, mit der WebP-Alternativen bereitgestellt werden können:

RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]

In diesem Fall musst du den HTTP-Antwortheader Vary festlegen, damit Caches erkennen können, dass das Bild möglicherweise mit verschiedenen Inhaltstypen bereitgestellt wird:

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Content-Type"
  </IfModule>
</FilesMatch>

Die obige Umschreibregel sucht nach einer WebP-Version eines angeforderten JPEG- oder PNG-Bilds. Wird eine WebP-Alternative gefunden, wird sie mit dem richtigen Content-Type-Header ausgeliefert. So können Sie Bild-Markups wie die folgenden mit automatischer WebP-Unterstützung verwenden:

<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">

WebP-Nutzung prüfen

Mit Lighthouse können Sie prüfen, ob alle Bilder auf Ihrer Website mit WebP ausgeliefert werden. Führen Sie die Lighthouse-Leistungsprüfung durch (Lighthouse > Optionen > Leistung) und sehen Sie sich die Ergebnisse der Prüfung Bilder in Next-Gen-Formaten bereitstellen an. Lighthouse listet alle Bilder auf, die nicht im WebP-Format gesendet werden.