Bilder für die Website optimieren: schneller laden

Wer die Ladezeit einer Website verbessern will, fängt am besten bei den Bildern an. Auf vielen Seiten verursachen sie mehr übertragene Daten als HTML, CSS und JavaScript zusammen. Dieser Beitrag zeigt, welche vier Stellschrauben zählen und wie Sie sie systematisch angehen.

Warum Bilder über die Geschwindigkeit entscheiden

Eine durchschnittliche Webseite überträgt mehrere Megabyte an Daten, und ein großer Teil entfällt auf Bilder. Während Code meist im Kilobyte-Bereich liegt, schlägt ein einziges unoptimiertes Hero-Foto schnell mit ein bis zwei Megabyte zu Buche. Wer an der Performance schraubt, ohne die Bilder anzufassen, optimiert am falschen Ende.

Hinzu kommt das mobile Internet. Ein Großteil der Besucher kommt über das Smartphone, häufig über eine schwankende Mobilfunkverbindung. Schwere Bilder treffen diese Nutzer am härtesten.

Die vier Stellschrauben der Bildoptimierung

Die folgende Tabelle ordnet die Hebel nach Wirkung und Aufwand.

Der einfachste Schritt ist das Format. Schon das Umwandeln nach WebP verkleinert die meisten Bilder. Danach lohnt es sich, an Anzeigegröße und Qualität zu feilen. Das Ladeverhalten ist die Feinabstimmung, die den ersten Eindruck der Seite zusätzlich beschleunigt.

Das richtige Format: WebP statt JPG und PNG

WebP wird von allen aktuellen Browsern unterstützt und vereint die Stärken der älteren Formate. Es komprimiert Fotos kleiner als JPG und beherrscht gleichzeitig Transparenz wie PNG. Für Webseiten ist es damit meist die erste Wahl. Den Vergleich der Formate im Detail behandelt der Ratgeber WebP gegen PNG und JPG.

Die richtige Anzeigegröße

Ein häufiger Fehler ist, ein riesiges Bild direkt aus der Kamera in einen kleinen Platz zu setzen. Ein 4000 Pixel breites Foto in einem Bereich von 800 Pixeln Breite verschwendet Bandbreite, denn der Browser muss die volle Datei laden und dann herunterrechnen. Skalieren Sie das Bild vorher auf die tatsächliche Anzeigegröße. Für hochauflösende Displays dürfen Sie etwa das Doppelte der CSS-Breite ansetzen, also rund 1600 Pixel für einen 800-Pixel-Platz.

Der Konverter erledigt beides in einem Schritt: Mit der Option „Maximale Breite“ verkleinern Sie das Bild und wandeln es zugleich in WebP um. Das Seitenverhältnis bleibt erhalten, kleinere Bilder werden nicht vergrößert.

Qualität und Ladeverhalten

Die Qualität steuert den Kompromiss zwischen Größe und Optik. Für Webfotos ist der Bereich 75 bis 85 ein bewährter Startpunkt, mehr dazu im Ratgeber WebP-Qualität und Kompression. Beim Ladeverhalten helfen zwei Kniffe: Lazy Loading lädt Bilder erst beim Heranscrollen, und feste width- und height-Angaben reservieren den Platz, sodass das Layout beim Nachladen nicht springt. Eine schrittweise Anleitung finden Sie unter Ladezeit verbessern.

Core Web Vitals: warum Google die Ladezeit misst

Google bewertet Webseiten nicht nur nach Inhalt, sondern auch nach Nutzererlebnis. Dafür gibt es die Core Web Vitals, eine Reihe messbarer Werte. Der wichtigste für Bilder ist der LCP, der Largest Contentful Paint. Er misst, wann das größte sichtbare Element fertig geladen ist, und das ist auf vielen Seiten ein großes Bild.

