Entdecke WebP: Das innovative Bildformat für schnellere Webseiten

Zusammenfassung:

• WebP ist ein innovatives Bildformat von Google
• Bietet schnellere Ladezeiten und bessere Bildqualität
• Verlustbehaftete und verlustfreie Komprimierung möglich
• Unterstützt von vielen modernen Browsern
• Tools und Plugins zur WebP-Konvertierung verfügbar

In diesem Artikel werden wir das WebP-Bildformat näher betrachten, seine Vorteile und Kompatibilität mit verschiedenen Browsern untersuchen sowie die verfügbaren Tools und Plugins zur WebP-Konvertierung vorstellen. Abschließend zeigen wir die Apache sowie Nginx Serverkonfiguration.

Was ist WebP?

WebP ist ein modernes Bildformat, das von Google entwickelt wurde. Es bietet sowohl verlustbehaftete als auch verlustfreie Komprimierung, was zu kleineren Dateigrößen bei gleichbleibender oder besserer Bildqualität führt. Dies kann zu schnelleren Ladezeiten und einer besseren Nutzererfahrung beitragen.

Technisch gesehen basiert das WebP-Format auf dem VP8-Codec für Videokompression und nutzt eine ähnliche Technologie für die Kompression von Standbildern. Es implementiert eine Reihe von fortschrittlichen Kompressionsalgorithmen, um effizientere und qualitativ hochwertige Bilder zu erzeugen.

1. Verlustbehaftete Kompression: WebP verwendet einen prädiktiven Codec, der die Farbinformationen aus benachbarten Blöcken extrahiert, um redundante Informationen zu eliminieren. Dieser Ansatz ermöglicht es WebP, bessere Kompressionsergebnisse zu erzielen als JPEG bei vergleichbarer Bildqualität.
2. Verlustfreie Kompression: WebP nutzt fortschrittliche Techniken wie die räumliche Vorhersage und die Entropiekodierung, um eine verlustfreie Kompression zu erreichen. Im Vergleich zu anderen verlustfreien Formaten wie PNG erreicht WebP in der Regel kleinere Dateigrößen bei vergleichbarer Qualität.
3. Alpha-Kanal-Unterstützung: WebP unterstützt auch die Transparenz durch Alpha-Kanäle, sowohl für verlustfreie als auch für verlustbehaftete Kompression. Dies ermöglicht es, Bilder mit variabler Transparenz zu erzeugen, ohne die Dateigröße signifikant zu erhöhen.
4. Animation: WebP kann auch animierte Bilder erstellen, indem es mehrere Standbilder in einer einzigen Datei kombiniert. Die Animationen können verlustbehaftet oder verlustfrei komprimiert werden und sind in der Regel kleiner als äquivalente animierte GIFs.

Für Entwickler gibt es mehrere Bibliotheken und Tools, um das WebP-Format in Anwendungen und Websites zu implementieren. Google hat vorkompilierte Dienstprogramme wie zum Beispiel cwebp, dwebp und gif2webp, die es zur Verfügung stellt.

WebP im Vergleich zu JPG und PNG

Wer richtig tief in das Thema versinken möchte, sollte dieses Video von Google schauen.

Browser-Kompatibilität von WebP

WebP wird von vielen modernen Browsern unterstützt (Browser Support), darunter Google Chrome, Firefox, Edge und Opera. Bei Browsern, die WebP nicht unterstützen, wie z.B. ältere Versionen von Internet Explorer oder Safari, sollten alternative Bildformate wie JPEG oder PNG verwendet werden.

WebP-Konvertierung

Um WebP-Bilder in WordPress zu verwenden und Bilder online in WebP umzuwandeln, kannst Du die folgenden Methoden nutzen:

WordPress-Plugins zur WebP Umwandlung

Es gibt verschiedene Plugins, die Dir dabei helfen können, Bilder automatisch in WebP umzuwandeln und sie in Deiner WordPress-Installation zu verwenden.

WebP Express

WebP Express konvertiert automatisch Deine hochgeladenen Bilder in das WebP-Format und stellt sie den unterstützenden Browsern zur Verfügung. Es bietet auch die Möglichkeit, vorhandene Bilder auf Deinem Server in WebP umzuwandeln.

EWWW Image Optimizer

EWWW Image Optimizer ist ein leistungsstarkes Bildoptimierungs-Plugin, das auch WebP-Konvertierungsfunktionen unterstützt. Du kannst es so einstellen, dass es automatisch Bilder in WebP umwandelt, wenn sie auf Deiner Website hochgeladen werden. Hier gibt es übrigens gerade (15.04.2023) ein AppSumo-Lifetime-Deal.

Imagify

Imagify ist ein WordPress-Plugin, das die Größe von Bildern reduziert und WebP unterstützt. Wenn eine Webseite mit Imagify und WebP optimiert wurde, wird das Bild automatisch im WebP-Format geladen, falls der Browser des Besuchers WebP unterstützt. Dies verkürzt die Ladezeit der Webseite und verbessert die Benutzererfahrung.

Shortpixel

Shortpixel ist ein Plugin zur Bildkompression, welches auch WebP-Unterstützung bietet. Du kannst es verwenden, um Bilder automatisch in WebP umzuwandeln oder WebP-Bilder für bereits hochgeladene Bilder zu generieren.

