• Webdesign, Webhosting Webdesign, Webhosting, Internet - sketch

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

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. 
Je schneller die Website lädt, umso schneller kommt der Benutzer zum gewünschten Ergebnis. Ist die Ladezeit zu lang, wird der Besucher ungeduldig, verlässt die Website und kommt im schlimmsten Fall nicht wieder.

Zudem werden Websites zunehmend auf Smartphones und Tablets aufgerufen. Die haben in der Regel ein geringeres Datenvolumen & Leistungsfähigkeit.
Im Besonderen für Fotografen, die in ihrem Portfolio eine Vielzahl hochauflösender Bildern hochladen, ist eine schnellere Ladezeit von großer Bedeutung.

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

img 0209

WebP -> 111 KB

img 0209

 (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:

      • Bessere Komprimierungsrate bei gegebener Qualität
      • Bis zu 256 Farbkanäle, was verschiedene Farbprofile wie RGB und CMYK ermöglicht 

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,
wie z. B. mygeodata.cloud.

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.

JPEG XR unterstützt sowohl verlustbehaftete und verlustfreie Kompression, eine Vielzahl von Farbräumen und Kodiertechniken, sowie Alphakanäle und zusätzliche Metadaten.

Um diese Dateien lesen zu können, ist für Programme, wie Photoshop, ein Plugin (HD-Photo-Plugin) notwendig. 
Zur Umwandlung gibt es auch einige kostenlose Converter, wie aconvert.com.

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 sketch

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.
Von den 3 vorgestellten Formaten hat WebP klar die Nase vorne.

Der große Nachteil von JPEG 2000 und JPEG XR ist der unzureichende Browser-Support und damit einhergehende Massenuntauglichkeit. 
Es fehlt leider eine universelle Handhabung und Verbreitung dieser Dateiformate.

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.

Darüber hinaus kann man die Qualität der Bilder bestimmen (niedrigere Qualität - kleinere Dateigröße) 

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: