Der ultimative Leitfaden zu Bilddateigrößen für das Web in 2026
Jedes Bild auf Ihrer Website hat ein Dateigrößen-Budget. Überschreiten Sie es, und Ihre Seite wird langsam; bleiben Sie darunter, und alles fühlt sich sofort an. Dieser Leitfaden gibt Ihnen konkrete KB-Ziele für jeden gängigen Anwendungsfall.
Referenztabelle: Ideale Dateigrößen nach Verwendungszweck
Diese Ziele gelten für WebP oder AVIF. Bei JPEG addieren Sie etwa 25-30%.
| Verwendung | Pixelbreite | Zielgröße | Empfohlenes Format |
|---|---|---|---|
| Hero-Banner (volle Breite) | 1600-1920px | 100-200 KB | WebP oder AVIF |
| Inhaltsbild/Blog | 800-1200px | 60-150 KB | WebP |
| Produktfoto (Hauptbild) | 800-1000px | 80-150 KB | WebP |
| Produkt-Vorschaubild | 300-400px | 20-50 KB | WebP |
| Karten-/Vorschaubild | 400-600px | 30-80 KB | WebP |
| Avatar/Profilbild | 64-128px | 5-15 KB | WebP oder JPEG |
| Logo | Variabel | 5-30 KB | SVG (bevorzugt) oder PNG |
| Icon | 24-48px | 1-5 KB | SVG |
| Hintergrundmuster | 200-400px (gekachelt) | 10-30 KB | WebP oder PNG |
| Social Sharing (OG) | 1200 x 630px | 80-150 KB | JPEG oder WebP |
Woher diese Zahlen stammen
Die mediane Webseite wiegt auf Mobilgeräten etwa 2,5 MB, und Bilder allein machen rund 1 MB aus — etwa 40 % des Gesamtgewichts, laut HTTP Archive 2025. Googles „gut"-Schwelle für LCP liegt bei 2,5 Sekunden. Um dieses Ziel bei einer 4G-Verbindung (~1,5 MB/s) zu erreichen, muss Ihr Hero-Bild in unter einer Sekunde laden — also unter 200 KB bleiben.
Das Format macht den größten Unterschied
| Format | Beispiel: 1200px-Foto | Relative Größe |
|---|---|---|
| Unkomprimiertes PNG | ~3,5 MB | Referenz |
| JPEG (Qualität 80) | ~180 KB | ~5% |
| WebP (Qualität 80) | ~130 KB | ~3,7% |
| AVIF (Qualität 65) | ~90 KB | ~2,5% |
Der Wechsel von JPEG zu WebP spart 25-35%. AVIF spart ~50% gegenüber JPEG. Lesen Sie unseren WebP vs AVIF Vergleich. Jetzt konvertieren: JPG zu WebP, in AVIF konvertieren, oder Stapelkonvertierung.
Pixelabmessungen: Der versteckte Multiplikator
Ein 4000 x 3000 Foto hat 12 Millionen Pixel. Auf 1200 x 900 skaliert sind es 1,08 Millionen — eine 91% Reduktion. Verwenden Sie Vizuas Größenanpassung, dann komprimieren Sie mit dem JPEG-Kompressor oder PNG-Kompressor.
Komprimierungsqualität: Den optimalen Bereich finden
Ausgangspunkt: Kamerafoto, 4000 x 3000, als PNG gespeichert — ca. 14 MB.
- Skalieren auf 1200 x 900: ~3,5 MB als PNG
- In WebP konvertieren bei Qualität 80: ~130 KB
- In AVIF konvertieren bei Qualität 65: ~90 KB
99,3% Reduktion. Für detaillierte Empfehlungen: Bilder komprimieren ohne Qualitätsverlust.
Sonderfälle
E-Commerce
Produktbilder bei 800-1000px (1600-2000px für Retina) in WebP. Vorschaubilder bei 300-400px, ~20-50 KB.
Fotografie-Portfolio
Vorschauen bei 1200-1600px in WebP (Qualität 85), 150-250 KB.
Open Graph
1200 x 630px, unter 150 KB.
Gesamtes Bild-Budget pro Seite
Zielen Sie auf ein Gesamtbildgewicht unter 500 KB pro Seite:
- 1 Hero-Bild: ~150 KB
- 3-4 Inhaltsbilder: ~100 KB, gesamt ~300-400 KB
- Vorschaubilder, Avatare, Icons: ~50 KB gesamt
Häufig gestellte Fragen
Welche Dateigröße ist ideal für ein Website-Bild?
Es hängt vom Verwendungszweck ab. Hero-Bilder unter 200 KB, Inhaltsbilder unter 150 KB und Vorschaubilder unter 80 KB. Diese Ziele gelten für WebP oder AVIF. Bei JPEG rechnen Sie 20-30% dazu.
Wie reduziere ich die Dateigröße ohne Qualitätsverlust?
Drei Schritte: Auf die tatsächliche Anzeigegröße skalieren, in WebP oder AVIF konvertieren, und bei Qualität 75-85 komprimieren. Der visuelle Unterschied ist nicht erkennbar.
Beeinflusst die Bilddateigröße das SEO?
Ja. Bilder beeinflussen direkt den Largest Contentful Paint (LCP), eine der drei Core Web Vitals von Google. Ein langsamer LCP (über 2,5 Sekunden) schadet dem Ranking.
Welche Pixelabmessungen sollte ich für Produktbilder verwenden?
Für E-Commerce: Produktbilder bei 800-1000px Breite und 300-400px für Vorschaubilder im Raster. Die meisten Produktfotos komprimieren gut in WebP bei Qualität 80, etwa 80-150 KB.
Erreichen Sie Ihre Größen-Ziele
Kostenlos, privat, ohne Registrierung. Alles läuft in Ihrem Browser.