Bildoptimierung
Bildoptimierung umfasst die Auswahl moderner Bild-Formate (WebP, AVIF), die Ausspielung in passenden Größenstufen und eine sinnvolle Komprimierung, damit Bilder schnell laden, ohne sichtbar an Qualität zu verlieren.
Bildoptimierung ist einer der wirksamsten Performance-Hebel auf bildlastigen Websites. Sie wirkt unmittelbar auf die Core Web Vitals (insbesondere LCP), auf das übertragene Daten-Volumen und auf die Anfangs-Wahrnehmung der Seite.
In einfachen Worten
Ein Foto direkt aus einer hochwertigen Kamera ist oft mehrere Megabyte groß. Im Web ist das deutlich zu viel: Eine Seite mit mehreren solcher Bilder wird zur mehrere Dutzend Megabyte schweren Strecke, die selbst auf mobilen Geräten Sekunden zum Aufbau braucht – die Besucher springen ab, bevor das Hauptbild fertig geladen ist. Bildoptimierung reduziert diese Daten-Menge in mehreren Schritten: Umstellung auf moderne Formate (AVIF und WebP), Ausspielung in mehreren Auflösungs-Stufen je nach Endgerät, sinnvolle Komprimierung und das Setzen von Höhen- und Breiten-Attributen, damit der Browser den Platz vorab kennt. Moderne Browser unterstützen die Format- und Größen-Wahl automatisch über das srcset-Attribut und das picture-Element.
Wozu brauche ich das?
Auf jeder bildlastigen Website unmittelbar wirksam: Galerien, Produktseiten, redaktionelle Inhalte mit eingebetteten Bildern, Hero-Bereiche. Besonders kritisch bei mobilen Besuchern mit eingeschränkter Verbindung, wo jedes zusätzliche Megabyte unmittelbar Ladezeit kostet. Bildoptimierung wirkt zusätzlich als direkter SEO-Hebel: Suchmaschinen werten die Ladezeit als Ranking-Signal über die Core Web Vitals, und ein optimiertes Hero-Bild verbessert den Largest Contentful Paint unmittelbar.
Beispiel aus der Praxis
Eine typische Ausgangslage auf bildlastigen Websites: Ein redaktioneller Reise-Blog mit mehreren Dutzend Bildern pro Artikel hat eine Initial-Seitengröße im Mehrere-Megabyte-Bereich und einen Largest Contentful Paint deutlich oberhalb des grünen Bereichs. Mit drei abgestimmten Maßnahmen verschiebt sich das Bild: Umstellung auf AVIF mit WebP als Fallback, Ausspielung mehrerer Auflösungs-Stufen über srcset, Aktivierung von Lazy Loading für alle Bilder unterhalb des sichtbaren Bereichs. Die initiale Seitengröße sinkt auf einen Bruchteil, der Largest Contentful Paint fällt in den grünen Bereich. Die Verweildauer pro Artikel zieht sichtbar an, die Hosting-Kosten für übertragenen Traffic sinken parallel.
Wirtschaftlicher Nutzen
Eine einmalig eingerichtete Bildoptimierungs-Strecke (über gängige Bildverarbeitungs-Bibliotheken oder die eingebauten Bild-Module moderner Web-Frameworks) wirkt auf mehreren Ebenen gleichzeitig: spürbar schnellere Ladezeiten, bessere Core Web Vitals und damit bessere Auffindbarkeit, geringere Hosting-Bandbreite bei traffic-abhängiger Abrechnung sowie höhere Konvertierung durch geringere Absprung-Rate. Für Online-Shops mit umfangreichem Bilder-Bestand ist die Bildoptimierung eine der wirkungsvollsten dauerhaften Investitionen überhaupt – der Effekt skaliert mit jedem ausgelieferten Bild und entsteht ohne wiederkehrende Kosten.
Typische Fehler
- Bilder direkt aus dem CMS in voller Originalgröße ausgeliefert – mehrere Megabyte pro einzelnem Bild, die Seite wird zur Daten-Strecke.
- Ausschließlich JPEG verwendet, ohne moderne Formate (WebP, AVIF) als zusätzliche Quelle anzubieten – ein erheblicher Spar-Effekt wird verschenkt.
- Nur eine einzige Auflösung für alle Endgeräte ausgespielt – das Smartphone lädt das Desktop-Bild in voller Größe.
- Höhen- und Breiten-Attribute weggelassen – das Layout springt beim Nachladen, der Cumulative Layout Shift wird schlechter.
- Komprimierung so aggressiv eingestellt, dass sichtbare Artefakte entstehen – die Marken-Wirkung leidet, der Spar-Effekt steht in keinem Verhältnis.
Worauf achten?
- Moderne Formate ausliefern: AVIF mit der besten Komprimierung, WebP mit der breitesten Browser-Unterstützung, JPEG als Fallback für ältere Konfigurationen.
- Pro Bild mehrere Auflösungs-Stufen über das srcset-Attribut bereitstellen – passend für Smartphone, Tablet und Desktop.
- Höhen- und Breiten-Attribute auf jedem Bild setzen – verhindert Layout-Sprünge beim Nachladen.
- Hero-Bilder mit fetchpriority="high" priorisieren, alle anderen Bilder mit loading="lazy" verzögert laden.
- Komprimierungs-Qualität in einem Bereich von etwa 75 bis 85 Prozent halten – darunter werden Artefakte sichtbar, darüber lohnt der zusätzliche Spar-Effekt nicht.
Häufig gestellte Fragen
Was ist Bildoptimierung?
Die Auswahl moderner Bild-Formate, die Ausspielung in passenden Größenstufen je Endgerät und eine sinnvolle Komprimierung – mit dem Ziel, Ladezeiten zu verkürzen, ohne sichtbare Qualitäts-Einbußen in Kauf zu nehmen.
Welche Formate sollten eingesetzt werden?
AVIF bietet die beste Komprimierung, WebP die breiteste Browser-Unterstützung. Eine produktive Konfiguration liefert AVIF an Browser aus, die es unterstützen, WebP an den Rest, und JPEG als Fallback für ältere Konfigurationen. Über das picture-Element lässt sich diese Wahl automatisch treffen.
Warum sind Höhen- und Breiten-Attribute wichtig?
Damit der Browser den Platzbedarf eines Bildes vor dem Laden kennt und entsprechend reserviert. Ohne diese Angaben springt das Layout beim Nachladen, der Cumulative Layout Shift verschlechtert sich – ein direktes negatives Ranking-Signal.
Wie viele Auflösungs-Stufen sind sinnvoll?
In der Regel drei bis vier Stufen pro Bild – passend für Smartphone, Tablet und Desktop, idealerweise mit einer zusätzlichen Stufe für besonders hoch aufgelöste Bildschirme. Über das srcset-Attribut wählt der Browser automatisch die passende Variante.
Welche Komprimierungs-Stufe ist optimal?
Für die meisten Bilder eine Qualitäts-Stufe im Bereich von 75 bis 85 Prozent. Darunter werden Komprimierungs-Artefakte sichtbar; darüber wächst die Dateigröße ohne sichtbaren Qualitäts-Gewinn. Eine systematische Sichtprüfung der Ergebnisse ist sinnvoll.