Bilder fürs Web optimieren: Ladezeit und Core Web Vitals

Eine Seite, die drei Sekunden zum Laden braucht, verliert messbar Besucher. Der häufigste Grund sind nicht aufgeblähte Skripte, sondern Bilder, die zwei- bis fünfmal größer ausgeliefert werden als nötig. Wer ein 4 MB schweres Foto-PNG direkt in eine Galerie kippt, zwingt jeden Smartphone-Nutzer, megabyteweise Daten über das Mobilfunknetz zu ziehen. Genau hier setzt Bildoptimierung an: gleiche optische Qualität, ein Bruchteil der Bytes.

Warum Bilder die Ladezeit dominieren

Auf der durchschnittlichen Website entfällt der größte Anteil des übertragenen Datenvolumens auf Bilder, nicht auf HTML, CSS oder JavaScript. Das liegt in der Natur der Sache: Ein einzelnes Foto in voller Auflösung wiegt schnell mehr als der gesamte restliche Seitencode zusammen. Reduzierst du die Bildlast, sinkt die gesamte Übertragungszeit fast linear mit.

Das Problem ist nicht die Anzahl der Bilder, sondern ihr Format und ihre Kompression. Ein Foto als PNG zu speichern ist technisch erlaubt, aber verschwenderisch. PNG arbeitet verlustfrei und speichert jedes Pixel exakt, was bei Fotos mit Millionen leicht verschiedener Farbtöne zu riesigen Dateien führt. JPG fasst optisch ähnliche Bereiche zusammen und erreicht bei Fotos eine drastisch kleinere Größe, ohne dass das Auge den Unterschied bemerkt.

Das richtige Format wählen

Die Formatwahl ist die erste und folgenreichste Entscheidung. Eine einfache Faustregel: Hat das Bild fließende Farbverläufe und natürliche Texturen, nimm JPG. Hat es scharfe Kanten, Text, wenige Farben oder Transparenz, nimm PNG.

Bildtyp	Empfohlenes Format	Grund
Foto, Produktbild	JPG (oder WebP/AVIF)	Verlustbehaftete Kompression spart 80 bis 90 Prozent
Logo, Icon	PNG oder SVG	Scharfe Kanten, oft Transparenz
Screenshot mit Text	PNG	Klare Linien bleiben artefaktfrei
Grafik mit Verläufen	WebP oder JPG	Farbreich, kein harter Kantenbedarf
Illustration flach	SVG oder PNG	Skaliert verlustfrei

Die richtige JPG-Qualität finden

JPG speichert mit einem einstellbaren Qualitätsfaktor zwischen 1 und 100. Dieser Wert ist kein Prozentsatz der Bildtreue, sondern ein Steuerungsparameter für die Stärke der Kompression. Der entscheidende Bereich liegt zwischen 75 und 90.

Unterhalb von 70 werden in glatten Flächen wie Himmel oder Haut typische Blockartefakte sichtbar, kleine 8x8-Pixel-Kacheln mit sichtbaren Kanten. Oberhalb von 90 wächst die Dateigröße steil an, während das menschliche Auge praktisch keinen Gewinn mehr wahrnimmt. Der Sweet Spot für Web-Fotos liegt bei 80 bis 85 Prozent.

Die Grafik zeigt das Kernprinzip: Der Sprung von Qualität 95 auf 85 mehr als halbiert die Datei, ist aber im direkten Bildvergleich kaum erkennbar. Der weitere Schritt auf 70 bringt nur noch wenig Ersparnis, beginnt aber Artefakte zu zeigen. Genau deshalb ist 80 bis 85 der vernünftige Standard.

Sites should strive to have LCP occur within the first 2,5 seconds of the page starting to load.

Core Web Vitals und der LCP-Hebel

Google bewertet die Nutzererfahrung über die Core Web Vitals. Die für Bilder relevanteste Metrik ist Largest Contentful Paint (LCP). Sie misst, wann das größte sichtbare Element fertig geladen ist. Auf den meisten Seiten ist das genau das große Bild oben im Sichtbereich, das Hero-Bild.

Ist dieses Bild 3 MB groß, dauert sein Download auf einer durchschnittlichen Mobilverbindung leicht mehrere Sekunden, und der LCP-Wert rutscht in den roten Bereich über 4 Sekunden. Reduzierst du das Bild auf 300 KB, lädt es in einem Bruchteil der Zeit. Die folgende Tabelle macht den Zusammenhang zwischen Dateigröße und reiner Übertragungszeit greifbar.

