PNG für das Web komprimieren

Auf einer modernen Website sollte PNG eine bestimmte, eher begrenzte Aufgabe übernehmen: Logos, Icons, UI-Screenshots, Diagramme und alles, was einen transparenten Hintergrund braucht. Alles Fotografische gehört zu JPEG oder WebP. Websites, die ihr Performance-Budget bei Bildern reißen, liefern oft Fotografien als PNG aus, und keine Komprimierungseinstellung rettet das — die Lösung ist ein Formatwechsel, keine Palettenänderung.

Für Assets, die tatsächlich PNG sein sollten, ist 128 Farben mit Dithering fast eine universelle Antwort. UI-Elemente und Markenauftritte sind mit einer kleinen, bewussten Palette gebaut, daher entfernt die Halbierung der verfügbaren Farben Redundanz statt Information, und das Ergebnis ist für das Auge identisch bei etwa halb so vielen Bytes.

Für ein Logo oder Icon, das als Vektorgrafik existiert, übertrifft SVG jedes Rasterformat ausnahmslos: ein paar hundert Bytes Markup, scharf bei jeder Zoomstufe und Bildschirmdichte, und mit CSS anpassbar. Wenn Sie die ursprüngliche Vektordatei haben, verwenden Sie sie. PNG ist die Rückfalloption, wenn Sie sie nicht haben, oder für Grafiken mit Effekten, die die Vektorisierung nicht überleben.

WebP unterstützt ebenfalls Transparenz und ist bei gleichem Inhalt meist kleiner als PNG, mit Unterstützung in allen aktuellen Browsern. Der Grund, weiterhin PNG auszuliefern, ist Kompatibilität mit Software außerhalb des Browsers — E-Mail-Clients, ältere Design-Tools, und alles, was ein Kollege möglicherweise mit der Datei öffnet. Für Assets, die nur auf Ihren eigenen Seiten gerendert werden, ist WebP die bessere Standardwahl, und dieses Tool hat einen Konverter dafür.