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 werden die Seitengrößen verringert und die Leistung verbessert.

WebP ist ein hervorragender Ersatz für JPEG-, PNG- und GIF-Bilder. Außerdem 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

Für die Umwandlung von Bildern in WebP werden in der Regel einer der folgenden Ansätze verwendet: das cwebp-Befehlszeilentool oder das Imagemin WebP-Plug-in (npm-Paket). Das Imagemin WebP-Plug-in ist in der Regel die beste Wahl, wenn in Ihrem Projekt Build-Scripts oder Build-Tools (z. B. Webpack oder Gulp) verwendet werden. Die Befehlszeile eignet sich dagegen für kleine Projekte oder wenn Sie Bilder nur einmal konvertieren müssen.

Wenn Sie Bilder in WebP konvertieren, können Sie eine Vielzahl von Komprimierungseinstellungen festlegen. Für die meisten Nutzer ist jedoch nur die Qualitätseinstellung von Bedeutung. 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

So 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 in der Regel einem Build-Script oder der Konfigurationsdatei Ihres Build-Tools etwa zehn Codezeilen 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. Dieses Script konvertiert die Dateien im Verzeichnis images und speichert sie im Verzeichnis compressed_images.

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

<img src="flower.jpg" alt="">

Nachher

<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 dient als Container 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-Accept-Header lesen

Wenn Sie ein Anwendungs-Backend 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

Wenn Sie diesen Anfrageheader lesen und die Antwort basierend auf seinem Inhalt neu schreiben, können Sie Ihr Bild-Markup vereinfachen. Das <picture>-Markup kann bei vielen Quellen ziemlich lang werden. Im Folgenden finden Sie eine Apache-mod_rewrite-Regel, mit der WebP-Alternativen ausgeliefert 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 müssen Sie den HTTP-Vary-Antwortheader festlegen, damit Caches erkennen, dass das Bild je nach Accept-Header unterschiedlich bereitgestellt werden kann:

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

Die vorherige Umschreibregel sucht nach einer WebP-Version jedes angeforderten JPEG- oder PNG-Bilds. Wenn eine WebP-Alternative gefunden wird, wird sie mit dem richtigen Content-Type-Header ausgeliefert. So können Sie Bild-Markups wie das folgende 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.