Bilder

Bilder sind fast immer der größte Posten im Ladegewicht – und damit der wirkungsvollste Hebel für LCP und für den Datenverbrauch auf Mobilgeräten.

Moderne Formate

AVIF und WebP sind bei gleicher Qualität deutlich kleiner als JPEG/PNG. Faustregel: AVIF zuerst, WebP als Fallback, klassisches Format als letzter Notnagel.

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

Nur so groß wie nötig

Ein 4000-px-Bild in einem 400-px-Slot ist reine Verschwendung. Mit srcset und sizes liefert der Browser die passende Auflösung je Viewport:

<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="…" width="800" height="533" />

Feste Maße gegen CLS

Immer width und height (oder aspect-ratio in CSS) setzen. Dann reserviert der Browser den Platz, bevor das Bild da ist – kein Springen, kein Layout-Shift.

Lazy Loading – aber nicht für das LCP-Bild

• Unterhalb des Sichtbereichs: loading="lazy" – wird erst geladen, wenn es in die Nähe des Viewports kommt.
• Das LCP-Bild (Hero, above the fold) NIEMALS lazy laden. Im Gegenteil: fetchpriority="high" und ggf. per <link rel="preload"> vorziehen, damit es früh startet.

Der bequeme Weg in Next.js

Die next/image-Komponente übernimmt Formatwahl, srcset, Lazy Loading und Maße automatisch. Wichtig: beim LCP-Bild priority setzen – das schaltet Lazy Loading ab und priorisiert den Ladevorgang.

Kurz: richtiges Format, richtige Größe, feste Maße, LCP-Bild bevorzugt laden. Damit ist der Löwenanteil vieler Performance-Probleme erledigt.