Welche Bildgröße für Website und Shop?

Pixel und KB: zwei verschiedene Größen

Mit „Bildgröße“ sind zwei Dinge gemeint: die Pixelmaße (z. B. 1920 × 1080) und die Dateigröße (z. B. 180 KB). Beide hängen zusammen, aber nicht direkt: Ein gut komprimiertes Bild mit 1920 Pixeln Breite kann kleiner sein als ein schlecht gespeichertes mit 1000 Pixeln.

Für eine schnelle Website brauchst du beides: Die Pixelmaße sollten zur tatsächlichen Anzeigegröße passen, und die Datei sollte so stark komprimiert sein, wie es die Optik erlaubt. Ein Handyfoto mit 4000 Pixeln Breite, das auf der Seite 800 Pixel breit angezeigt wird, verschwendet ein Vielfaches der nötigen Daten.

Als dritte Stellschraube kommt das Format hinzu. Für Fotos ist WebP meist die beste Wahl: In unserem Test war dasselbe 12-MP-Foto als WebP rund 28 % kleiner als das gleich stark komprimierte JPG (1,57 MB statt 2,17 MB).

Richtwerte für typische Bildarten

Die Pixelwerte sind bewusst für hochauflösende Bildschirme gewählt (siehe nächster Abschnitt). Wie breit ein Bild auf deiner Seite wirklich dargestellt wird, siehst du per Rechtsklick → „Untersuchen“ in den Entwicklertools von Chrome, Edge oder Firefox.

Retina-Displays: warum doppelte Pixel?

Smartphones, Tablets und viele Notebooks haben eine Pixeldichte von 2 oder sogar 3: Ein Bild, das im Layout 600 Pixel breit ist, wird dort mit 1200 oder 1800 echten Bildschirmpixeln dargestellt. Liegt nur ein Bild mit 600 Pixeln vor, wirkt es weich.

Faustregel: die doppelte Anzeigebreite reicht in der Praxis. Die dreifache Auflösung bringt bei Fotos kaum sichtbaren Gewinn, kostet aber deutlich mehr Daten. Zum Vergleich: Ein Bild mit 2560 Pixeln Breite hat knapp 80 % mehr Pixel als eines mit 1920 – entsprechend größer wird meist auch die Datei. Damit nicht jedes Gerät das große Bild laden muss, gibt es srcset.

srcset und sizes: das passende Bild für jedes Gerät

Mit dem Attribut srcset bietest du dem Browser mehrere Varianten desselben Bildes an. Mit sizes sagst du ihm, wie breit das Bild im Layout erscheint. Der Browser wählt dann selbst die kleinste Datei, die für Bildschirm und Pixeldichte scharf genug ist.

Ein Beispiel: <img src="bild-1200.webp" srcset="bild-600.webp 600w, bild-1200.webp 1200w, bild-1800.webp 1800w" sizes="(max-width: 800px) 100vw, 800px" width="1200" height="800" alt="Beschreibung">

Übersetzt: Bis 800 Pixel Fensterbreite füllt das Bild die ganze Breite, darüber ist es 800 Pixel breit. Ein einfaches Smartphone mit Pixeldichte 1 kommt mit der 600er-Variante aus, ein Retina-Notebook lädt bei voller Layoutbreite die 1800er. Achte darauf, dass alle Varianten dasselbe Seitenverhältnis haben – sonst passt der reservierte Platz nicht zu jeder Datei.

Content-Management-Systeme wie WordPress erzeugen die Varianten und das srcset automatisch – mehr dazu in Bilder für WordPress optimieren.

Lazy Loading – aber nicht für das wichtigste Bild

Mit loading="lazy" lädt der Browser Bilder erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Bei langen Seiten und Shop-Kategorien spart das beim ersten Aufruf viel Datenvolumen.

Wichtig: Das große Bild ganz oben (Hero, erstes Produktbild) solltest du nicht verzögert laden. Es ist oft das größte sichtbare Element und bestimmt damit den LCP-Wert. Gib ihm stattdessen fetchpriority="high", damit der Browser es früh anfordert.

• Bilder im sofort sichtbaren Bereich: normal laden, das Hero-Bild mit fetchpriority="high".
• Bilder weiter unten: loading="lazy".
• Hintergrundbilder per CSS werden von loading="lazy" nicht erfasst – sparsam einsetzen und gut komprimieren.

Besonderheiten im Online-Shop

In Shops landen oft Hunderte Produktbilder auf einer Seite. Deshalb lohnen sich ein paar zusätzliche Regeln:

• Einheitliches Seitenverhältnis: Quadratische oder gleich hohe Produktfotos sorgen für ein ruhiges Raster und vermeiden Layoutsprünge.
• Kategorieseiten: Hier werden nur Vorschaubilder gebraucht. Prüfe, ob dein Shopsystem wirklich die kleine Variante ausliefert und nicht das große Zoom-Bild herunterskaliert.
• Zoom-Bilder: Die große Variante erst laden, wenn jemand zoomt oder die Galerie öffnet.
• Weiße Hintergründe: Freigestellte Produkte auf Weiß lassen sich als JPG oder WebP sehr klein speichern. Transparenz brauchst du nur, wenn der Seitenhintergrund wechselt.
• Marktplätze: Verkaufsplattformen haben eigene Vorgaben zu Mindestgröße und Format. Prüfe sie vor dem Export.

Für große Bildmengen ist Handarbeit mühsam. Über die API lassen sich Bilder automatisch beim Import optimieren – mit Parametern für Format, maximale Breite und Zielgröße in KB.

Core Web Vitals: was Bilder mit LCP zu tun haben

Google bewertet die Nutzererfahrung unter anderem mit den Core Web Vitals. Für Bilder ist vor allem LCP (Largest Contentful Paint) entscheidend: die Zeit, bis das größte sichtbare Element dargestellt ist. Als gut gilt ein Wert von höchstens 2,5 Sekunden.

Auf vielen Seiten ist dieses größte Element ein Bild. Jedes Kilobyte weniger verkürzt den Weg zu einem guten LCP – besonders im Mobilfunknetz. Ein schneller Server und gegebenenfalls ein Content Delivery Network (CDN) helfen zusätzlich. So gehst du vor:

1. Hero-Bild auf die nötige Breite verkleinern: meist 1920 Pixel, für große Retina-Monitore bis 2560 Pixel.
2. In WebP umwandeln und mit der Stufe „Ausgewogen“ komprimieren.
3. Im HTML width und height setzen, kein Lazy Loading, dafür fetchpriority="high".
4. Alle weiteren Bilder mit srcset und loading="lazy" einbinden.
5. Mit PageSpeed Insights oder den Chrome-Entwicklertools prüfen, welches Element als LCP gemessen wird.

Viele Bilder auf einmal? TinyThis verarbeitet bis zu 50 Bilder je Durchgang, für WordPress gibt es das Plugin. Welches Format sich für welche Bilder eignet, steht im Bildformat-Vergleich.