Fahrzeugbilder sind eine unangenehme Bildklasse für die Komprimierung: fotografische Gradienten über gewölbte Lackierungen, scharfe Schnittkanten und ein Alpha-Kanal, der intakt bleiben muss, wo immer das Auto auf einen benutzerdefinierten Hintergrund komponiert wird. Allgemeine Ratschläge für Webbilder lassen sich größtenteils übertragen. Doch die Ausnahmen sind genau dort, wo sich Fahrzeugbilder befinden. Hier ist die Formatentscheidung, die einmal richtig getroffen wurde.
Die drei Formate in der Praxis
| PNG | WebP | AVIF | |
|---|---|---|---|
| Transparenz | Verlustfreie Alpha | Alpha, verlustbehaftet oder verlustfrei | Alpha unterstützt |
| Dateigröße (typischer Ausschnitt) | Am größten | Klein | Kleinste |
| Edge-Treue | Perfekt | Sehr gut bei vernünftiger Qualität | Sehr gut, langsamer zu kodieren |
| Support | Universal | Universal in der Praxis | Moderne Browser |
| Am besten für | Druck, Compositing-Pipelines | Alles im Web | Bandbreitenkritisch, wenn geliefert |
Wo jeder gewinnt
PNG: das Archivierungs- und Compositing-Format
PNG verdient seine Bytes genau zweimal: wenn das Bild in eine Druck- oder Designpipeline eintritt, die es ohnehin neu komprimiert, und wenn die nachgelagerte Komposition einen mathematisch sauberen Alpha-Kanal benötigt. Als Lieferformat für Webseiten ist es eine Gewohnheit, keine Entscheidung. Es ist oft fünfmal so groß bei gleicher sichtbarer Qualität.
WebP: der Standard
WebP mit einem Alpha-Kanal in vernünftiger Qualität ist der Arbeitstier: transparente Ausschnitte in einem Bruchteil des PNG-Gewichts, universelle Browserunterstützung und qualitätskontrollierbar pro Anfrage. Für ein Listenraster oder eine VDP-Galerie ist format=webp mit einer expliziten width die ganze Richtlinie.
AVIF: schärferer Bleistift, gleiche Zeichnung
AVIF komprimiert bei gleicher Qualität härter als WebP und seine Unterstützung ist jetzt gut. Die ehrliche Frage ist der marginale Gewinn: Bei richtig dimensionierten Fahrzeugausschnitten ist der Schritt von PNG zu WebP dramatisch, der Schritt von WebP zu AVIF ist ein Trim. Überprüfen Sie /api/options für die derzeit gelieferten Formate, bevor Sie eine Pipeline um eines herum aufbauen.
Die Fehler, die die Formatwahl überwiegen
- Vollauflösende Bilder in kleine Slots einspeisen. Breitenparameter existieren, nutzen Sie diese
- PNG-Transparenz an eine Seite senden, die das Auto ohnehin auf einem weißen Hintergrund anzeigt
- Ein bereits verlustbehaftetes Bild in Ihrer eigenen Pipeline neu komprimieren, Artefakte an Schnittkanten stapeln
- Qualitätsparameter ignorieren: Fahrzeug-Renderings überstehen die Komprimierung gut, und alles auf Standardqualität zu setzen lässt leicht Bytes auf dem Tisch liegen.
Die Wahl des Formats ist eine Sitzung wert. Disziplin bei der Größe ist eine Sitzung pro Quartal, für immer, wert.
Ein praktisches Beispiel
Nehmen Sie ein Listings-Raster, das 48 Fahrzeugkarten rendert. Als Vollbild-PNGs verschickt die Seite mehrere Megabyte an Bildern, die mobile Nutzer auf mobilen Verbindungen einfach nicht vollständig laden. Dasselbe Raster mit einer Breite von 600 Pixeln in WebP ist typischerweise zwei Größenordnungen kleiner pro Bild. Nichts am Design hat sich geändert, und das Raster ging von unbrauchbar zu sofort auf der Verbindung, die die meisten Shopper tatsächlich haben.
Die Formatwahl mit srcset kombinieren und der Browser erledigt den Rest: Kleine Bildschirme laden die kleine Variante, Retina-Bildschirme die scharfe, und niemand lädt Pixel herunter, die er nicht sehen kann. Da die Abmessungen Anfrageparameter sind, besteht die gesamte responsive Einrichtung aus drei URLs, die sich nur durch eine Zahl unterscheiden.
Wozu Transparenz und Schattenvarianten dienen und wie sie kombiniert werden, wird unter Schatten, Reflexionen und Transparenz behandelt. Lieferparameter finden sich in der API-Dokumentation.
