Welche Bildergrössen sind optimal für die Website?

Die wichtigsten Bildgrössen auf einen Blick

Hero / Header (volle Breite):
1920 × 450–600 px

Bilder im Inhalt:
600–900 px Breite

Mobile:
360–480 px Breite

Dateigrösse:
unter 100 KB, wenn möglich

Format:
WebP oder AVIF. Sonst gut komprimiertes JPG.

Warum das so wichtig ist

Jedes Bild, das du hochlädst, beeinflusst:

• die Ladezeit

• dein Google-Ranking

• die Absprungrate

• die Conversion deiner Seite

Schlechte Bilder bremsen deine Website enorm aus. Gute Bilder machen sie schneller und hochwertiger. So einfach ist es.

Bildgrösse, Dateigrösse, Format – kurz erklärt

Damit du nicht die falschen Begriffe verwechselst:

Bildformat
JPG, PNG, WebP, AVIF usw.
→ bestimmt, wie effizient das Bild gespeichert werden kann.

Bildgrösse (Pixel)
z. B. 800 × 600 px
→ bestimmt, wie gross das Bild auf dem Bildschirm erscheint.

Dateigrösse (KB/MB)
z. B. 85 KB
→ je kleiner, desto schneller lädt die Seite.

Welches Format solltest du verwenden?

JPG: für Fotos ohne Transparenz
PNG: für Logos oder Grafiken mit Transparenz
WebP: moderner, kleiner, effizienter
AVIF: noch kleiner, super Qualität (aber nicht überall unterstützt)

Mein Tipp:
Nimm WebP als Standard.
Wenn du Tools wie WordPress nutzt: Plugins wie ShortPixel übernehmen das automatisch.

Welche Bildgrössen funktionieren wirklich?

Hier die Grössen, die ich auf Kundenwebsites täglich verwende:

1. Hero-Banner

• 1920 px Breite

• Höhe 450–600 px (sonst verschwindet dein Text zu weit unten)

2. Bilder im Textbereich

• 600–900 px, je nach Layout

3. Mobile

• 360–480 px
  Aber Achtung: Bilder, die am Desktop nebeneinander stehen, sind am Handy plötzlich untereinander – dort werden sie grösser dargestellt. Also immer testen.

Wie findest du heraus, wie gross ein Bild sein muss?

Browser → Rechtsklick → Untersuchen
Dort siehst du die “gerenderte” Bildgrösse in Pixeln.

Wenn du WordPress nutzt:
Mediathek → Bild anklicken → dort stehen Masse + Dateigrösse.

Bilder verkleinern – Tools, die ich empfehle

• TinyPNG
  Komprimiert super, kaum Qualitätsverlust.

• Squoosh
  Mehr Kontrolle, ideal für Webdesigner.

• Photopea
  Gratis Photoshop-Alternative im Browser.

Checkliste für die optimalen Bildgrössen

• Richtige Grösse wählen

• WebP oder AVIF verwenden

• Dateigrösse prüfen (<100 KB)

• Keine zu hohen Header-Bilder

• Jede Grafik einzeln optimieren

• Nicht blind einfach JPG hochladen