Checkliste zur mobilen Bildoptimierung (2025)

Mobil dominiert jetzt die Impressionen; Bilddisziplin senkt direkt die Absprungrate und verbessert die Core Web Vitals.

Wichtige Metriken

• LCP ≤2,5s (größtes Hero-/Produktbild)
• CLS ~0 (Platz mit Breite/Höhe reservieren)
• INP <200ms (Spitzen bei der Dekodierung im Main-Thread vermeiden)

Checkliste

1. AVIF + WebP-Fallback für Hero-Bilder bereitstellen, wenn AVIF ≥8 % einspart.
2. Responsive Breiten (480, 768, 1024, 1440) mit an das Layout angepassten sizes bereitstellen.
3. DPR-Varianten auf 2x begrenzen; 3x vermeiden, es sei denn, es handelt sich um ikonografische Darstellungen.
4. fetchpriority="high" nur für das einzelne LCP-Bild über dem sichtbaren Bereich verwenden.
5. Nicht kritische Bilder per Lazy Loading laden (natives loading="lazy").
6. Nur kritisches Hero-Bild vorladen; keine Galerievarianten vorladen.
7. EXIF-Daten entfernen.
8. Sicherstellen, dass der Farbraum sRGB ist; Display P3-Fallback-Fehlanpassungen vermeiden.

Formatstrategie

• JPEG nur als Zwischenprodukt zur Build-Zeit.
• AVIF für fotografische Inhalte und Farbverläufe.
• WebP als breiter Fallback.
• PNG für Alpha-Transparenz / UI.
• SVG für Logos und flache Illustrationen.

Überwachung

Messen Sie den LCP und das Gewicht von echten Benutzern nach Route. Bild-CDNs können Regressionen verbergen – protokollieren Sie die Auswahlhäufigkeit des ausgegebenen srcset.

Fallstricke

• Übergroßes Hero-Bild (Auslieferung von 2000px an einen 360px-Viewport).
• Zu viele DPR-Varianten.
• Fehlende explizite Abmessungen, die zu Layout-Verschiebungen führen.
• Einbetten riesiger Daten-URIs.

Zusammenfassung

Eine eingeschränkte, auf Metriken basierende Pipeline zahlt sich aus: leichtere Bytes, schnellerer LCP, bessere Kundenbindung. Automatisieren Sie Überprüfungen nach Möglichkeit in der CI.