Was hat das mit mir zu tun?
WebP-Bilder sind kleiner als ihre JPEG- und PNG-Entsprechungen. Die Dateigröße ist in der Regel um 25–35 % geringer. Dadurch wird die Seitengröße verringert und die Leistung verbessert.
- YouTube hat festgestellt, dass die Umstellung auf WebP-Thumbnails zu 10 % schnelleren Seitenaufbauten geführt hat.
- Facebook konnte bei der Umstellung auf WebP die Dateigröße von JPEGs um 25–35 % und die von PNGs um 80 % reduzieren.
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 Verschlechterung der Bildqualität führen kann.
Bilder in WebP konvertieren
In der Regel wird einer der folgenden Ansätze verwendet, um Bilder in WebP zu konvertieren: das cwebp-Befehlszeilentool oder das Imagemin WebP-Plug-in (npm-Paket).
Das Imagemin WebP-Plug-in ist im Allgemeinen die beste Wahl, wenn in Ihrem Projekt Build-Skripts oder Build-Tools (z. B. Webpack oder Gulp) verwendet werden. Die Befehlszeile ist dagegen eine gute Wahl 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 relevant. Sie können eine Qualitätsstufe von 0 (schlechteste) bis 100 (beste) angeben. Es lohnt sich, damit zu experimentieren, um herauszufinden, welche Stufe für Ihre Anforderungen den richtigen Kompromiss zwischen Bildqualität und Dateigröße bietet.
„cwebp“ verwenden
Konvertieren Sie eine einzelne Datei mit den Standardkomprimierungseinstellungen von cwebp:
cwebp images/flower.jpg -o images/flower.webp
Konvertieren Sie eine einzelne Datei mit der Qualitätsstufe 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
Alle Dateien in einem Verzeichnis konvertieren:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Imagemin verwenden
Das Imagemin WebP-Plug-in kann eigenständig oder mit Ihrem bevorzugten Build-Tool (Webpack/Gulp/Grunt usw.) verwendet werden. Dazu müssen Sie in der Regel etwa 10 Zeilen Code in ein Build-Script oder die Konfigurationsdatei für Ihr Build-Tool einfügen.
Wenn Sie keines dieser Build-Tools verwenden, können Sie Imagemin als Node-Skript 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 deine Website nur WebP-kompatible Browser unterstützt, kannst du hier aufhören zu lesen. Andernfalls solltest du WebP-Bilder für neuere Browser und Fallback-Bilder 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 Reihenfolge zueinander, interagieren alle, um dieses Endergebnis zu erzielen.
<picture>
Das <picture>-Tag ist ein 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, die in einem unterstützten Format vorliegt. Wenn der Browser keines der in den <source>-Tags aufgeführten Formate unterstützt, wird das im <img>-Tag angegebene Bild geladen.
<img>
Das Tag <img> sorgt dafür, dass dieser Code in Browsern funktioniert, die das Tag <picture> nicht unterstützen.
Wenn ein Browser das <picture>-Tag nicht unterstützt, ignoriert er die nicht unterstützten Tags. Daher wird nur das Tag <img src="flower.jpg" alt=""> „gesehen“ und dieses Image geladen.
HTTP-Header Accept lesen
Wenn Sie ein Anwendungs-Backend 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
Wenn Sie diesen Anfrageheader lesen und die Antwort basierend auf seinem Inhalt umschreiben, hat das den Vorteil, dass Ihr Bild-Markup vereinfacht wird. Das <picture>-Markup kann bei vielen Quellen ziemlich lang werden. Im Folgenden finden 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]
Wenn Sie diesen Weg wählen, müssen Sie den HTTP-Antwortheader Vary 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 Rewrite-Regel sucht nach einer WebP-Version aller angeforderten JPEG- oder PNG-Bilder. Wenn eine WebP-Alternative gefunden wird, wird sie mit dem entsprechenden Content-Type-Header bereitgestellt. So können Sie ein Bild-Markup 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 im WebP-Format bereitgestellt werden. Führen Sie die Lighthouse-Leistungsprüfung (Lighthouse > Optionen > Leistung) aus und suchen Sie nach den Ergebnissen der Prüfung Bilder in Formaten der nächsten Generation bereitstellen. Lighthouse listet alle Bilder auf, die nicht im WebP-Format bereitgestellt werden.