Bilder fürs Web optimieren: Schritt-für-Schritt für bessere Core Web Vitals

Bilder sind auf den meisten Webseiten der größte Performance-Brocken. Wer sie clever optimiert, halbiert die Ladezeit, verbessert die Core Web Vitals und steigt im Google-Ranking. Hier eine kompakte, machbare Anleitung – ohne Server-Tooling oder CDN-Abo.

Warum Bild-Optimierung sich lohnt

Google misst seit 2021 die Core Web Vitals – drei Performance-Metriken, die direkt ins Ranking einfließen:

• LCP (Largest Contentful Paint): wie lange das größte sichtbare Element zum Laden braucht. Das ist meistens ein Bild.
• CLS (Cumulative Layout Shift): wie sehr Inhalte beim Laden hin- und herspringen. Bilder ohne fixe Maße sind Hauptursache.
• INP (Interaction to Next Paint): wie schnell die Seite auf Eingaben reagiert. Riesige Bilder blockieren auch das.

Drei Stellschrauben verändern alle drei Werte: Format, Komprimierung, Pixel-Maße. Genau in dieser Reihenfolge gehen wir's durch.

1. Format wechseln: zu WebP

WebP ist das neue Standardformat fürs Web. Es ist 25–50 % kleiner als JPG bei gleicher Qualität und unterstützt Transparenz wie PNG. Alle aktuellen Browser können es.

Praktisch heißt das: Konvertiere alle Web-Bilder einmal nach WebP – mit unserem WebP Konverter oder gezielt mit JPG zu WebP bzw. PNG zu WebP. Die alten JPGs/PNGs kannst du als Fallback behalten oder einfach ersetzen.

HTML mit Fallback

Wenn du absolut sicher gehen willst, dass auch sehr alte Browser funktionieren:

<picture>
  <source srcset="/img/foo.webp" type="image/webp">
  <img src="/img/foo.jpg" alt="…" loading="lazy">
</picture>

In der Praxis reicht meist ein direktes <img src="foo.webp">, weil 95 %+ der Besucher WebP unterstützen.

2. Qualität reduzieren: 80 % ist der Sweet Spot

Niemand braucht 100 % Qualität. Bei 80 % siehst du visuell keinen Unterschied, sparst aber 30–50 % Dateigröße. Bei 70 % wird's für genaue Augen leicht weicher, aber für Standard-Webseiten meist akzeptabel.

Probier den Effekt direkt aus mit Bild komprimieren: Gleiches Bild zweimal hochladen, einmal mit 90 %, einmal mit 70 %. Die Größenunterschiede überraschen oft mehr als die optischen.

3. Pixel-Maße anpassen: nicht größer als nötig

Der häufigste Anfängerfehler: Bilder werden in 4000×3000 Pixel hochgeladen, dann per CSS auf 800×600 gesetzt. Der Browser lädt trotzdem die volle Datei – verschwendete Bandbreite.

Faustregeln für die maximale Bildbreite:

• Hero-Bild über volle Breite: 1920 px reichen. Mehr brauchen nur 4K-Monitore – und für die kannst du per srcset eine zusätzliche Variante anbieten.
• Content-Bild in einem Artikel: 1200 px maximal.
• Thumbnail in einer Liste: 400 px reichen.
• Avatar/Icon: 200 px reichen.

Mit Bild verkleinern bringst du eine ganze Foto-Galerie schnell auf einheitliche Maße.

4. Lazy Loading aktivieren

Bilder, die der Nutzer nicht sieht, müssen nicht sofort geladen werden. Ein einziges Attribut reicht:

<img src="…" loading="lazy" alt="…">

Das verbessert vor allem den ersten Pageload (LCP), weil Bilder weiter unten warten, bis du in ihre Nähe scrollst. Für das Hero-Bild oben nicht verwenden – das soll sofort laden.

5. Bildmaße immer angeben (gegen CLS)

Wenn der Browser nicht weiß, wie groß ein Bild wird, „springt" das Layout beim Nachladen. Schreibe also immer:

<img src="…" width="1200" height="800" alt="…">

Mit CSS kannst du die Maße trotzdem responsive machen (img { max-width: 100%; height: auto; }). Das Verhältnis bleibt erhalten.

Bonus: ein Bild – ein Workflow

Nimm ein typisches Foto direkt aus der Kamera (z. B. 4032×3024, 4 MB JPG). Mein Standard-Workflow:

1. Auf 1920 px Breite verkleinern → ~1.2 MB.
2. Als WebP bei 80 % speichern → ~250 KB.
3. Im HTML mit loading="lazy" und Maß-Angaben einbinden.

Das war's. Aus 4 MB werden 250 KB – 94 % weniger Daten, kein sichtbarer Qualitätsverlust. Multipliziere das mit allen Bildern auf einer Seite, und du verstehst, warum LCP-Werte plötzlich grün werden.