Bilder: die halbe Seitenlast in einem Sprint loswerden

Formate, Größen, Lazy Loading und Prioritäten. Eine praktische Reihenfolge, die das Seitengewicht ohne Qualitätsverlust halbiert.

Performance · Veröffentlicht: 27. Mai 2026 · 2 Min. Lesezeit · Анна Ковалёва

Auf einer typischen Website machen Bilder 50–70 % des Seitengewichts aus. Fast immer werden sie dabei in einer Auflösung geladen, die niemand sieht, in einem zehn Jahre alten Format und ohne angegebene Maße. Das ist die verlässlichste Beschleunigungsquelle.

Schritt 1: keine überflüssigen Pixel mehr ausliefern

Ein 2400 px breites Bild in einem 600 px breiten Container ist die sechzehnfache Datenmenge (die Fläche wächst quadratisch). Die Lösung ist srcset mit den echten Breakpoints des Layouts:

<img src="/img/hero-800.jpg" srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w" sizes="(max-width: 768px) 100vw, 800px" width="800" height="450" alt="…">

width und height sind Pflicht: Ohne sie kennt der Browser das Seitenverhältnis nicht und das Layout springt — ein direkter Beitrag zum CLS.

Schritt 2: das Format wechseln

AVIF ist bei gleicher Qualität im Schnitt 40–50 % leichter als JPEG, WebP 25–30 %. Beide unterstützen alle aktuellen Browser. Mit <picture> gibt es einen Fallback:

<picture> <source type="image/avif" srcset="/img/hero.avif"> <source type="image/webp" srcset="/img/hero.webp"> <img src="/img/hero.jpg" width="800" height="450" alt="…"> </picture>

Bei Interface-Screenshots und Diagrammen mit flächigen Farben ist PNG nicht selten leichter als AVIF — nachmessen statt der Regel blind folgen.

Schritt 3: Prioritäten setzen

Lazy Loading ist nicht kostenlos. loading="lazy" am Bild des ersten Bildschirms verlangsamt das LCP, weil es die wichtigste Anfrage nach hinten schiebt. Die Regel ist einfach:

• Bilder above the fold — fetchpriority="high", kein lazy;
• alles andere — loading="lazy" und decoding="async".

Schritt 4: weglassen, was niemand braucht

Die wirksamste Optimierung ist, nicht zu optimieren, sondern zu löschen. Der dekorative Hintergrund, den mobil niemand sieht; das Karussell aus acht Bannern, dessen drittes Bild 4 % der Nutzer erreichen; Icons als PNG, die SVG sein sollten.

Was zu messen ist

Schauen Sie nicht auf einen „Score", sondern auf zwei Zahlen: Bildgewicht pro Seite und Zeit bis LCP im Mobilfunknetz. Ist das Gewicht halbiert und das LCP unverändert, liegt der Engpass nicht bei den Bildern, sondern in der Request-Warteschlange oder der Serverantwort — weitere Bildoptimierung bringt dann nichts.

Setzen Sie ein Budget: etwa höchstens 400 KB Bilder pro Listenseite. Ein in der CI geprüftes Budget wirkt besser als jede Absprache.