Was hat das mit mir zu tun?
WebP-Bilder sind kleiner als ihre JPEG- und PNG-Bilder. Sie befinden sich in der Regel auf der die Dateigröße um 25 bis 35% reduzieren. Dadurch verringern sich die Seitengrößen verbessert die Leistung.
- YouTube stellte fest, dass der Wechsel zu WebP-Thumbnails zu 10% schnellere Ladezeiten.
- Facebook erlebt Die Dateigröße beträgt 25–35% bei JPEGs und 80% bei PNG-Dateien, wenn wechselten sie zu WebP.
WebP ist ein hervorragender Ersatz für JPEG-, PNG- und GIF-Bilder. Außerdem WebP bietet sowohl verlustfreie als auch verlustbehaftete Komprimierung. Bei verlustfreier Komprimierung keine Daten geht verloren. Eine verlustbehaftete Komprimierung verringert die Dateigröße, die Bildqualität reduzieren.
Bilder in WebP konvertieren
Nutzer verwenden in der Regel eine der folgenden Methoden zum Konvertieren von Bildern zu WebP: cwebp-Befehlszeilentool oder das Imagemin WebP-Plug-in (npm) -Paket). Das WebP-Plug-in von Imagemin ist in der Regel die beste Wahl, wenn Ihr Projekt Build- Skripts oder Build-Tools (z.B. Webpack oder Gulp) erstellen, während die Befehlszeile eine gute Wahl ist für einfache Projekte oder wenn Sie Bilder nur einmal konvertieren müssen.
Beim Konvertieren von Bildern in WebP können Sie Einstellungen für die Komprimierung. Für die meisten Nutzer ist jedoch das Einzige, ist die Qualitätseinstellung. Du kannst eine Qualitätsstufe von 0 angeben (am schlechtesten) bis 100 (am besten). Es lohnt sich, damit herumzuspielen, der richtige Kompromiss zwischen Bildqualität und Dateigröße ist, Anforderungen.
cwebp verwenden
Konvertieren Sie eine einzelne Datei mithilfe der Standardkomprimierungseinstellungen von cwebp:
cwebp images/flower.jpg -o images/flower.webp
Konvertiere eine einzelne Datei mit der Qualitätsstufe 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 WebP-Plug-in von Imagemin kann einzeln oder mit deinem bevorzugten Build-Tool verwendet werden (Webpack/Gulp/Grunt/etc.). Dazu müssen in der Regel ca. 10 Zeilen Code Build-Script oder die Konfigurationsdatei für Ihr Build-Tool. Hier sind Beispiele dafür, wie Sie das Webpack Gulp und Stöhnen.
Wenn Sie keines dieser Build-Tools verwenden, können Sie Imagemin allein als
ein Node-Skript. Dieses Skript konvertiert die Dateien im Verzeichnis images und
speichern Sie 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-kompatibel Browser nicht weiterlesen, können Sie nicht weiterlesen. Andernfalls WebP in neueren Browsern und ein Fallback-Bild in älteren Browsern ausliefern:
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
<picture>,
<source>,
und <img>-Tags und wie sie im Verhältnis zueinander angeordnet sind, werden alle
interagieren, um dieses Endergebnis zu erreichen.
<picture>
Das <picture>-Tag bietet einen Wrapper für null oder mehrere <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 mit dem <img>-Tag angegebene Bild geladen.
<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,
nicht unterstützte Tags ignorieren. Es „sieht“ also nur die
<img src="flower.jpg" alt="">-Tag und lädt dieses Image.
HTTP-Header Accept lesen
Wenn Sie ein Anwendungs-Back-End oder einen Webserver haben, mit dem Anfragen umgeschrieben werden 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 auf Grundlage des Inhalts 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, 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 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 oben beschriebene Regel zum Überschreiben sucht nach einer WebP-Version eines beliebigen angeforderten JPEG- oder PNG-Bilds. Wird eine WebP-Alternative gefunden, wird sie mit dem richtigen Content-Type-Header bereitgestellt. 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 bereitgestellt werden mit WebP. Führen Sie die Lighthouse-Leistungsüberprüfung aus (Lighthouse > Optionen > Leistung) und suchen Sie nach den Ergebnissen der Anleitung Bilder in prüfen. Lighthouse listet alle Bilder auf, die nicht in WebP.