Logo vom WebP Bildformat

WebP – Das unbekannte Bildformat

Was ist WebP und wie kam es zu der Entwicklung dieses Bildformats? 

In den Anfangstagen des Internets waren Bilder auf Webseiten noch nicht so häufig vertreten. Einerseits gab es noch keine eleganten Möglichkeiten Bilder grafisch schön in Webseiten einzubinden. Anderseits war das Internet noch schrecklich langsam und das übertragen eines Bildes dauerte ewig.

Heute ist das anders! Beinahe auf der ganzen Welt steht schneller Internet zur Verfügung. Bilder wurden ein fester Bestandteil von Internetseiten. Das Internet ohne Bildmaterial ist kaum vorstellbar.

Für Bilder nutzen wir nicht nur im Web sondern auch im Alltag seit Jahrzehnten sie selben Bildformate:

  • JPG – Bilder
  • PNG – Bilder
  • GIF – Bilder

Jedes dieser Formate hat seine Vor- und Nachteile. JPG Bilder sind relativ gut komprimiert, und daher nicht so gross. Bei PNG Bilder kann man transparente Hintergründe darstellen. Und GIF Bilder können animiert sein.

Wo sind nun die Probleme?

Alle diese Bildformate haben einen entscheidenden Nachteil. Sie wurden nicht für das Web entwickelt. Die Dateigrössen sind immer noch sehr gross, und dadurch wird das Internet insgesamt eher etwas langsam.

Langsame Webseiten sind mühsam. Viele Besucher brechen bei zu langen Ladezeiten den Besuch einer Webseite ab. Ausserdem hat man bei langsamen Webseiten ein schlechtes Ranking bei Google. Egal wie toll deine Webseite ist, wenn sie niemand bei Google finden kann bringt dir das nichts.

Was ist nun WebP?

Ich bin kein uneingeschränkter Google Fan, aber Google hat auch seine guten Seiten. Das Bildformat WebP ist ein Beispiel davon. Einerseits reklamiert Google bei Webseiten die sehr langsam sind, anderseits bieten sie aber auch Lösungen dafür an. Ein Beispiel dafür ist AMP, dass wir auch schon hier im Blog behandelt haben. Ein anderes ist WebP.

WebP ist ein neues Bildformat, dass von Google entwickelt wurde. Mit WebP kann man Bilder bei gleichbleibender Qualität um einiges mehr stärker komprimieren als z.B. mit JPG.

Im Schnitt werden Dateigrössen um 25% – 34% kleiner im Vergleich zu JPG und PNG.

Welche Grafikprogramme können WebP?

Viele Grafikprogramme unterstützen WebP von Haus aus oder es gibt ein WebP Plugin. Eine nicht abschliessende Liste:

  • Adobe Photoshop
  • GIMP
  • Pixelmator
  • IrfanView
  • Paint.NET

Welche Browser können alles WebP?

Bildschirmfoto von caniuse.com zeigt die Browserunterstützung vom WebP Bildformat
Leider unterstützen noch nicht alle Browser das WebP Bildformat

Das WebP Bildformat wird zurzeit nur von Google Chrome, Opera Mini, und von einigen Android Browser unterstützt.

Daher ist eine konsequente WebP Umsetzung auf Webseiten etwas kompliziert.

Wie kann ich WebP einsetzen und trotzdem sicherstellen, dass auch Firefox Nutzer meine Bilder sehen?

Genau diese Frage habe ich mir auch gestellt. Ich bin ein Fan vom WebP Bildformat, will aber nicht alle Besucher dieses Blogs zu Google Chrome zwingen.

Es gibt mehrere Möglichkeiten um das zu bewerkstelligen.

Methode 1: Picture stat img

Oft werden Bilder im HTML Quelltext mit dem „veralteten“ <img>-Tag geladen. Seit HTML 5 gibt es dazu eigentlich das Picture Element.

<picture>
    <source srcset="bild.webp" type="image/webp">
    <img src="bild.jpg">
</picture>

Bei dieser Lösung entscheidet der Browser welches Bild geladen wird. Falls der Browser WebP Bilder unterstützt wird das WebP Bild geladen, ansonsten das JPG Bild.

Eigentlich, ist dass die eleganteste Lösung um Bilder als WebP zur Verfügung zu stellen. Leider kann man diese Lösung nicht wirklich nutzen. Der „Picture“-Tag wird nicht vom Internet Explorer 11 (oder älter) unterstützt und führt dort oft zu Layout Fehlern.

Methode 2: Webserver Konfiguration auf WebP optimieren

Da die erste Methode zurzeit nicht ratsam ist zeige ich euch gerne noch eine alternative Möglichkeit (die wird auch hier auf diesem Blog benutzt). Man kann seinen Webserver entsprechend konfigurieren, dass bei entsprechendem Browsersupport WebP Bilder geladen werden. Für den Apache Server sieht sie Lösung (für WordPress Webseiten) so aus:

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
Header append Vary Accept env=REDIRECT_accept
AddType image/webp .webp

Bei Nginx Webserver kann dieser Codeschnipsel verwendet werden:

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}
# server config block location ~* ^/wp-content/.+\.(png|jpg)$ { add_header Vary Accept; try_files $uri$webp_ext $uri =404; }

LINGS: Versicherung im Netflix Modell
Mit CSS ein Hintergrundvideo responsive darstellen

Noch keine Kommentare

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.