Bildformate: AVIF und WebP.
AVIF und WebP sind moderne Bildformate, die dieselbe visuelle Qualität in deutlich kleineren Dateien liefern als JPEG und PNG.
Auf den meisten Websites nehmen Bilder den größten Anteil des Seitengewichts ein, und der Großteil dieses Anteils ist unnötig. Die Formatwahl allein kann die Dateigröße halbieren — ohne Einbußen an visueller Qualität und ohne jede Designänderung.
Beide Formate genießen breite Browserunterstützung, und beide bieten verlustbehaftete Kompression. AVIF erzeugt meist die kleinere Datei, kodiert aber langsamer; WebP ist etwas größer, wird schneller erzeugt und läuft auch in älteren Browsern.
Ausliefern mit Rückfallebenen
Der richtige Ansatz ist nicht, ein einziges Format zu wählen, sondern dem Browser die Optionen anzubieten und ihn das beste nehmen zu lassen. Ein Bildelement kann mehrere Quellen deklarieren, und der Browser lädt das erste Format, das er unterstützt; die nicht unterstützten fragt er nie an.
Die Reihenfolge zählt: das kleinste und neueste Format oben, das am breitesten unterstützte unten. So nimmt der moderne Browser die kleinste Datei, der alte eine funktionierende, und keiner lädt unnötig.
Auf dieser Website werden die Vitrinenbilder genau so ausgeliefert: je Projekt drei Breiten und zwei Formate. Die Prüfsuite misst bei jedem Lauf, dass die drei AVIF-Dateien der größten Breite zusammen unter 200 Kilobyte bleiben — die Formatwahl ist keine Vorliebe, sondern ein an einen Test gebundenes Budget.
Responsive Größen
Die zweite, gleich wichtige Entscheidung ist die Größe: dem Telefon das Desktop-Bild zu schicken ist die häufigste Verschwendung und verbrennt die Bandbreite mobiler Nutzer direkt. Ein Bildelement kann für verschiedene Breiten verschiedene Dateien deklarieren, und der Browser wählt die passende nach Bildschirmgröße und Pixeldichte.
Damit die Wahl stimmt, muss der Browser die Größe des Bildes im Layout erfahren — denn er kann sie vor dem Laden des CSS nicht wissen und will das Bild früh anfordern. Fehlt diese Information, nimmt der Browser den schlimmsten Fall an und lädt eine größere Datei als nötig.
- Wie viele Breiten erzeugen — meist genügen drei: Mobil, Tablet, Desktop.
- Welche Breiten — abgeleitet aus den echten Umbruchpunkten des Layouts, nicht aus runden Zahlen.
- Pixeldichte — zusätzliche Breiten für hochdichte Bildschirme; aber nicht ohne Grenze.
- Die Größenangabe — dem Browser muss gesagt werden, wie viele Pixel das Bild im Layout einnimmt.
- Breite und Höhe — unabhängig von der Dateiwahl immer geschrieben, wegen der Layoutverschiebung.
Die Kompressionsqualität
In verlustbehafteten Formaten arbeitet die Qualitätseinstellung auf einer Kurve, und ab einem bestimmten Punkt wächst die Datei, ohne dass die sichtbare Qualität steigt. Diesen Punkt findet man im Vergleich, nicht nach Augenmaß: Dasselbe Bild wird mit verschiedenen Einstellungen erzeugt, nebeneinandergelegt, und der letzte Punkt mit sichtbarem Unterschied wird gewählt.
Fotografien und Grafiken verhalten sich verschieden. Die Fotografie verträgt verlustbehaftete Kompression gut, weil sie ohnehin kontinuierliche Tonübergänge trägt. Scharfkantige Grafiken und Bilder mit Text degradieren bei niedriger Qualität sichtbar — dort ist ein verlustfreies Format oder ein Vektor vorzuziehen.
Ein Bild mit Text darin ist eine falsche Entscheidung, egal in welchem Format — Text muss als Text geschrieben werden.
Die Regel in dieser Zeile reicht über die Performance hinaus: In ein Bild eingebackener Text wird von keinem Screenreader gelesen, von keiner Suchmaschine indexiert und lässt sich vom Nutzer nicht vergrößern. Die Frage vor jeder Formatdebatte lautet, ob in diesem Bild Text steckt.
Die Produktion muss automatisiert sein
Drei Breiten und zwei Formate heißen sechs Dateien je Bild. Das von Hand zu erzeugen ist nicht tragbar: Ein Bild hinzuzufügen verlangt sechs Schritte, und wird einer vergessen, geht der Fehler lautlos in Produktion. Die dauerhafte Lösung: die Ableitungen mit einem Werkzeug erzeugen.
Auf dieser Website kommen die Vitrinenbilder aus einem Build-Skript: Das Quellbild wird einmal abgelegt, das Skript erzeugt drei Breiten und zwei Formate und berichtet die Größen. Kommt ein neues Projekt, bleibt nur, das Skript laufen zu lassen.
Der zweite Nutzen der Automatisierung ist die Messung: Das Werkzeug kann die eigene Ausgabe wiegen und warnen, wenn das Budget überschritten ist. In der Handproduktion fällt diese Kontrolle der menschlichen Aufmerksamkeit zu — und die zerstreut sich nach dem dritten Bild.
Und eine Wartungsnotiz: Das Quellbild muss immer aufbewahrt werden. Eine Ableitung aus einer Ableitung zu erzeugen häuft Qualitätsverlust an; liegt die Quelle vor, lässt sich beim Formatwechsel oder bei einer neuen Breite alles von vorn und verlustfrei erzeugen.
Vektor und Icon
Für manche Bilder ist die richtige Antwort gar kein verlustbehaftetes Format: Logos, Icons, Diagramme und scharfkantige Grafiken gehören als Vektor ausgeliefert. Vektordateien sind größenunabhängig — dieselbe Datei dient als kleines Icon und als großer Druck — und sind meist kleiner als ihr verlustbehaftetes Gegenstück.
Der zweite Vorteil des Vektors: Er ist stilbar. Seine Farbe lässt sich per CSS ändern, er passt sich dem dunklen Thema an und lässt sich animieren. Ein Icon-Set als Rasterdateien auszuliefern heißt, diese Flexibilität von Anfang an zu verlieren.
Eine Warnung: Aus Designwerkzeugen kommende Vektordateien tragen meist unnötige Metadaten und Ballast. Ein Bereinigungsschritt senkt die Dateigröße deutlich, und dieser Schritt lässt sich automatisieren.
Auf dieser Website sind die Icon-Familie und das Monogramm mit dieser Logik gebaut; die Favicon-Produktion hängt an einem Werkzeug, und die echte Glyphe wird auf einem Browser-Canvas gezeichnet — so kommt sie auf jeder Maschine gleich heraus. Die Designkonsistenz ist an eine Produktionsentscheidung gebunden.
Und eine Wartungserinnerung: Die Formatunterstützung weitet sich mit der Zeit. Ein Format, das heute eine Rückfallebene braucht, kann in wenigen Jahren allein genügen, und dann werden die Rückfalldateien zu totem Gewicht. Liest die Produktionskette die zu erzeugenden Formate aus einer einzigen Stelle, ist dieser Übergang eine einzeilige Änderung; von Hand in jede Seite geschriebene Rückfalllisten müssen einzeln bereinigt werden.
Eine letzte Messgewohnheit: Nach der Erzeugung jeder Bildableitung sollte ihre Größe berichtet und an ein Budget gebunden werden. Auf dieser Website ist das Budget der Vitrinenbilder über die Summe der drei Dateien der größten Breite definiert, und die Prüfsuite misst es bei jedem Lauf. Wird ein Bild erneuert und kommt versehentlich unkomprimiert, zeigt sich der Fehler im Moment des Deployments — nicht bei der nächsten Prüfung.