Warum Bilder deine Website ausbremsen

Öffne deine eigene Seite auf dem Handy, bei mittelmäßiger Verbindung, und zähle die Sekunden, bis das Hauptbild erscheint. Diese Zahl erleben deine Besucher — und es ist fast nie die Zahl, die du auf dem Laptop im Büro-WLAN siehst.

Ein einzelnes unoptimiertes Foto direkt aus der Handykamera ist typischerweise 4–6 MB groß. Bei 5 Mbit/s im Mobilfunk sind das rund acht Sekunden für ein Bild. Vier davon auf einer Seite und niemand wartet.

Dasselbe Foto, auf die tatsächlich dargestellte Breite verkleinert und vernünftig komprimiert, liegt bei 150–250 KB. Gleiches Bild, auf dem Bildschirm nicht unterscheidbar, etwa ein Zwanzigstel des Gewichts.

Largest Contentful Paint misst, wie lange es dauert, bis das größte sichtbare Element fertig gerendert ist. Auf den meisten Seiten ist dieses Element ein Bild — ein Hero, ein Produktfoto, ein Artikelkopf.

LCP gehört zu den Core Web Vitals, und die fließen ins Ranking ein. Entscheidend: Google misst an echten Besuchern über den Chrome User Experience Report, nicht im Labor. Dein schneller Laptop zählt nicht. Der Median aller tatsächlichen Besucher zählt.

Googles Schwelle für ein gutes LCP liegt bei 2,5 Sekunden. Ein 4-MB-Hero-Bild erreicht die auf dem Handy nicht, egal was du sonst tust.

1. Auf die dargestellte Größe verkleinern. Der größte Einzelgewinn und der am häufigsten übersprungene. Ist deine Inhaltsspalte 800 Pixel breit, werden bei einem 4000-Pixel-Bild 96 % der Daten nach dem Herunterladen verworfen. Die Pixelzahl skaliert mit der Fläche — halbe Breite bedeutet ein Viertel der Datei.

2. Ein modernes Format nutzen. WebP ist bei gleicher wahrgenommener Qualität 25–35 % kleiner als JPEG und wird von allen aktuellen Browsern unterstützt. Das ist praktisch geschenkt.

3. Vernünftig komprimieren. Qualität um 75 ist beim normalen Betrachten unsichtbar und deutlich leichter als die 95, auf die die meisten Export-Voreinstellungen setzen.

Alle drei zusammen machen aus 4 MB rund 120 KB. Nur die dritte macht daraus 1,5 MB — immer noch zu schwer.

• Das Hero-Bild lazy laden. loading="lazy" gehört auf alles unterhalb des sichtbaren Bereichs und keinesfalls an dein LCP-Element. Lazy Loading verschlechtert den Wert dort aktiv.
• Fehlende width- und height-Angaben. Ohne sie kann der Browser keinen Platz reservieren, und der Inhalt springt beim Nachladen. Das ist Cumulative Layout Shift, ebenfalls ein Ranking-Signal.
• Das CMS aus dem Original neu erzeugen lassen. Viele Systeme bauen ihre eigenen Ableitungen aus dem, was du hochlädst. Lade die optimierte Datei als Quelle hoch, nicht das Kamera-Original.
• Keine Cache-Header. Ein perfekt optimiertes Bild, das bei jedem Seitenaufruf neu geladen wird, bleibt verschwendete Bandbreite.