Die beste Bildgröße und das beste Bildformat für Websites im Jahr 2026
Nicht optimierte Bilder sind die Hauptursache für langsame Websites. Dieser Leitfaden gibt dir konkrete Empfehlungen für Bildabmessungen, Dateigrößen und Formate, basierend darauf, wie Bilder auf modernen Websites tatsächlich angezeigt werden.
Die goldene Regel: Bilder in Anzeigegröße ausliefern
Lade niemals ein 4000px breites Bild hoch, wenn es nur bei 800px Breite angezeigt wird. Der Browser lädt das vollständige Bild herunter, zeigt es aber nur in einem Bruchteil der Größe an — all diese zusätzlichen Daten sind verschwendete Bandbreite.
Passe die Größe deiner Bilder immer vor dem Hochladen an die maximale Anzeigegröße an.
Empfohlene Abmessungen nach Anwendungsfall
| Bildtyp | Maximale Breite | Ziel-Dateigröße |
|---|---|---|
| Vollbreiter Hero/Banner | 1920px | Unter 200 KB |
| Beitragsbild im Blog | 1200px | Unter 100 KB |
| Inline-Bild im Blogbeitrag | 800px | Unter 60 KB |
| Produktfoto (E-Commerce) | 1000px | Unter 80 KB |
| Miniatur-/Kartenbild | 400px | Unter 25 KB |
| Logo (Raster) | 200px | Unter 10 KB |
| Hintergrundtextur | 1000px (Kachel) | Unter 30 KB |
Empfehlungen für das beste Format
- Fotos und Produktbilder: WebP (erste Wahl) oder JPG bei 80 % Qualität
- Logos und Icons: SVG (Vektor) — skaliert perfekt bei jeder Größe, winzige Dateigrößen
- Screenshots und UI-Bilder: PNG oder verlustfreies WebP
- Illustrationen mit flächigen Farben: SVG oder WebP
Core-Web-Vitals-Ziele
Google bewertet Seiten anhand der Core Web Vitals. Für Bilder ist die relevante Metrik Largest Contentful Paint (LCP) — wie schnell das größte sichtbare Bild lädt:
- Gut: LCP unter 2,5 Sekunden
- Verbesserungswürdig: 2,5 – 4 Sekunden
- Schlecht: Über 4 Sekunden
Wenn dein Hero-Bild über 200 KB groß ist, trägt es wahrscheinlich zu einem schlechten LCP-Wert auf mobilen Verbindungen bei.
Schritt-für-Schritt-Workflow zur Bildoptimierung
- Anzeigegröße ermitteln — Prüfe die tatsächliche maximale CSS/HTML-Breite, mit der dein Bild dargestellt wird.
- Auf diese Breite skalieren — Verwende unseren Bildgrößenänderer. Füge bei Bedarf 2x-Versionen für Retina-Displays hinzu.
- Zu WebP konvertieren — Verwende JPG zu WebP oder PNG zu WebP.
- Komprimieren — Verwende unseren Bildkomprimierer mit 75–80 % Qualität.
- Breiten- und Höhenattribute festlegen — Verhindert Cumulative Layout Shift (CLS), eine weitere Core-Web-Vitals-Metrik.
- Lazy Loading hinzufügen —
loading="lazy"für Bilder unterhalb des sichtbaren Bereichs.
Retina-/HiDPI-Bildschirme
Retina-Bildschirme (die meisten modernen Smartphones und MacBooks) zeigen mit 2- oder 3-facher Pixeldichte an. Ein 400px breiter Bereich auf deiner Seite erfordert ein 800px-Bild, um auf Retina scharf auszusehen. Verwende das HTML-Attribut srcset, um je nach Bildschirmdichte unterschiedliche Größen auszuliefern:
<img
src="image-400.webp"
srcset="image-400.webp 1x, image-800.webp 2x"
width="400" height="300"
alt="Beschreibung"
>Next.js-Nutzer
Wenn du Next.js verwendest, übernimmt die integrierte <Image>-Komponente all dies automatisch — sie skaliert, liefert WebP aus und fügt Lazy Loading nativ hinzu. Stelle einfach das ursprüngliche hochauflösende Bild bereit und lass Next.js die Auslieferung optimieren.