Dateigröße	4G mobil (~10 Mbit/s)	DSL (~50 Mbit/s)	Glasfaser (~250 Mbit/s)
3 MB	~2,4 s	~0,48 s	~0,10 s
1 MB	~0,8 s	~0,16 s	~0,03 s
300 KB	~0,24 s	~0,05 s	~0,01 s
80 KB	~0,06 s	~0,01 s	unter 0,01 s

Die Werte sind reine Transferzeiten ohne Latenz und Render-Aufwand, zeigen aber das Verhältnis klar: Auf mobilen Verbindungen ist die Dateigröße der dominierende Faktor. Ein schlankes Hero-Bild ist der billigste Weg zu einem guten LCP-Wert.

Responsive Bilder ausliefern

Ein 4000 Pixel breites Foto auf einem 375 Pixel breiten Smartphone-Display ist Verschwendung: Der Browser lädt zehnmal mehr Pixel als er zeigen kann. Responsive Bilder lösen das, indem du mehrere Größen bereitstellst und der Browser die passende wählt.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w,
          foto-800.jpg 800w,
          foto-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Sonnenuntergang über der Ostsee"
  width="800" height="533"
  loading="lazy"
/>

Über srcset meldest du dem Browser die verfügbaren Auflösungen, über sizes die angezeigte Breite. Der Browser rechnet die Pixeldichte des Geräts ein und lädt genau die kleinste ausreichende Datei. Die Angabe von width und height reserviert zusätzlich den Platz und verhindert Layout-Sprünge, was den CLS-Wert der Core Web Vitals schützt.

WebP, AVIF und das picture-Element

JPG ist ein Format von 1992 und immer noch solide, aber neuere Formate komprimieren effizienter. WebP spart bei gleicher Qualität rund 25 bis 35 Prozent, AVIF bei guten Bildern oft mehr als die Hälfte. Beide werden von allen aktuellen Browsern unterstützt.

Damit auch sehr alte Clients ein Bild bekommen, bietest du moderne Formate mit Fallback an:

<picture>
  <source srcset="foto.avif" type="image/avif" />
  <source srcset="foto.webp" type="image/webp" />
  <img src="foto.jpg" alt="Sonnenuntergang über der Ostsee" width="800" height="533" />
</picture>

Der Browser nimmt das erste Format, das er versteht, und fällt sonst auf JPG zurück. So profitierst du von moderner Kompression, ohne irgendeinen Besucher mit einem kaputten Bild zurückzulassen.

Der SEO-Effekt schneller Seiten

Schnelle Seiten ranken nicht automatisch auf Platz eins, aber Geschwindigkeit ist ein bestätigtes Ranking-Signal und wirkt zusätzlich indirekt. Eine schnelle Seite hält Besucher, senkt die Absprungrate und erhöht die Wahrscheinlichkeit, dass jemand mehrere Unterseiten ansieht. All das sind Verhaltenssignale, die Suchmaschinen positiv werten.

Hinzu kommt das Crawl-Budget: Lädt jede Seite schneller, kann der Googlebot in derselben Zeit mehr Seiten erfassen. Für große Sites mit tausenden URLs ist das ein realer Faktor. Bildoptimierung wirkt damit auf drei Ebenen gleichzeitig, technischer Performance-Score, Nutzerzufriedenheit und Crawl-Effizienz.

Dein Optimierungs-Workflow für jedes Bild

Bevor ein Bild online geht, lohnt eine kurze, immer gleiche Routine. Erstens das Format prüfen: Foto wird JPG oder WebP, Grafik mit Transparenz bleibt PNG. Zweitens die Auflösung an die maximale Anzeigegröße anpassen, ein Bild, das nie breiter als 800 Pixel dargestellt wird, braucht keine 4000 Pixel. Drittens die JPG-Qualität auf 80 bis 85 setzen und im direkten Vergleich gegenprüfen. Viertens responsive Varianten und ein modernes Fallback-Format bereitstellen. Fünftens width, height und ein sinnvolles alt-Attribut setzen.

Diese fünf Schritte kosten pro Bild weniger als eine Minute und sind der Unterschied zwischen einer trägen und einer schnellen Seite. Der erste Schritt, das Umwandeln von Foto-PNGs in JPG, lässt sich für ganze Bildstapel auf einmal erledigen, direkt im Browser und ohne dass eine Datei deinen Rechner verlässt.