Anders als soziale Medien — die feste und gut dokumentierte Spezifikationen haben — haben Websites variable Layouts, responsive Layouts und sehr unterschiedliche Nutzungskontexte. Ein Homepage-Banner nimmt 100% der Bildschirmbreite ein. Ein Produktfoto kann bei 400px oder 800px erscheinen, je nach Gerät. Ein Blog-Bild wird innerhalb einer Textspalte angezeigt.
Es gibt keine einzige richtige Größe für "Website-Bild" — aber es gibt empfohlene Bereiche für jeden Kontext, und sie zu verstehen macht den Unterschied zwischen einer schnellen, gut dargestellten Website und einer langsamen Website mit unscharfen oder zu schweren Bildern.
Warum die Bildgröße deine Website beeinflusst
Zwei unterschiedliche Probleme entstehen, wenn Bilder nicht optimiert sind:
- Zu große Bilder in Pixeln: der Browser lädt ein 4000px-Foto herunter, um es bei 800px anzuzeigen — 80% der übertragenen Daten werden sofort verworfen. Die Website wird langsam ohne jeglichen visuellen Gewinn.
- Zu schwere Bilder in KB/MB: auch bei korrekten Abmessungen kann ein unkomprimiertes Foto 3 MB wiegen, wenn es bei identischer visueller Qualität auf dem Bildschirm 150 KB wiegen könnte.
Die beiden Probleme haben unterschiedliche Lösungen: das erste erfordert Größenänderung (Pixel anpassen); das zweite erfordert Komprimierung (Gewicht reduzieren, ohne die Pixel zu ändern). In der Praxis erzielt die Anwendung beider nacheinander das beste Ergebnis.
💡 Allgemeine Regel: die maximale Breite jedes Bildes fürs Web muss selten 1920px überschreiten — das ist die Breite eines Full-HD-Monitors. Für Bilder, die nie den gesamten Bildschirm einnehmen (Spalten, Produktraster, Thumbnails), ist die Grenze noch niedriger. Darüber hinaus verschwendest du Bandbreite und schadest dem Laden.
Referenztabelle — Größen nach Bildtyp
| Bildtyp | Empfohlene Abmessungen | Ideales Gewicht | Format |
|---|---|---|---|
| Banner / Hero (Full Width) | 1920 × 600–900 px | 100–200 KB | WebP / JPG |
| Desktop-Banner (Boxed Layout) | 1200–1440 × 400–600 px | 80–150 KB | WebP / JPG |
| Mobile-Banner | 768 × 400–600 px | 50–100 KB | WebP / JPG |
| Produktfoto (E-Commerce) | 800–1200 × 800–1200 px | 60–150 KB | WebP / JPG |
| Produkt-Thumbnail | 300–600 × 300–600 px | 20–50 KB | WebP / JPG |
| Artikel-/Blog-Bild | 1200 × 600–800 px | 60–120 KB | WebP / JPG |
| Post-Thumbnail (Liste) | 400–600 × 250–400 px | 20–50 KB | WebP / JPG |
| Logo im Header | 200–400 px Breite | 5–30 KB | SVG / PNG / WebP |
| Interface-Icons | 24–64 px | 1–5 KB | SVG |
| Favicon | 16, 32, 180, 192, 512 px | 1–10 KB jeweils | .ico + PNG |
| Open Graph (Social Preview) | 1200 × 630 px | 80–150 KB | JPG / WebP |
| Abschnitts-Hintergrund | 1920 × variable Höhe | 100–300 KB | WebP / JPG |
| Profilbild / Avatar (Website) | 200–400 × 200–400 px | 20–50 KB | WebP / JPG / PNG |
| Testimonial-/Kundenbild | 80–150 × 80–150 px | 5–20 KB | WebP / JPG |
Abmessungen nach Website-Typ
Firmen-Websites und Portfolios
Firmen-Websites haben meist eine maximale Inhaltsbreite zwischen 960px und 1440px. Banner- oder Hero-Bilder nehmen meist 100% der Layout-Breite ein — also reichen 1440–1920px Breite für moderne Monitore. Abschnittsbilder (Teamfotos, Büro, Dienstleistungen) müssen selten 800px Breite überschreiten.
- Hauptbanner: 1920 × 700–900px, unter 200 KB
- Teamfoto: 400–600 × 400–600px, unter 60 KB
- Dienstleistungs-/Abschnittsfoto: 800–1200 × 500–700px, unter 100 KB
Blogs und Content-Portale
Bei Blogs überschreitet die Inhaltsspalte selten 760–800px Breite. Ein Beitragsbild (Featured Image) mit 1200px reicht mehr als aus, um jedes responsive Layout ohne Verschwendung abzudecken. Thumbnails in der Beitragsliste sind noch kleiner — meist 300–500px.
- Featured Image: 1200 × 630px, unter 100 KB
- Bilder im Artikel: 800–1200px Breite, jeweils unter 80 KB
- Thumbnail in der Liste: 400 × 250px, unter 30 KB
E-Commerce und Online-Shops
Im E-Commerce sind Produktfotos das kritischste Element — sie sind das Hauptüberzeugungswerkzeug für den Kunden. Die Auflösung muss für Zoom ausreichen (wenn die Website diese Funktion bietet), aber das Gewicht muss kontrolliert werden, um die Geschwindigkeit der Listenseiten nicht zu beeinträchtigen, die viele Bilder gleichzeitig laden.
- Hauptfoto des Produkts (quadratisch): 800–1200 × 800–1200px, 80–150 KB in WebP
- Zusätzliche Produktfotos: gleiche Größe wie das Hauptfoto
- Thumbnail im Produktraster: 300–500 × 300–500px, 20–50 KB
- Kategorie-/Aktionsbanner: 1440 × 400–600px, 80–150 KB
🛍️ Für E-Commerce: nutze bei Produktfotos immer weißen oder neutralen Hintergrund — das erleichtert nicht nur die Komprimierung (große Flächen einheitlicher Farbe komprimieren sehr gut), sondern garantiert auch visuelle Konsistenz zwischen Produkten verschiedener Lieferanten und verbessert die Vergleichserfahrung im Warenkorb.
Landingpages
Landingpages sind für eine einzige Conversion-Aktion konzipiert — und Geschwindigkeit ist kritisch: Studien zeigen, dass jede zusätzliche Sekunde Ladezeit die Conversion-Rate um 7–12% reduziert. Bilder auf Landingpages müssen aggressiv optimiert werden.
- Hero / Hintergrund: 1440–1920px Breite, unter 150 KB — höchste Priorität
- Produkt-/Dienstleistungsfoto: 600–800px, unter 80 KB
- Vorteils-Icons: wo möglich immer SVG
- Testimonial-Foto: 80–120px kreisförmig, unter 15 KB
Die Auswirkung des 2×-Faktors (Retina- und HiDPI-Displays)
Retina-Displays (Apple) und HiDPI (andere Hersteller) haben verdoppelte Pixeldichte — das bedeutet, sie zeigen mehr Pixel pro Zoll als normale Monitore. Damit Bilder auf diesen Displays scharf erscheinen, muss das Bild die doppelte Pixelanzahl des Anzeigebereichs haben.
Beispiel: ein Bild, das mit 400px Breite auf einem Retina-Display angezeigt wird, bräuchte 800px Breite, um scharf zu erscheinen. Nur 400px zu senden führt zu einem leicht unscharfen Bild auf iPhones und MacBooks.
Die praktischste Lösung ist, Bilder mit der doppelten maximalen Anzeigebreite zu nutzen — aber gut zu komprimieren, damit das Gewicht sich nicht im gleichen Verhältnis verdoppelt. Ein gut komprimiertes 800px-Bild in WebP wiegt meist weniger als 400px in unoptimiertem PNG.
Das richtige Format für jede Situation
| Situation | Ideales Format | Warum |
|---|---|---|
| Fotografien (Produkt, Banner, Team) | WebP lossy | 25–35% kleiner als JPG bei gleichwertiger Qualität |
| Logo im Header | SVG | Vektoriell, jede Größe ohne Verlust, kleinere Datei |
| Logo, wenn SVG nicht unterstützt wird | PNG mit transparentem Hintergrund | Bewahrt die benötigte Transparenz |
| Interface-Icons | SVG | Skalierbar, per CSS animierbar, winzige Datei |
| Screenshot mit Text | WebP lossless oder PNG | Scharfer Text — JPG erzeugt Artefakte um die Buchstaben |
| Open Graph / Social Preview | JPG oder WebP | Maximale Kompatibilität mit Preview-Plattformen |
| Hintergrund mit Transparenz | WebP mit Alphakanal oder PNG | Einziges Format mit Transparenz neben PNG |
Wie man Bilder vor dem Upload vorbereitet
Der empfohlene Ablauf für jedes Bild, das für eine Website bestimmt ist:
- Definiere die Nutzungsabmessungen. Welchen maximalen Raum wird dieses Bild im Layout einnehmen? Nutze die Referenztabelle oben oder inspiziere das Element im Browser (F12 → den Bildbereich auswählen).
- Ändere die Größe auf das Doppelte des Anzeigebereichs. Um Retina-Displays ohne übermäßige Verschwendung abzudecken. Nutze den Bildgrößen-Ändern, um die exakte Breite in Pixel festzulegen.
- Konvertiere zu WebP. Wenn deine Website oder dein CMS WebP unterstützt (die meisten modernen tun das), konvertiere vor dem Upload. Nutze den Bild-Konverter für schnelle Konvertierung.
- Komprimiere. Wende Komprimierung an, um das Gewicht innerhalb der empfohlenen Bereiche zu reduzieren. Nutze den Bild-Komprimierer, um JPG, PNG und WebP ohne wahrnehmbaren visuellen Verlust zu optimieren.
- Prüfe das Ergebnis. Öffne das komprimierte Bild und vergleiche es mit dem Original. Wenn der Unterschied nicht sichtbar ist, ist das Ergebnis gut.
Bereite jetzt deine Bilder für die Website vor
Ändere die Größe und komprimiere die Bilder deiner Website in Sekunden — ohne etwas zu installieren, ohne ein Konto zu erstellen.
Die aktuelle Größe der Bilder deiner Website prüfen
Um zu erkennen, ob die Bilder deiner aktuellen Website optimiert sind, nutze diese Tools:
- Google PageSpeed Insights (pagespeed.web.dev): analysiert die URL und listet Bilder mit Reduzierungspotenzial auf, mit dem geschätzten Gewinn in KB für jedes.
- Chrome DevTools → Network → Img: filtere die Anfragen nach Bildtyp und sieh die Größe jeder geladenen Datei. Sortiere nach Größe, um die schwersten zu identifizieren.
- WebPageTest.org: detaillierte Analyse mit Wasserfalldiagramm, das zeigt, welche Bilder zuerst geladen werden und wie lange sie brauchen.
Häufigste Fehler bei der Bildgröße auf Websites
- Fotos direkt von der Kamera hochladen: Kamerafotos haben 3–12 MB und 4000–8000px Breite. Keine Website braucht solche Bilder ohne vorherige Größenänderung und Komprimierung.
- PNG für Fotos verwenden: Fotos in PNG sind 5–10× größer als in JPG oder WebP ohne jeglichen visuellen Gewinn. Nutze PNG nur für Bilder mit Transparenz oder Grafiken mit scharfen Kanten.
- Keine Mobile-Version der Bilder haben: ein 1920px-Bild an ein 390px-Smartphone zu senden ist reine Verschwendung. Das HTML-Attribut
srcsetlöst das automatisch. - Open-Graph-Bilder vergessen: wenn jemand eine Seite bei WhatsApp oder LinkedIn ohne konfiguriertes Vorschaubild teilt, zeigt die Plattform eine generische oder leere Miniatur. Konfiguriere immer das Meta-Tag
og:imagemit einem 1200×630px-Bild. - Logo als JPG: der erzwungene weiße Hintergrund von JPG erscheint in Kontexten mit farbigem oder transparentem Hintergrund. Logo immer als SVG oder PNG.