Bildoptimierung für das Web

Bilder sind auf einer Webseite fast immer die umfangreichsten Ressourcen. Eine gute Bildoptimierung ist eine jener seltenen Verbesserungen, die gleichzeitig Ladezeiten, Nutzererlebnis, SEO-Rankings und Bandbreitenkosten verbessern – oft ohne unverhältnismäßig großen Aufwand.

Was ist bildoptimierung?

Bildoptimierung bedeutet, Bilder in der kleinstmöglichen Dateigröße bereitzustellen, ohne das visuelle Erlebnis spürbar zu beeinträchtigen, und zwar auf eine Weise, die zum jeweiligen Kontext passt. Das bedeutet: das richtige Format, die richtigen Abmessungen und das Laden zum richtigen Zeitpunkt.

Dieser letzte Teil ist wichtiger, als viele erwarten. Optimierung ist nicht nur Komprimierung. Sie ist eine Kombination aus der Wahl des Formats, der richtigen Größe, der Bereitstellungsstrategie und dem Ladeverhalten – alles wirkt zusammen.

Warum es wichtig ist

Bilder machen typischerweise 40–60 % der gesamten Übertragungsgröße einer Seite aus. Das hat direkte Auswirkungen auf mehrere Faktoren, die echte Nutzer und messbare Ergebnisse betreffen.

Core Web Vitals. Googles Kennzahl „Largest Contentful Paint“ (LCP) steht in direktem Zusammenhang damit, wie schnell Ihre sichtbar größten Inhalte geladen werden. Das LCP-Element ist sehr häufig ein Bild: ein Hero-Bild, ein Produktfoto oder ein Banner. Ein langsamer LCP wirkt sich negativ auf Ihr Suchranking aus, und optimierte Bilder gehören zu den zuverlässigsten Möglichkeiten, ihn zu verbessern.

Mobile Nutzer und langsame Verbindungen. Ein erheblicher Teil des Web-Traffics stammt von Nutzern im Mobilfunknetz, bei schlechter Netzabdeckung oder gedrosselten Verbindungen. Jemandem in einer solchen Situation ein unoptimiertes 2-MB-Bild zu senden, bedeutet, dass er mehrere unnötige Sekunden wartet oder die Seite ganz verlässt. Die Kosten einer schlechten Nutzererfahrung sind auf Mobilgeräten deutlich höher als auf dem Desktop.

Bandbreiten- und Hostingkosten. In größerem Maßstab summiert sich der kumulative Unterschied zwischen optimierten und unoptimierten Bildern schnell, nicht nur für die Nutzer, sondern auch auf Ihrer CDN- und Datenausgangsrechnung.

Gängige Optimierungstechniken

Komprimierung

Komprimierung reduziert die Datenmenge, die zum Speichern oder Übertragen eines Bildes benötigt wird. Es gibt zwei Ansätze, die man verstehen sollte, denn die richtige Wahl hängt davon ab, was komprimiert wird.

Verlustbehaftete Komprimierung verwirft dauerhaft einen Teil der Bilddaten, um deutlich kleinere Dateigrößen zu erreichen. Das menschliche visuelle System reagiert auf manche Details empfindlicher als auf andere, und verlustbehaftete Algorithmen nutzen das aus, um die Dateigröße auf eine Weise zu reduzieren, die oft nicht wahrnehmbar ist. JPEG ist das häufigste Beispiel. Es eignet sich gut für Fotografien, bei denen die Komplexität des Bildes den Qualitätsverlust kaschiert.

Verlustfreie Komprimierung reduziert die Dateigröße, ohne Daten zu verwerfen. Die ursprünglichen Pixelwerte bleiben beim Dekodieren der Datei vollständig erhalten. PNG verwendet verlustfreie Komprimierung. Es ist die richtige Wahl für UI-Screenshots, Symbole und alles mit einfarbigen Flächen, scharfen Kanten oder Textüberlagerungen, bei denen verlustbehaftete Artefakte deutlich sichtbar wären.

Die richtigen Bildabmessungen verwenden

Eines der häufigsten und leicht zu übersehenden Probleme ist, ein Bild mit 3000×2000 px für einen Container mit 400 px Breite auszuliefern. Der Browser lädt die gesamte Datei herunter und skaliert sie dann beim Rendern herunter. Dadurch übertragen Sie 5- bis 10-mal mehr Daten als nötig.

Die Lösung ist einfach: Ändern Sie die Größe von Bildern vor der Auslieferung auf die Abmessungen, in denen sie tatsächlich angezeigt werden. Auf dynamischen Websites bedeutet das in der Regel, mehrere Varianten (Miniaturansicht, mittelgroß, volle Größe) zur Build-Zeit oder über einen Bildverarbeitungsdienst zu erzeugen, anstatt sich darauf zu verlassen, dass CSS die Skalierung übernimmt.

Das richtige Format wählen

Die Wahl des Formats hat spürbare Auswirkungen sowohl auf die Dateigröße als auch auf die visuelle Qualität. Verschiedene Formate verwenden unterschiedliche Komprimierungsstrategien, jeweils mit eigenen Kompromissen. Eine ausführliche Übersicht der einzelnen Formate finden Sie in unserem Leitfaden zu Bilddateiformaten.

In der Praxis ist WebP heute für die meisten Rasterbilder eine solide Standardwahl, da es bei vergleichbarer Qualität eine bessere Komprimierung als JPEG und PNG bietet und zugleich breit von Browsern unterstützt wird. AVIF geht bei der Komprimierung noch weiter und wird inzwischen von allen großen Browsern unterstützt, ist allerdings langsamer beim Kodieren. Für Symbole und einfache Grafiken ist SVG fast immer die richtige Antwort: Es skaliert bei jeder Auflösung perfekt und die Dateigrößen sind winzig.

Lazy Loading

Standardmäßig beginnen Browser damit, Bilder zu laden, sobald sie ihnen im HTML begegnen, auch Bilder, die sich weit unterhalb des sichtbaren Viewports befinden. Lazy Loading verschiebt das Laden von Bildern außerhalb des sichtbaren Bereichs, bis der Nutzer in ihre Nähe scrollt.

Der praktische Nutzen ist auf bildlastigen Seiten erheblich: Sie vermeiden die Kosten für das Laden von Inhalten, die der Nutzer möglicherweise nie sieht, die anfängliche Seitenladezeit wird verkürzt, und Bandbreite wird eingespart. Das native Lazy Loading in modernen Browsern erfordert nicht mehr als ein einziges Attribut:

Ein wichtiger Hinweis: Bilder, die sich wahrscheinlich im anfänglichen Viewport befinden, wie das Hero-Bild, das Logo oder andere Inhalte im sofort sichtbaren Bereich, sollten niemals per Lazy Loading geladen werden. Deren verzögertes Laden verschlechtert den LCP, anstatt ihn zu verbessern.

Abschließende Gedanken

Bildoptimierung ist eine der wirkungsvollsten Maßnahmen, die Sie für die Web-Performance ergreifen können. Bei den meisten Websites gibt es offensichtliches Verbesserungspotenzial: übergroße Bilder, falsche Formate, kein Lazy Loading. Die Werkzeuge, um all das zu beheben, sind heute ausgereift und gut unterstützt.