Bei einer typischen Website machen Bilder 60 bis 90 Prozent der übertragenen Datenmenge aus. Damit ist die Bildoptimierung der Bereich mit dem besten Verhältnis von Aufwand und Wirkung, und der, der am häufigsten übersprungen wird.
Die vier Schritte in der richtigen Reihenfolge
Schritt 1: Auf die benötigte Pixelbreite verkleinern
Der wichtigste Schritt und der, den kein Plugin nachholen kann.
Die Regel: das Doppelte der maximalen Darstellungsbreite im Layout, damit auch Bildschirme mit hoher Pixeldichte scharf bleiben. Mehr bringt nichts Sichtbares und kostet Datenvolumen.
| Einsatz | Darstellung | Datei sollte breit sein |
|---|---|---|
| Hero über die volle Breite | bis 1.400 Pixel | 2.000 bis 2.400 Pixel |
| Inhaltsbild in der Textspalte | bis 760 Pixel | 1.400 bis 1.600 Pixel |
| Kartenbild im Dreier-Raster | bis 400 Pixel | 800 Pixel |
| Vorschaubild in einer Liste | bis 160 Pixel | 320 Pixel |
| Logo | bis 200 Pixel | als SVG, keine Pixelgrafik |
Ein Foto direkt aus der Kamera hat 4.000 bis 8.000 Pixel Breite und mehrere Megabyte. Die Verkleinerung auf 1.600 Pixel senkt die Dateigröße typischerweise um einen Faktor von vier bis sechs, ohne sichtbaren Unterschied.
Schritt 2: In ein modernes Format überführen
WebP ist die pragmatische Wahl: 25 bis 35 Prozent kleiner als ein vergleichbares JPEG, von allen aktuellen Browsern unterstützt.
AVIF komprimiert noch stärker, braucht aber mehr Rechenzeit beim Erzeugen. Sinnvoll bei großen Bildmengen mit automatisierter Verarbeitung.
SVG für alles, was aus Linien und Flächen besteht: Logos, Icons, Diagramme. Beliebig skalierbar bei minimaler Dateigröße.
PNG nur noch für Grafiken mit Transparenz, die nicht als SVG vorliegen. Für Fotos ist PNG die falsche Wahl und erzeugt Dateien, die ein Vielfaches größer sind als nötig.
Schritt 3: Komprimieren
Bei Fotos liegt der sinnvolle Bereich bei einer Qualitätsstufe um 75 bis 85. Der Unterschied zu 100 ist bei normaler Betrachtung nicht erkennbar, die Dateigröße sinkt deutlich.
Der praktische Test: Bild bei Stufe 80 speichern, im Layout am Telefon ansehen. Wenn kein Unterschied auffällt, war die Kompression richtig. Kritisch sind Bilder mit großen gleichmäßigen Flächen wie Himmel, wo Kompressionsartefakte sichtbar werden.
Schritt 4: Mehrere Größen bereitstellen
Ein Telefon mit 390 Pixel Breite braucht kein Bild für einen 27-Zoll-Bildschirm. Über mehrere Größen mit passenden Angaben im Markup wählt der Browser selbst die kleinste ausreichende Datei.
Bei einem CMS erzeugt das System diese Größen in der Regel automatisch. Wichtig ist dann, dass die Zuschnittgrößen zum tatsächlichen Layout passen und nicht bei den Standardwerten bleiben.
Die Fehler, die am meisten kosten
1. Verzögertes Laden für das Hero-Bild. Das größte Element im ersten Bildschirm wird dadurch später geladen, und genau das misst der LCP-Wert. Verzögertes Laden gehört auf alles unterhalb des ersten Bildschirms, nicht darauf. Siehe Core Web Vitals.
2. Fehlende Breiten- und Höhenangaben. Ohne sie reserviert der Browser keinen Platz, und der Inhalt verrutscht beim Laden. Das verschlechtert den CLS-Wert und ist der am einfachsten zu behebende Fehler überhaupt.
3. Verkleinerung nur per CSS. Ein 4.000 Pixel breites Bild, das per Stilangabe auf 400 Pixel gestellt wird, wird trotzdem vollständig geladen.
4. PNG für Fotos. Erzeugt Dateien, die drei- bis fünfmal größer sind als nötig.
5. Bilder als Hintergrund, wo Inhaltsbilder hingehören. Hintergrundbilder werden von manchen Optimierungsmechanismen nicht erfasst, haben keinen Alternativtext und sind für Suchmaschinen unsichtbar.
6. Bildergalerien mit zwanzig Vollbildern auf einer Seite. Auch mit verzögertem Laden ist das viel. Sinnvoll sind kleine Vorschaubilder, die erst bei Klick das große Bild laden.
Alternativtexte: Pflicht, nicht Kür
Jedes informative Bild braucht einen Alternativtext, der den Bildinhalt beschreibt. Jedes dekorative Bild braucht einen leeren Alternativtext, damit Hilfsmittel es überspringen.
Was nicht in einen Alternativtext gehört: der Dateiname, das Wort “Bild”, eine Aufzählung von Suchbegriffen. Was hineingehört: was auf dem Bild zu sehen ist, so knapp wie möglich und so konkret wie nötig.
Bei Bildern, die als Link dienen, beschreibt der Alternativtext das Ziel, nicht das Bild. Siehe WCAG-Grundlagen.
Arbeitsablauf, der sich bewährt hat
- Original in einem eigenen Ordner ablegen, unverändert
- Zuschnitt und Ausrichtung im Bildprogramm erledigen
- Auf die benötigte Breite verkleinern
- Als WebP mit Qualitätsstufe 80 speichern
- Dateigröße prüfen, Ziel unter 200 Kilobyte
- Hochladen, Alternativtext setzen
- Nach dem Einbau eine Ladezeitmessung, mobil
Schritt 1 wird oft übersprungen und später bereut: Sobald ein anderes Layout andere Zuschnitte braucht, ist das Original die einzige Grundlage. Werkzeuge dafür in Bildbearbeitung.