Warum ist das wichtig?
WebP-Bilder sind kleiner als ihre JPEG- und PNG-Bilder, was in der Regel um 25 bis 35% kleiner ist. Das verringert die Seitengröße und verbessert die Leistung.
- YouTube hat festgestellt, dass die Umstellung auf WebP-Thumbnails zu einem 10 % schnelleren Laden von Seiten führt.
- Facebook konnte bei JPEG-Dateien 25 bis 35% und bei PNGs 80% weniger Dateigrößen sparen, wenn das Unternehmen zu WebP wechselte.
WebP ist ein hervorragender Ersatz für JPEG-, PNG- und GIF-Bilder. Darüber hinaus bietet WebP sowohl eine verlustfreie als auch eine verlustbehaftete Komprimierung. Bei der verlustfreien Komprimierung gehen keine Daten verloren. Die verlustbehaftete Komprimierung verringert die Dateigröße, auf Kosten einer geringeren Bildqualität.
Bilder in WebP konvertieren
Nutzer verwenden im Allgemeinen einen der folgenden Ansätze zum Konvertieren ihrer Bilder in WebP: das cwebp-Befehlszeilentool oder das Imagemin WebP-Plug-in (npm-Paket). Das Imagemin WebP-Plug-in ist im Allgemeinen die beste Wahl, wenn Ihr Projekt Build-Skripts oder Build-Tools verwendet (z. B. Webpack oder Gulp). Die Befehlszeile ist dagegen eine gute Wahl für einfache 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 müssen Sie sich jedoch nur um die Qualitätseinstellung kümmern. Sie können eine Qualitätsstufe von 0 (schlecht) bis 100 (am besten) angeben. Es lohnt sich, damit zu experimentieren, um herauszufinden, welcher Kompromiss zwischen Bildqualität und Dateigröße für Ihre Anforderungen am besten ist.
cwebp verwenden
Konvertieren Sie eine einzelne Datei mit den cwebp-Standardkomprimierungseinstellungen:
cwebp images/flower.jpg -o images/flower.webp
Konvertieren Sie eine einzelne Datei mit einer Qualitätsstufe von 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
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 (Webpack/Gulp/Grunt usw.) verwendet werden. Dazu müssen Sie einem Build-Skript oder der Konfigurationsdatei für Ihr Build-Tool normalerweise etwa 10 Codezeilen hinzufügen. Im Folgenden finden Sie Beispiele dafür, wie dies mit Webpack, Gulp und Grunt funktioniert.
Wenn Sie keines dieser Build-Tools verwenden, können Sie Imagemin alleine als Knotenskript verwenden. Dieses Skript 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 mit dem Lesen aufhören. Andernfalls wird WebP für neuere Browser und ein Fallback-Image für ältere Browser bereitgestellt:
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 Reihenfolge im Verhältnis zueinander, interagieren alle, um dieses Endergebnis zu erzielen.
<picture>
Das <picture>-Tag bietet einen Wrapper für null oder mehr <source>-Tags und ein <img>-Tag.
<source>
Das Tag <source> gibt eine Medienressource an.
Der Browser verwendet die erste aufgeführte Quelle in einem unterstützten Format. Wenn der Browser keines der in den <source>-Tags aufgeführten Formate unterstützt, wird das vom <img>-Tag angegebene Bild zurückgesetzt.
<img>
Das <img>-Tag sorgt dafür, dass dieser Code in Browsern funktioniert, die das <picture>-Tag nicht unterstützen.
Wenn ein Browser das Tag <picture> nicht unterstützt, werden nicht unterstützte Tags ignoriert. Daher „sieht“ er nur das <img src="flower.jpg" alt="">-Tag und lädt dieses Image.
HTTP-Accept-Header 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-Headers Accept lesen, der angibt, welche alternativen Bildformate unterstützt werden:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Es hat den Vorteil, dass Sie das Bild-Markup vereinfachen, wenn Sie diesen Anfrageheader lesen und die Antwort auf der Grundlage ihres Inhalts umschreiben. Das <picture>-Markup kann aufgrund vieler Quellen ziemlich lang werden. Unten ist eine Apache mod_rewrite-Regel, die WebP-Alternativen bereitstellen kann:
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-Antwortheader Vary festlegen, damit die Caches erkennen, dass das Bild mit unterschiedlichen Inhaltstypen bereitgestellt werden kann:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
Mit der obigen Regel zum Überschreiben wird nach einer WebP-Version jedes angeforderten JPEG- oder PNG-Bilds gesucht. Wenn eine WebP-Alternative gefunden wird, wird sie mit dem richtigen Content-Type-Header bereitgestellt. Auf diese Weise können Sie mit automatischer WebP-Unterstützung Bild-Markup ähnlich dem folgenden 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 bereitgestellt werden. Führen Sie die Lighthouse-Leistungsprüfung aus (Lighthouse > Optionen > Leistung) und sehen Sie sich die Ergebnisse der Prüfung Images in Formaten der nächsten Generation bereitstellen an. Lighthouse listet alle Bilder auf, die nicht in WebP bereitgestellt werden.