Online-Konvertierungsdienste für WebP

Wenn Du keine WordPress-Plugins verwendst oder nur einzelne Bilder in WebP konvertieren möchtest, kannst Du Online-Konvertierungsdienste nutzen. 

Squoosh

Squoosh ist ein Online-Bildoptimierungstool von Google, das die Konvertierung von Bildern in verschiedene Formate, einschließlich WebP, unterstützt. Lade einfach Dein Bild hoch, wähle das WebP-Format aus und stelle die gewünschten Kompressionseinstellungen ein.

Convertio

Convertio ist ein Online-Dateikonverter, der eine Vielzahl von Dateiformaten unterstützt, einschließlich WebP. Lade einfach Dein Bild hoch oder gib eine URL an, und Convertio konvertiert es in das gewünschte Format.

WebP auf anderen Systeme konvertieren

Um WebP in verschiedenen Shop- und Blogsystemen zu konvertieren, musst Du in der Regel ein Plugin oder eine Erweiterung installieren.

• Shopware: Installiere das kostenlose WebP-Plugin von Tinify. Das Plugin ist mit Shopware 5 und 6 kompatibel.
• Joomla: Konvertiere JCH Optimize oder Optimole.
• Drupal: Installiere das WebP-Modul von Drupal.
• TYPO3: Nutze das WebP-Plugin von Pixelant.
• Gambio: Installiere das WebP-Plugin von e-marks.
• Magento: Installiere das kostenlose WebP-Plugin von PotatoCommerce. Das Plugin ist mit Magento 1 und 2 kompatibel.
• PrestaShop: Konvertiere mittels des kostenlosen WebP-Plugins von ImageRecycle. Das Plugin ist mit PrestaShop 1.6 und 1.7 kompatibel.
• OpenCart: Hol Dir das kostenlose WebP-Plugin von iSenseLabs. Das Plugin ist mit OpenCart 2 und 3 kompatibel.

Shopify + BigCommerce unterstützten standardmäßig das WebP-Format, sodass keine zusätzlichen Plugins oder Erweiterungen erforderlich sind.

Wenn Du die WebP-Konvertierung direkt im Browser durchführen möchtest, kannst Du JavaScript-Bibliotheken wie webp-hero oder webpjs verwenden. Diese Bibliotheken ermöglichen es Dir, WebP-Bilder dynamisch zu konvertieren und anzuzeigen, wenn der Browser des Benutzers WebP-Unterstützung bietet. 

WebP immer mit Fallback laden

<picture> 
    <source srcset="images/beispiel.webp" type="image/webp"/>
    <img src="images/beispiel.jpg" alt="beispiel"/>
</picture>

Aktivieren von WebP auf Apache Webservern

Wenn Du WebP auf einem Apache Webserver einsetzen möchtest, gibt es zwei Schritte, die Du ausführen musst.

Aktivieren der WebP-Unterstützung für Apache:

Um WebP auf einem Apache Webserver zu aktivieren, musst Du das Modul mod_webp installieren und aktivieren.

LoadModule webp_module modules/mod_webp.so

Verwendung von WebP-Bildern auf Deiner Website:

Sobald die WebP-Unterstützung für Apache aktiviert ist, kannst Du WebP-Bilder auf Diner Website verwenden.

<IfModule mod_rewrite.c>
  RewriteEngine On
  # Bedingung für WebP-Unterstützung des Browsers
  RewriteCond %{HTTP_ACCEPT} image/webp
  # Wenn Originalbild vorhanden und WebP-Datei existiert
  RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png|gif)
  RewriteCond %1.webp -f
  # Serviere die WebP-Datei statt des Originalbildes
  RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp 
</IfModule>

Dieser Code leitet WebP-Bilder um, wenn sie auf dem Server verfügbar sind und der Browser des Benutzers das WebP-Format unterstützt. Andernfalls werden die Originalbilder geladen.

Aktivieren von WebP auf NGINX Webservern

Im HTTP- sowie im SERVER-Config-Block wird die nginx.conf an jeweils erweitert.

server {
    ...
    location / {
        try_files $uri$webp_suffix $uri =404;
        add_header Vary Accept;
    }
    location ~* \.(png|jpe?g)$ {
        add_header Cache-Control "public, max-age=31536000, immutable";
        expires 31536000s;
        try_files $uri$webp_suffix $uri =404;
        add_header Vary Accept;
    }
    ...
}

map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

Was kommt nach WebP?

Die Zukunft von WebP erscheint ungewiss, nachdem Google die Entwicklung von WebP 2 gestoppt hat und es lediglich als Experimentierfeld für Bildkompression verwendet. Als mögliche Nachfolger stehen AVIF und JPEG-XL zur Diskussion, wobei AVIF aufgrund seiner langsamen AV1-Codierung und fehlenden Hardware-Unterstützung auf Smartphones noch einige Hürden zu überwinden hat. Obwohl AV1 in der Streaming-Szene populär ist und von Plattformen wie YouTube, Netflix und Twitch sowie Grafikkarten der nächsten Generation unterstützt wird, bleibt abzuwarten, ob sich AVIF als Bildformat durchsetzen kann. In Bezug auf JPEG-XL haben Google und Mozilla die Implementierung in ihren Browsern vorerst auf Eis gelegt, was die Verbreitung dieses Formats ebenfalls behindern könnte.