Sind die im Web gebräuchlichen Bilddateiformate JPEG, PNG, SVG und GIF bald Schnee von gestern?
Schaut man sich die Vorzüge der Next-Gen-Formate JPEG 2000, JPEG XR und WebP an, erscheint diese Annahme nicht unwahrscheinlich.
Doch, was zeichnet die Next-Gen-Formate gegenüber den bekannten Webformaten aus?
In diesem Beitrag werden WebP, JPEG 2000 und JPEG XR unter die Lupe genommen und die Vor- und Nachteile in der Theorie und Praxis beleuchtet.
Das erwartet mich in diesem Beitrag
- WebP, JPEG 2000 und JPEG XR - Ein Überblick
- Browserkompatibilität - Die Next-Gen-Bildformate im Praxistest
- WebP, JPEG 2000 und JPEG XR als die Lösung? - Ein erstes Fazit
- Automatische WebP-Umwandlung - Ein Tool für viele Arbeitsschritte
WebP, JPEG 2000 und JPEG XR - Ein Überblick
WebP
WebP ist ein Bildformat von Google/Chrome und verspricht verlustbehaftete als auch verlustfreie Kompression der Bilder bei wesentlich kleinerer Dateigröße.
Welchen Vorteil hat das?
Die Ladezeit einer Website ist bekanntermaßen eines der wichtigsten Ranking-Faktoren bei Google. |
Zudem werden Websites zunehmend auf Smartphones und Tablets aufgerufen. Die haben in der Regel ein geringeres Datenvolumen & Leistungsfähigkeit. |
Schaut man sich einen Vergleich der Bilder als JPEG und WebP an, kann man mit dem bloßen Auge in der Tat keinen bis kaum einen Unterschied erkennen.
JPEG -> 220 KB |
WebP -> 111 KB |
(Originalfoto: 960 x 1440 Px; das rechte Bild wird nicht angezeigt, falls der verwendete Browser .webp nicht unterstützt)
Weitere Gegenüberstellungen von Fotos im JPEG- versus WebP-Format kann man in der Google WebP-Gallery bestaunen.
Vorteile von WebP
- Deutliche Einsparung bei der Bildgröße bei gleicher Qualität gegenüber JPEG und PNG (WebP-verlustfreie Bilder sind um 26 % kleiner als PNG-Bilder und 25-34 % kleiner als JPEG-Bilder bei gleichem SSIM-Qualitätsindex)
- Einsparung bei der Ladezeit der Website
- WebP fungiert gleichzeitig als Bildschutz, da es aktuell nur im Web eingesetzt werden kann
Der Grad der verlustbehafteten Komprimierung ist einstellbar, sodass der Benutzer den Kompromiss zwischen Dateigröße und Bildqualität wählen kann. WebP erzielt normalerweise eine um durchschnittlich 30 % höhere Komprimierung als JPEG und JPEG 2000 ohne Einbußen bei der Bildqualität.
Bei der verlustfreien WebP-Komprimierung werden bereits gesehene Bildfragmente verwendet, um neue Pixel exakt zu rekonstruieren.
Nachteile von WebP
- Um ein Bild in das WebP-Format umzuwandeln, ist die Installation von Tools oder Plugins erforderlich
- WebP wird nicht von allen Browsern unterstützt. Um WebP effektiv in Websites einsetzen zu können, ist ein umfassender Browser-Support erforderlich
- Auch Photoshop unterstützt WebP nicht nativ
Abhilfe bei der Erstellung einer WebP-Grafik schaffen Photoshop-WebP-Plugins, wie telegraphics.com, oder Free Converter, wie freeconvert.com
JPEG 2000 und JPEG XR
JPEG 2000 wurde wie JPEG von der Joint Photographic Experts Group herausgegeben. Die Bilddateien im JPEG 2000-Format bieten Raum für Metadaten, die das Verwalten und Auffinden der Bilder erleichtern. Das Format JPEG 2000 bietet gegenüber JPEG einige Vorteile: Ein Nachteil gegenüber JPEG ist die Inkompatibilität. Nur wenige Programme unterstützen JPEG 2000, was im Wesentlichen durch Patentprobleme bedingt ist. Im Gegensatz zu WebP wird JPEG 2000 von Photoshop CC unterstützt. |
Darüber hinaus gibt es auch hier Free Converter, die die Bilder in Schnelle ins .jp2-Format umwandeln können, JPEG XR steht für extended range und wurde von Microsoft ursprünglich unter dem Namen HD Photo und Windows Media Photo (erkennbar an den heute noch gebräuchlichen Dateiendungen .hdp und .wdp) als eigene kostenlose Mediensoftware entwickelt. Um diese Dateien lesen zu können, ist für Programme, wie Photoshop, ein Plugin (HD-Photo-Plugin) notwendig. |
Browserkompatibilität - Die Next-Gen-Bildformate im Praxistest
Wir haben gesehen, dass JPEG 2000, JPEG XR und WebP Bildformate sind, die im Vergleich zu ihren älteren JPEG- und PNG-Pendants bessere Komprimierungs- und Qualitätseigenschaften aufweisen. Das Kodieren der Bilder in diesen Formaten beschleunigt die Ladezeit und verringert den Mobilfunkdaten-Verbrauch. Das klingt erstmal super, das Hauptproblem bleibt der Browser Support. |
Browser Support
- JPEG 2000: Safari 5+
- JPEG XR: IE9-11, Edge
- WebP: Chrome, Opera, Android Browser, Edge 18+, Firefox 65+
WebP wird in Google Chrome, Firefox, Edge, dem Opera-Browser und von vielen anderen Tools und Softwarebibliotheken nativ unterstützt.
JPEG 2000 funktioniert nur in Safari und auf Apple-Geräten, JPEG XR ist auf Internet Explorer/Edge und auf Microsoft-Geräte beschränkt.
Wenn das Bild von allen anderen Browsern erkannt werden soll, muss eine Fallback-Grafik im unterstützten Format (z. B. PNG, JPEG) bereitgestellt werden.
Hier kann man die aktuelle Browser Unterstützung für das entsprechende Next-Gen-Format nachschlagen:
WebP, JPEG 2000 und JPEG XR als die Lösung? - Ein erstes Fazit
Die Vorteile der Next-Gen-Bildformate liegen klar auf der Hand. Eine Kompromisslösung ist das zusätzliche Hinterlegen einer Fallback-Datei im üblichen Bildformat, das in jedem Browser dargestellt werden kann. |
Das Hochladen von 2 Bildern in unterschiedlichen Dateiformaten erfordert wiederum einen höheren Zeitaufwand und kostet mehr Speicherplatz auf dem Server, hat aber definitiv einen Mehrwert für die Nutzer, deren Browser das Next-Gen-Format lesen können. Die Website wird schneller geladen, was sich positiv auf das SEO-Ranking auswirkt. Für Websites, die eine Vielzahl hochauflösender Bilder enthalten, lohnt sich der Aufwand voraussichtlich. Zudem werden zunehmend Tools entwickelt, die das Konvertieren vereinfachen. Ein Toll, das unseren Praxistest bestanden hat, ist DJ-WebP, das wir gerne als Abschluss vorstellen möchten. |
Automatische WebP-Umwandlung - Ein Tool für viele Arbeitsschritte
WebP ist derzeit am erfolgversprechendsten, zumindest in Hinblick auf die Verbreitung, Anwendbarkeit und den Browser-Support. WebP-Grafiken sind keine Einzelerscheinung mehr, sondern finden zunehmend Einzug in sämtliche Websites. DJ-WebP ist ein kostenloses Plugin für Joomla, das die Konvertierung von .jpg- und .png-Formaten in .webp für Sie übernimmt. Ist das Plugin installiert, verarbeitet es alle gewünschten Dateien und stellt sie im .webp-Format anstelle der Originalformate bereit. |
und nach Bedarf einstellen, welche Dateien verarbeitet werden sollen, also bestimmte Verzeichnisse/Ordner Menüpunkte oder Dateien auswählen oder von der Verarbeitung ausschließen (z. B. wenn man ein Bild im Originalformat behalten möchte) Das Tool überprüft automatisch, ob der entsprechende Browser das WebP-Format lesen kann und stellt es bei Bedarf bereit. Ist das nicht der Fall (der Browser kann keine Bilder im WebP-Format darstellen), wird die Originaldatei (im PNG- / JPEG-Format) als Fallback geladen. Wir haben das Plugin getestet und verwenden es inzwischen auch auf unserer Joomla-Seite. Klare Empfehlung! |
Für Fragen und Anregungen haben wir immer ein offenes Ohr.
Quellen: