Websites & SEO

Bildoptimierung

Overview

Bilder machen bei vielen Websites den größten Teil der übertragenen Datenmenge aus und sind häufig das größte sichtbare Element einer Seite, also das LCP-Element der Core Web Vitals. Bildoptimierung verkleinert Dateien ohne sichtbaren Qualitätsverlust, liefert passende Größen für jedes Gerät aus und steuert, wann Bilder geladen werden.

Moderne Formate wie WebP und AVIF erreichen bei gleicher Qualität deutlich kleinere Dateien als JPEG oder PNG; Google Search unterstützt BMP, GIF, JPEG, PNG, WebP, SVG und AVIF. Vektorgrafiken (SVG) eignen sich für Logos und Icons, Fotos gehören in ein komprimiertes Rasterformat.

Zur Bildoptimierung gehört auch die Auffindbarkeit: Google nutzt Alt-Text, Dateiname, umgebenden Text und Seitentitel, um den Bildinhalt zu verstehen. Der Alt-Text ist zugleich eine Barrierefreiheitsanforderung, weil Screenreader ihn vorlesen.

How it works

Bildoptimierung in fünf Schritten:

  1. Format wählen: AVIF oder WebP für Fotos, SVG für Logos und Icons, PNG nur bei Bedarf an verlustfreier Darstellung.
  2. Größe anpassen: Bilder nicht größer ausliefern als dargestellt; mit srcset und sizes oder dem <picture>-Element mehrere Auflösungen anbieten, immer mit src als Rückfall.
  3. Komprimieren: Qualität so weit reduzieren, bis Unterschiede sichtbar werden, automatisiert per CMS-Plugin, Build-Prozess oder Bild-CDN.
  4. Ladeverhalten steuern: Bilder unterhalb des sichtbaren Bereichs mit loading="lazy" nachladen, das LCP-Bild dagegen nie lazy laden und mit fetchpriority="high" priorisieren.
  5. Platz reservieren und beschreiben: width und height angeben, damit kein Layout-Shift entsteht, beschreibende Dateinamen und Alt-Texte vergeben, wichtige Bilder optional in eine Bild-Sitemap aufnehmen.

Benefits

  • Kürzere Ladezeiten und bessere LCP-Werte, besonders auf Smartphones.
  • Weniger Datenvolumen für Besucher und weniger Last für Server und CDN.
  • Stabiles Layout ohne springende Inhalte, was CLS verbessert.
  • Sichtbarkeit in der Google-Bildersuche und barrierefreie Beschreibung für Screenreader.

Practical example

Ein Fertighaushersteller mit 220 Beschäftigten präsentiert Referenzhäuser mit Fotos in Druckqualität von mehreren Megabyte pro Bild. Die Agentur aktiviert im CMS die automatische Umwandlung in AVIF und WebP mit mehreren Größen, setzt Lazy Loading für Galeriebilder und priorisiert das Titelbild. Die Redaktion vergibt Dateinamen und Alt-Texte, die Haustyp und Ort beschreiben. Die Referenzseiten laden mobil deutlich schneller, und die Bilder erscheinen häufiger in der Bildersuche.

Things to keep in mind

  • Das LCP-Bild nie per Lazy Loading laden; viele Themes setzen loading="lazy" pauschal auf alle Bilder.
  • Dekorative Bilder erhalten ein leeres alt-Attribut, damit Screenreader sie überspringen; informative Bilder eine knappe Beschreibung.
  • Bild-CDNs und Konvertierungsdienste verarbeiten Bilder extern; prüfe Datenschutz und Auftragsverarbeitung.
  • Dateiendung und tatsächliches Format müssen übereinstimmen, sonst kann die Verarbeitung fehlschlagen.

Conclusion

Bildoptimierung ist meist der schnellste Hebel für bessere Ladezeiten. Automatisiere Formatumwandlung und Größen im CMS oder Build-Prozess und pflege Alt-Texte als redaktionelle Aufgabe.

Further reading

Related articles