Als guter LCP-Wert gilt laut web.dev eine Zeit von höchstens 2,5 Sekunden. Ein überdimensioniertes Hero-Bild kann diesen Wert leicht reißen. Die Core Web Vitals sind ein Rankingsignal unter vielen und kein Ersatz für guten Inhalt, aber langsame Seiten verlieren auch unabhängig vom Ranking Besucher.

Neben dem LCP zählt ein zweiter Wert zur Bildoptimierung: die Layout-Stabilität, im Fachjargon Cumulative Layout Shift. Sie misst, wie stark Inhalte beim Laden noch herumspringen. Das passiert, wenn ein Bild ohne reservierten Platz nachgeladen wird und den darunterliegenden Text nach unten schiebt. Wer für jedes Bild width und height im Markup angibt, reserviert den Platz von Anfang an, und nichts verrutscht.

Schritt für Schritt: so optimieren Sie eine bestehende Seite

1. Größte Bilder finden. Öffnen Sie die Entwicklertools Ihres Browsers, gehen Sie auf den Netzwerk-Tab und sortieren Sie die geladenen Dateien nach Größe. Die größten Bilder sind Ihre ersten Kandidaten.
2. Umwandeln nach WebP. Wählen Sie die schwersten Bilder im WebP-Konverter aus und stellen Sie die Qualität auf etwa 80. Der Stapel nimmt bis zu 50 Bilder auf, ohne Upload, weil alles lokal im Browser läuft.
3. Auf Anzeigegröße bringen. Begrenzen Sie dabei die maximale Breite auf die passende Größe.
4. Im Code ersetzen. Tauschen Sie die alten Dateien gegen die WebP-Versionen, setzen Sie width und height und aktivieren Sie Lazy Loading für Bilder unterhalb des ersten Sichtbereichs.
5. Messen und gegenprüfen. Lassen Sie die Seite anschließend durch ein Mess-Tool wie PageSpeed Insights laufen und vergleichen Sie die Core-Web-Vitals-Werte mit dem Ausgangszustand.

Messen ist Pflicht, nicht Kür

Optimierung ohne Messung ist Raten. Google PageSpeed Insights ist kostenlos, analysiert Ihre Seite und zeigt die Core Web Vitals samt Verbesserungsvorschlägen. Oft taucht dort der Hinweis auf, Bilder in modernen Formaten auszuliefern oder korrekt zu dimensionieren, genau die Punkte dieses Beitrags. Weiterführende Hinweise finden Sie unter SEO-Bilder und für die Website.

PageSpeed Insights zeigt zwei Arten von Daten. Die Labordaten entstehen bei einem frischen Testlauf unter standardisierten Bedingungen und reagieren sofort auf Ihre Änderungen. Die Felddaten stammen von echten Besuchern und brauchen einige Zeit, bis sich eine Verbesserung dort niederschlägt. Für die Bewertung Ihrer Bildoptimierung sind zunächst die Labordaten der schnellere Gradmesser.

Was nach den Bildern noch hilft

Bilder sind ein großer Hebel, aber nicht der einzige. Schriftarten sind ein häufiger Bremsklotz: Werden mehrere Schriftschnitte von einem fremden Server geladen, verzögert das den Textaufbau. Selbst gehostete Schriften und der Verzicht auf überflüssige Schnitte schaffen Abhilfe. Auch JavaScript und CSS wollen schlank gehalten werden, und ein schneller Server mit sinnvollem Caching rundet das Bild ab.

Der Reihenfolge nach gilt aber: erst die Bilder, dann der Rest.

Der schnellste Weg zu einer schnelleren Seite

Bilder sind oft der größte Datenposten, also liegt hier ein großer Hebel. Wandeln Sie Ihre schwersten Bilder nach WebP um, liefern Sie sie nur so groß aus wie nötig, wählen Sie eine vernünftige Qualität und laden Sie nachrangige Bilder verzögert. Messen Sie vorher und nachher mit PageSpeed Insights, dann sehen Sie den Erfolg am LCP. Der erste Schritt ist nur einen Klick entfernt im Konverter.