specialpage
1. Dezember 2025
Welche Bildergrössen sind optimal für die Website?
specialpage
1. Dezember 2025
Welche Bildergrössen sind optimal für die Website?
Wenn deine Website langsam lädt, liegt es fast immer an zu grossen Bildern. Und ja – das passiert schneller als du denkst. In diesem Guide bekommst du klare, einfache Werte, die du direkt übernehmen kannst.
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
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
Autor: Livio Bätschmann
Livio Bätschmann ist Webdesigner und SEO-Profi aus der Ostschweiz und Gründer von specialpage. Er unterstützt KMU, Startups und Selbstständige dabei, mehr Sichtbarkeit, Vertrauen und Anfragen über ihre Website zu gewinnen. Durch zahlreiche Kundenprojekte hat er breite Erfahrung in Webdesign, Local SEO, Conversion-Optimierung und datenbasiertem Marketing aufgebaut.
Sein Wissen teilt Livio regelmässig in über 135 Blogbeiträgen, auf Social Media und in Communities rund um Webdesign, SEO und Online-Marketing. Dabei verbindet er Praxis, kreative Denkweise und klare Daten, um echten Mehrwert zu bieten.
Schwerpunkte:
Webdesign, Local SEO Schweiz, Landingpages, Conversion-Optimierung, Content-Strategie
Letzte Aktualisierung:
01.12.2025
Häufigste Fragen kurz beantwortet
Häufigste Fragen kurz beantwortet
Ist WebP besser als JPG?
Was ist mit 72 dpi?
Welche Bildqualität ist ideal?
Ist WebP besser als JPG?
Was ist mit 72 dpi?
Welche Bildqualität ist ideal?
Wenn deine Website langsam lädt, liegt es fast immer an zu grossen Bildern. Und ja – das passiert schneller als du denkst. In diesem Guide bekommst du klare, einfache Werte, die du direkt übernehmen kannst.
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
Autor: Livio Bätschmann
Livio Bätschmann ist Webdesigner und SEO-Profi aus der Ostschweiz und Gründer von specialpage. Er unterstützt KMU, Startups und Selbstständige dabei, mehr Sichtbarkeit, Vertrauen und Anfragen über ihre Website zu gewinnen. Durch zahlreiche Kundenprojekte hat er breite Erfahrung in Webdesign, Local SEO, Conversion-Optimierung und datenbasiertem Marketing aufgebaut.
Sein Wissen teilt Livio regelmässig in über 135 Blogbeiträgen, auf Social Media und in Communities rund um Webdesign, SEO und Online-Marketing. Dabei verbindet er Praxis, kreative Denkweise und klare Daten, um echten Mehrwert zu bieten.
Schwerpunkte:
Webdesign, Local SEO Schweiz, Landingpages, Conversion-Optimierung, Content-Strategie
Letzte Aktualisierung:
01.12.2025
Häufigste Fragen kurz beantwortet
Was kostet eine Website bei specialpage?
Wie lange dauert die Umsetzung?
Mit welchem System arbeitest du?
Kann ich die Website später selbst bearbeiten?
Was brauche ich für den Start?
Zum weiterlesen
Weitere Beiträge
Check auch unsere anderen Blogs aus. Alles rund um das Thema Webdesign, SEO und Online-Marketing.
Zum weiterlesen
Weitere Beiträge
Check auch unsere anderen Blogs aus. Alles rund um das Thema Webdesign, SEO und Online-Marketing.
Zum weiterlesen
Weitere Beiträge
Check auch unsere anderen Blogs aus. Alles rund um das Thema Webdesign, SEO und Online-Marketing.