Große Bilder
Übergroße Bilder bremsen die Ladezeit.
Das Thema dieser Seite: Große Bilder sind der häufigste Performance-Fehler beim Seitengewicht und LCP.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check erkennt Bilder über einer Zielgröße und bewertet deren Einfluss auf LCP und Gesamtgewicht.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| Keine großen Bilder | Payload stabil | OK |
| Einzelne große Bilder | Optimierung nötig | Warnung |
| Viele große Bilder | Payload explodiert | Kritisch |
Kontext & Problemraum
Besonders Hero-Bilder, Galerien und unkomprimierte Uploads treiben das Bildgewicht nach oben.
| Situation | Symptom | Risiko |
|---|---|---|
| Hero in Originalgröße | LCP steigt | Core Web Vitals sinken |
| Galerie ohne Optimierung | Seite schwer | Mobile Nutzer springen ab |
| CMS ohne Kompression | MB pro Bild | Gesamtgewicht hoch |
Entscheidungslogik
| Wenn | Dann | Empfehlung |
|---|---|---|
| Bild > Zielgröße | Payload zu hoch | Komprimieren/Resize |
| Hero sehr groß | LCP verzögert | Hero priorisieren |
| Bilder klein | Signal ok | Beibehalten |
Erklärende Details
Bilder sollten als moderne Formate ausgeliefert werden und per
srcset an das Gerät angepasst sein.
<img srcset="hero-800.webp 800w, hero-1200.webp 1200w" />| Detail | Warum relevant | Hinweis |
|---|---|---|
| WebP/AVIF | Kleinere Dateien | Standard nutzen |
| Responsive Größen | Passende Auflösung | srcset definieren |
| Lazy Loading | Initial schneller | Unterhalb der Falz |
Risiken, Grenzen & Einschränkungen
| Grenze | Woran erkennbar | Was tun |
|---|---|---|
| Zu starke Kompression | Qualität sinkt sichtbar | Visuell prüfen |
| SEO-Alttexte | Alttexte fehlen | Alttexte beibehalten |
| CDN-Transformation | Inkonstante Formate | CDN-Regeln definieren |
LCP Proxy
Große Bilder treiben LCP.
Gesamtseitengewicht
Bilder sind oft der größte Anteil.
Max. 1 großes Hero-Bild
Hero-Assets begrenzen.