Notizen vom Team zu Handwerk, Formaten und den kleinen Entscheidungen hinter einem guten Ergebnis.
Wie WebP kleinere Größen als PNG erreicht
WebP nutzt zwei verschiedene Kompressionsmodi. Der verlustfreie Modus kombiniert räumliche und farbliche Vorhersage mit einer Entropie-Kodierungsstufe, die ausgefeilter ist als PNGs DEFLATE, und erreicht laut Googles veröffentlichtem Benchmark auf typischen Bildern rund 26 Prozent bessere Kompression. Der verlustbehaftete Modus wendet eine blockbasierte Transformation ähnlich der Videokompression an, die darauf ausgelegt ist, wahrnehmungsmäßig irrelevante Information zu verwerfen und zu behalten, was das Auge tatsächlich sieht. Für Bilder mit Transparenzebene nutzt WebP eine getrennte verlustfreie Unter-Kompression für die Transparenz-Daten, während die RGB-Daten verlustbehaftet komprimiert werden, weshalb verlustbehaftetes WebP mit Transparenz bei gleicher sichtbarer Qualität etwa dreimal kleiner sein kann als ein PNG. PNGs DEFLATE ist nur verlustfrei und kann den wahrnehmungsbasierten Kompromiss des verlustbehafteten Modus nicht nutzen. Der Formatunterschied erklärt die Lücke.
Der Transparenzebene im Detail
Sowohl PNG als auch WebP unterstützen 8-Bit-Transparenz, das heißt jeder Pixel kann einen Deckkraftwert von 0 (vollständig transparent) bis 255 (vollständig deckend) halten. Wenn der Bildmotor der Plattform ein PNG zu WebP neu kodiert, liest er die RGBA-Werte jedes Pixels und reicht die Transparenzwerte direkt in den WebP-Schritt der Kodierung, wo sie mit verlustfreier Kompression erhalten bleiben, unabhängig davon, wie die RGB-Daten kodiert werden. Das Ergebnis ist, dass jeder transparente Pixel im PNG bei Alpha 0, jeder halbtransparente Pixel zwischen 1 und 254 und jeder deckende Pixel bei 255 auf genau denselben Zustand im WebP abgebildet wird. Bei einem Logo mit weichen Schlagschatten oder kantengeglättetem Text auf transparentem Hintergrund bleibt die Kantenglätte erhalten. Das steht im Gegensatz zu JPG, das in seiner Container-Spezifikation kein Transparenz-Feld hat und das Bild vor der Kodierung gegen eine Hintergrundfarbe zusammensetzen muss.
Core Web Vitals und die Wahl des Bildformats
Largest Contentful Paint misst, wie lange das größte sichtbare Element der Seite braucht, um im Sichtbereich zu erscheinen. Bei den meisten Inhaltsseiten ist dieses Element das Hero-Bild, und Google nutzt LCP als Ranking-Signal in seiner Core-Web-Vitals-Bewertung. PNG-Bilder sind eine ständige Ursache für LCP-Probleme wegen ihrer Dateigröße, denn ein fotografisches PNG in 4K-Auflösung kann mehrere Megabyte wiegen, während das gleichwertige WebP nahe der Verlustfreiheit meist nur ein Bruchteil davon ist. PageSpeed Insights markiert das gezielt in seinem Prüfpunkt für Next-Gen-Formate und nennt PNG als das zu ersetzende Format. PNGs, die in kritischen Render-Pfaden erscheinen, in WebP umzuwandeln, ist eine der wirkungsvollsten Einzeländerungen, um die gemessene Seitenleistung zu verbessern. Der Zeitstrahl der Browserunterstützung macht das sicher, mit WebP in Chrome ab 2011, Firefox ab 2019, Safari ab 2020 und Edge seit seinem Chromium-Umbau.
Verlustbehaftete Ausgabe und die Einstellung nahe der Verlustfreiheit
Die WebP-Kodierung bietet einen Qualitätsparameter von 0 bis 100, wobei höhere Werte mehr Detail erhalten, auf Kosten größerer Dateien. Dieses Werkzeug kodiert mit einer festen Einstellung nahe der Verlustfreiheit, abgestimmt darauf, sichtbare Treue und Dateigröße für die typischen Web-Kategorien Fotos, UI-Grafiken und Symbole auszubalancieren. Bei dieser Einstellung ist die Ausgabe bei normalen Bildschirm-Betrachtungsabständen nicht vom Quell-PNG zu unterscheiden. Technisch geht etwas Detail auf Bit-Ebene gegenüber einer echten verlustfreien Kodierung verloren, das heißt ein byteweiser Vergleich zwischen den dekodierten WebP-Pixeln und den originalen PNG-Pixeln zeigt kleine numerische Unterschiede. Diese Unterschiede liegen bei fotografischem Inhalt unter der Schwelle menschlicher Wahrnehmung. Für medizinische Aufnahmen, Satellitenfotografie oder die digitale Archivierung, wo verlustfreie Treue eine harte Anforderung ist, ist der richtige Weg, das PNG zu behalten und WebP nur als Auslieferungs-Export zu nutzen, nicht als Arbeitskopie.
Verhalten der Metadaten
Der Ablauf für die PNG-zu-WebP-Umwandlung entfernt EXIF-, IPTC- und XMP-Metadaten aus der Ausgabe. Das entspricht dem Verhalten, das über alle drei großen Browser-Engines beobachtet wird. ICC-Farbprofile werden uneinheitlich behandelt, Chrome und Safari erhalten das sRGB-ICC-Profil-Tag in der WebP-Ausgabe, während Firefox alle Metadaten einschließlich des ICC-Profils entfernt. Das Nettoergebnis ist, dass das umgewandelte WebP browserübergreifend sRGB-sicher ist, aber jede Weitgamut-Kennzeichnung wie Display-P3, Adobe RGB oder ProPhoto RGB im Quell-PNG überlebt in Firefox nicht. Für farbkritische professionelle Workflows ist diese Uneinheitlichkeit relevant, wenn die finale Ausgabe also Farbprofil-Treue braucht, wandle mit einem Werkzeug um, das ICC-Daten ausdrücklich schreibt, oder setz das Profil-Tag als Nachbearbeitungsschritt mit einem dedizierten Bild-Metadaten-Editor.
Wann PNG behalten und wann WebP genügt
Der praktische Entscheidungsbaum ist kurz. Wenn das endgültige Ziel des Bildes eine Webseite oder Web-Anwendung ist und die Anzeige-Umgebung ein beliebiger Browser ab 2020 ist, ist WebP das richtige Export-Format. Wenn das Bild in einer Design-Anwendung wie Figma, Sketch oder Affinity Designer geöffnet werden muss, prüf die WebP-Unterstützung in der genauen Version, die du nutzt, da die Unterstützung schwankt. Wenn das Bild in einem Druck-Workflow genutzt wird, ist PNG oder TIFF vorzuziehen, da die meisten Druck-RIPs WebP nicht verarbeiten. Wenn das Bild per E-Mail verschickt wird, ist PNG sicherer, da E-Mail-Programme notorisch uneinheitlich mit modernen Formaten umgehen. Wenn das Bild als Arbeitsdatei genutzt wird, die mehrfach bearbeitet und neu gespeichert wird, behalte das PNG als Master. WebP nahe der Verlustfreiheit ist ein hervorragendes Auslieferungs-Format, und PNG ist das bessere Format zum Archivieren und Bearbeiten. Der ideale Workflow behält das PNG als Original und exportiert WebP für die Web-Auslieferung.
