Nicht massiv oversized
Zu große Bildabmessungen kosten Ladezeit ohne Mehrwert.
Das Thema dieser Seite: Bilder werden oft größer geladen als angezeigt, was unnötige KB verursacht.
Inhalt
Inhaltsverzeichnis
Klicke auf einen Abschnitt, um direkt dorthin zu springen.
Check
Der Check vergleicht die ausgelieferte Bildgröße mit der gerenderten Größe im Browser. Eine große Differenz gilt als Oversize.
| Prüfpunkt | Bedeutung | Bewertung |
|---|---|---|
| Größe passt zum Rendering | Effiziente Auslieferung | OK |
| Leichte Überdimensionierung | Optimierbar | Warnung |
| Massiv oversized | Viel unnötiger Transfer | Kritisch |
Kontext & Problemraum
Oversized-Bilder entstehen oft, wenn ein einziges Master-Asset für alle Breakpoints genutzt wird. Das ist besonders auf mobilen Geräten teuer.
| Situation | Symptom | Risiko |
|---|---|---|
| Hero-Image mit 2400px Breite | Mobile lädt volle Datei | Lange Ladezeit, hohes Datenvolumen |
| Thumbnails ohne Varianten | Größtes Bild wird skaliert | Unnötiger Transfer pro Karte |
| CMS ohne Responsive Varianten | Immer Originalgröße | Schlechte Performance |
Entscheidungslogik
Wie du Oversize reduzierst.
| Wenn | Dann | Empfehlung |
|---|---|---|
| Bild wird deutlich kleiner angezeigt | Oversize liegt vor | Responsive Varianten per srcset |
| Viele Karten mit gleichem Bild | Mehrfaches Oversize-Problem | Thumbnail-Größen definieren |
| Hero braucht hohe Auflösung | Qualität wichtig | Nur minimal größer als angezeigt |
Erklärende Details
Oversize verursacht große Dateien, obwohl die sichtbare Fläche klein ist. srcset
erlaubt die Auslieferung passender Größen.
Beispiel für responsive Varianten
<img
src="/img/produkt-800.jpg"
srcset="/img/produkt-400.jpg 400w, /img/produkt-800.jpg 800w"
sizes="(max-width: 600px) 400px, 800px"
alt="Produkt"
width="800"
height="600"
/>Risiken, Grenzen & Einschränkungen
| Risiko | Folge | Gegenmaßnahme |
|---|---|---|
| Zu starke Kompression | Artefakte und schlechter Eindruck | Qualität testen und balancieren |
| Keine Varianten für Breakpoints | Mobile lädt große Dateien | Responsive Größen anlegen |
| Thumbnail mit zu hoher Auflösung | Unnötige Requests | Kleinere Derivate ausliefern |
Interne Vernetzung
Verwandte Checks: Bilder nicht zu groß, Formate sinnvoll, Anzahl Requests.