Auf den meisten Websites machen Bilder mehr als die Hälfte der Bytes aus. Sie sind zugleich das am wenigsten technische Problem: keine Codeänderung, und die Ersparnis wirkt sofort.

1. Liefern Sie die Größe aus, die die Seite verwendet

Ein 4000 px breites Foto, dargestellt in einer 600 px breiten Spalte, kostet den Besucher die vollen 4000 px. Das ist die größte Einzelersparnis und der häufigste Fehler.

<img src="photo-800.webp"
     srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
     sizes="(max-width: 900px) 100vw, 600px"
     width="800" height="450" alt="...">

sizes sagt dem Browser, wie breit das Bild SEIN wird, damit er vor dem Layout wählen kann. Ohne das nimmt er die volle Breite an und lädt die größte Variante.

2. WebP oder AVIF, nicht JPEG

cwebp -q 80 photo.jpg -o photo.webp

WebP ist bei gleicher Qualität typischerweise 25–35 % kleiner als JPEG und wird überall unterstützt, wo es darauf ankommt. AVIF ist noch kleiner und langsamer zu kodieren.

3. Laden Sie verzögert, was unterhalb des sichtbaren Bereichs liegt — und NICHT, was darüber liegt

<img src="..." loading="lazy" decoding="async">
Laden Sie das Hero-Bild niemals verzögert. Auf genau dieses wartet der Besucher, und es verzögert zu laden verzögert den größten Bildaufbau — die Zahl, die Google misst.

Geben Sie immer Breite und Höhe an

Ohne sie weiß der Browser nicht, wie viel Platz er freihalten soll, und alles darunter springt, sobald das Bild ankommt. Dieser Sprung ist ein Layoutversatz, und er wird gemessen.

Sehen Sie nach, was eine Seite wirklich herunterlädt: Netzwerk-Tab öffnen, auf Bilder filtern, nach Größe sortieren. Das größte ist meist eine Überraschung — und meist ein Foto, das niemand verkleinert hat.