Website-Bilder sorgen für viele Diskussionen, und das aus gutem Grund: Laut dem HTTP-Archiv sind 61 Prozent des Seitengewichts einer Website auf einem Desktop-Computer Bilder, und dieser Prozentsatz steigt auf 65 Prozent auf mobilen Geräten. Und um das Ganze abzurunden, ist die Anzahl der Bildbytes auf einer durchschnittlichen Webseite von Jahr zu Jahr um mehr als 30 Prozent gestiegen, da die Bilder immer größer werden.
Seit der Markteinführung der Standardformate JPEG, GIF und PNG vor mehr als 15 Jahren wurden keine großen Fortschritte bei der Unterstützung von Bildformaten erzielt. Der Grund ist einfach: Es ist schwierig, neue Bildformate für verschiedene Browsertypen zu unterstützen. In den letzten Jahren sind jedoch zwei neue Bildformate auf den Markt gekommen, die in letzter Zeit als Möglichkeit zur Optimierung von Bildern an Bedeutung gewonnen haben: WebP (von Google bereitgestellt) und JPEG XR (unterstützt von Microsoft).
WebP vs. JPEG XR
Beide stützen sich auf bedeutende technologische Fortschritte der letzten 15 Jahre und haben jeweils ihre einzigartigen Stärken. Jedes Format unterstützt verlustfreie und verlustbehaftete Komprimierung und volle Transparenz, und JPEG XR unterstützt das progressive Rendern von Bildern. Websites, die diese neuen Formate verwenden, erzielen signifikante Ergebnisse und sparen im Vergleich zu einem JPEG ähnlicher Qualität oft 25 bis 50 Prozent der Bytes .
Der größte Nachteil für beide – und die wichtigste Einführung in letzter Zeit ist etwas verlangsamt – ist die Browserunterstützung: WebP zum Beispiel wird nur in Chrome, Opera und einigen neueren Android-Geräten unterstützt. JPEG XR wird in IE 10+ vollständig unterstützt, mit eingeschränkter Unterstützung in IE 9. Beide bieten keine Unterstützung für Firefox und Safari. Für viele Benutzer, die diese Browser nicht verwenden, erscheinen die Bilder einer Website kaputt.
Facebook unterstützt WebP
Der einzige große öffentliche Test dieser neuen Formate kam mit der Implementierung von WebP durch Facebook im vergangenen Frühjahr. Facebook war in der Lage, Nutzern mit WebP-unterstützten Browsern Bilder zur Verfügung zu stellen, aber es traten Probleme auf, als Nutzer versuchten, die Fotos durch Speichern, Bearbeiten oder erneutes Teilen zu bearbeiten. Ein frustrierter Benutzer fragte: “Wie deaktiviere ich dieses Monster?”
Tipps für die Implementierung von Bildformaten
Websites können erheblich von diesen neuen Bildoptimierungstechnologien profitieren, müssen aber ein paar Dinge im Hinterkopf behalten, wenn sie in diese Richtung gehen:
- Verstehen Sie, wie die Leute die Bilder der Website verwenden werden. Im Fall von Facebook wurde der Nutzer eindeutig nicht berücksichtigt, da das Herunterladen, Speichern, Bearbeiten und Teilen von Fotos Aktivitäten sind, die von einem erheblichen Prozentsatz des Facebook-Publikums durchgeführt werden.
- Die Normalisierung der Qualität ist wichtig. Unterschiede in den Qualitätseinstellungen müssen berücksichtigt werden, wenn mehrere verlustbehaftete Formate verwendet werden. Die Auswahl von Qualitätseinstellungen, die zu einer ähnlichen wahrgenommenen Qualitätsverschlechterung führen, kann mit einem Algorithmus wie SSIM (strukturelle Ähnlichkeit) erreicht werden.
- Verwenden Sie WebP und JPEG XR nur in Fällen, in denen Browserunterstützung vorhanden ist. Da es keine Überschneidungen bei der Browserunterstützung gibt, kann es für Websites, die sich in diese Richtung bewegen möchten, sinnvoll sein, beide für eine maximale Abdeckung zu unterstützen.
Die Verwendung dieser neuen Bildoptimierungsformate hat viele Vorteile, und wenn die oben genannten Punkte berücksichtigt werden, werden Websites eine deutlich verbesserte Leistung und Byte-Einsparungen erzielen. Weitere Browser-Unterstützung – insbesondere von Firefox und Safari – wird den Topf noch mehr versüßen.
