Wie Bilder schnell laden

So funktioniert es

Ein Foto direkt aus der Kamera oder dem Bildarchiv ist oft mehrere tausend Pixel breit, angezeigt wird es vielleicht mit 800. Der Browser lädt trotzdem die ganze Datei und rechnet sie dann klein. Jedes überflüssige Pixel kostet Ladezeit.

bytereport prüft Bilder aus drei Richtungen:

• Größe. Ein Bild über 200 KB ergibt eine Warnung, ist das größte über 1 MB, einen Fehler.
• Format. Kommen mindestens zwei größere Bilder (ab 30 KB) als JPEG, PNG oder GIF und machen sie mehr als die Hälfte der Bilddaten aus, gibt es einen Hinweis. WebP und AVIF sind bei gleicher Qualität deutlich kleiner und werden von allen aktuellen Browsern angezeigt.
• Verzögertes Laden. Mit loading="lazy" lädt der Browser ein Bild erst, wenn es in Sichtweite kommt. Hat eine Seite acht oder mehr Bilder und keines davon ist verzögert, gibt es einen Hinweis; ist schon das erste Bild verzögert, eine Warnung.

Worauf es ankommt

• Größe wie angezeigt. Mit srcset bietest du mehrere Größen an, und der Browser wählt die passende für den Bildschirm.
• WebP oder AVIF. Mit dem picture-Element bekommen Browser das moderne Format, alle anderen den Rückfall.
• Das erste große Bild nie verzögern. Es ist oft das größte Element im ersten Bildschirm und bestimmt den LCP. Gib ihm stattdessen fetchpriority="high".
• Breite und Höhe angeben. Sonst springt der Inhalt, sobald das Bild ankommt, siehe CLS.

<img src="foto-800.webp"
     srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     loading="lazy" width="800" height="600" alt="…">

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

So richtest du es ein

Viele CMS erzeugen beim Hochladen mehrere Größen und schreiben srcset und loading="lazy" selbst ins HTML. Die Umwandlung in WebP oder AVIF übernimmt ein Bild-Plugin oder ein CDN, das Bilder automatisch umrechnet. Wer Bilder hochlädt, sollte sie vorher auf eine sinnvolle Größe bringen. Ob das erste Bild verzögert lädt, legt meist das Theme fest; das ändert deine Agentur.