Bilder richtig für Websites optimieren: Formate, Größen und Lazy Loading

Eine der häufigsten Ursachen für langsame Websites ist nicht der Server und nicht das Theme, sondern einfach: zu große Bilder. Ein einziges unkomprimiertes Foto mit 4 MB kann mehr Ladezeit kosten als alle anderen Optimierungsmaßnahmen zusammen gutmachen. Das Gute: Bildoptimierung ist einer der wirksamsten Hebel und lässt sich systematisch angehen.

Die richtigen Bildformate: JPEG, WebP und AVIF im Vergleich

Lange war JPEG der Standard für Fotos und PNG für Grafiken mit Transparenz. Das hat sich geändert:

• WebP: Googles Format ist 25-35% kleiner als JPEG bei gleicher Qualität. Browser-Support liegt heute bei über 95%. Für die meisten Websites ist WebP die beste Wahl.
• AVIF: Noch moderner, noch kleiner, 40-50% kompakter als JPEG. Allerdings ist die Kodierung langsamer und der Browser-Support (ca. 88%) noch nicht ganz so breit wie bei WebP. Gut für statische Bilder, bei denen die Konvertierungszeit egal ist.
• JPEG XL: Vielversprechend, aber noch zu wenig Browser-Support für den Produktiveinsatz.

Für WordPress-Nutzer: Plugins wie ShortPixel oder Imagify konvertieren alle vorhandenen und neuen Bilder automatisch ins WebP-Format, ohne dass du etwas manuell tun musst.

Bilder komprimieren: Vorher/Nachher

Ein typisches Beispiel aus unserer Praxis: Eine Unternehmenswebsite mit 12 Bildern auf der Startseite, alle als PNG hochgeladen, keine Komprimierung.

• Vorher: 8,4 MB Gesamtgröße aller Bilder, Ladezeit 6,2 Sekunden
• Nachher (WebP, optimale Komprimierung): 1,1 MB, Ladezeit 1,8 Sekunden

Empfehlenswerte Tools zur manuellen Komprimierung: Squoosh.app (kostenlos, im Browser), TinyPNG/TinyJPEG (kostenlos bis 20 Bilder/Monat), ImageOptim (Mac-App).

Korrekte Bildgrößen: srcset und sizes

Ein häufiger Fehler: Ein 2400px breites Bild wird auf einem Smartphone mit 390px Breite angezeigt. Der Browser lädt trotzdem das riesige Original. Die Lösung heißt srcset:

• Du stellst mehrere Bildgrößen bereit, z.B. 400px, 800px, 1200px und 1920px breit.
• Der Browser wählt automatisch die passende Größe abhängig von Bildschirmgröße und Pixeldichte.
• WordPress generiert diese Größen automatisch, wenn du die Bilder korrekt hochlädst und das Theme das srcset-Attribut korrekt ausgibt.

Tipp: Lade Bilder nie größer hoch als sie maximal dargestellt werden. Ein Vollbild-Hero braucht maximal 1920px Breite, ein Thumbnails-Bild im Blog maximal 800px.

Lazy Loading: Bilder erst laden wenn nötig

Lazy Loading bedeutet, dass Bilder außerhalb des sichtbaren Bereichs erst geladen werden, wenn der Nutzer dorthin scrollt. Das reduziert die initiale Ladezeit erheblich, besonders auf langen Seiten.

Die Umsetzung ist heute denkbar einfach: Das HTML-Attribut loading="lazy" genügt, alle modernen Browser unterstützen es nativ. WordPress fügt dieses Attribut seit Version 5.5 automatisch ein, außer für das erste Bild im sichtbaren Bereich (dort ist "eager" besser für den LCP).

• Das erste Hero-Bild oder LCP-Bild: loading="eager" und fetchpriority="high"
• Alle weiteren Bilder: loading="lazy"

Welche Bilder wirklich kosten: die häufigsten Fehler

• Profilfotos als PNG statt WebP
• Dekobilder ohne Komprimierung direkt aus der Kamera hochgeladen
• Animierte GIFs statt MP4-Video (GIFs sind meist 5-10x größer)
• Hintergrundbilder per CSS ohne responsive Varianten

Mehr zu den Auswirkungen auf deine Gesamtperformance findest du im Artikel Core Web Vitals einfach erklärt. Dort erfährst du auch, wie Bilder den LCP-Wert direkt beeinflussen.

Bei rocks.optimize kümmern wir uns um die vollständige Bildoptimierung deiner Website, inklusive Konvertierung vorhandener Bilder, Einrichtung automatischer Komprimierung und Konfiguration von Lazy Loading.