Bildgröße Website: Überblick und Tipps für die optimalen Maße

Bilder machen deine Website anschaulich, erklären Produkte schneller als lange Texte und können Vertrauen schaffen. Gleichzeitig gehören sie zu den häufigsten Ursachen für langsame Seiten, unscharfe Darstellungen und unnötig große Datenmengen.

Damit deine Bilder gut aussehen und trotzdem schnell laden, brauchst du drei Dinge: passende Pixelmaße, geringe Dateigrößen und das richtige Bildformat. Wenn du Bilder für die Website vorbereitest, sollten deine Bilder nicht nur visuell überzeugen, sondern auch die Ladezeit deiner Website unterstützen. In diesem Beitrag findest du konkrete Richtwerte für Website-Bereiche, Produktbilder, Banner, Logos und mobile Darstellungen.

Warum ist die Bildgröße auf Websites so wichtig?

Die richtige Größe von Bildern beeinflusst, wie schnell deine Website lädt, wie professionell sie wirkt und wie gut Bilder auf verschiedenen Geräten dargestellt werden. Besonders im E-Commerce können zu große, unscharfe oder schlecht zugeschnittene Website-Bilder die Nutzererfahrung verschlechtern und Kaufentscheidungen negativ beeinflussen.

Bessere Nutzererfahrung

Bilder in der passenden Größe helfen Besucher:innen, Inhalte schneller zu erfassen. Produktdetails, Materialien und Farben werden klarer sichtbar, ohne dass Bilder verpixelt wirken oder ungünstig abgeschnitten werden.

Schnellere Ladezeit

Zu große Bilddateien verlangsamen deine Website, weil mehr Daten übertragen werden müssen. Besonders Hero-Bilder, Produktbilder und Bilder im sichtbaren Bereich sollten deshalb gut komprimiert und passend skaliert sein. Das kann die Ladezeit der Website verbessern und sorgt dafür, dass Besucher:innen schneller mit deinen Inhalten interagieren können.

Bessere mobile Darstellung

Ein Bild, das am Desktop gut aussieht, kann auf dem Smartphone zu groß, zu klein oder falsch zugeschnitten wirken. Prüfe daher, wie Produktbilder, Banner und Blogbilder auf Smartphone und Tablet erscheinen.

Unterstützung für SEO

Die Größe von Bildern ist kein einzelner Ranking-Hebel, wirkt sich aber auf SEO-relevante Faktoren aus: Ladezeit, Nutzererfahrung, mobile Nutzbarkeit und Bildersuche. Zusätzlich helfen sprechende Dateinamen, passende ALT-Texte, Bildtitel und eine Platzierung nahe am relevanten Textabschnitt dabei, Bilder besser einzuordnen.

Wähle das richtige Format

Welches Bildformat sinnvoll ist, hängt davon ab, wo du das Bild auf deiner Website einsetzt. Für Produktbilder, Banner, Logos oder Icons gelten unterschiedliche Anforderungen. Entscheidend sind vor allem drei Fragen: Soll das Bild möglichst klein sein? Muss es transparent sein? Und muss es auf allen Bildschirmgrößen gestochen scharf bleiben?

WebP

Dateigröße: klein bis mittel

Qualität: sehr gut

Einsatzbereiche:

• eignet sich für Produktbilder, Blogbilder, Banner und Teaser
• bietet meist kleinere Dateien als JPEG oder PNG bei guter Bildqualität
• ist für viele Website-Bilder ein sinnvoller Standard
• unterstützt auch Transparenz und Animationen

WebP ist besonders sinnvoll, wenn du Bilder schnell laden möchtest, ohne sichtbar an Qualität zu verlieren. Für viele Onlineshops ist es daher eine gute Wahl für Produkt- und Kategoriebilder.

AVIF

Dateigröße: sehr klein

Qualität: sehr gut

Einsatzbereiche:

• eignet sich für große Fotos, Hero-Bilder und visuell starke Landingpages
• kann Bilder oft stärker komprimieren als WebP
• ist sinnvoll, wenn besonders kurze Ladezeiten wichtig sind
• funktioniert am besten, wenn dein System automatisch passende Fallbacks ausspielt

AVIF ist besonders nützlich für große Bildflächen, bei denen du eine hohe Qualität mit möglichst geringer Größe von Dateien kombinieren möchtest. Da nicht jedes ältere System AVIF optimal verarbeitet, solltest du prüfen, ob dein Theme oder deine Plattform passende Alternativen bereitstellt.

JPEG

Dateigröße: klein bis mittel

Qualität: gut

Einsatzbereiche:

• eignet sich für Fotos und Produktbilder
• lässt sich gut komprimieren
• ist mit nahezu allen Browsern, Tools und Plattformen kompatibel
• unterstützt keine Transparenz

JPEG ist sinnvoll, wenn du Fotos mit guter Qualität und breiter Kompatibilität brauchst. Für neue Website-Bilder sind WebP oder AVIF oft effizienter, JPEG bleibt aber eine solide Option für klassische Fotoformate.

PNG

Dateigröße: mittel bis groß

Qualität: sehr hoch

Einsatzbereiche:

• eignet sich für Grafiken, Screenshots, Icons und Bilder mit transparentem Hintergrund
• erhält klare Kanten und Details sehr gut
• kann verlustfrei komprimiert werden
• ist für große Fotos meist weniger geeignet, weil die Dateien schnell groß werden

PNG ist sinnvoll, wenn Transparenz oder sehr klare grafische Elemente wichtig sind. Das Format eignet sich besonders für freigestellte Bilder, Screenshots, Icons und Grafiken mit transparentem Hintergrund. Wenn du freigestellte Bilder mit transparentem Hintergrund nutzt, solltest du die Datei trotzdem komprimieren, damit sie nicht unnötig groß wird.

SVG

Dateigröße: sehr klein

Qualität: perfekt skalierbar

Einsatzbereiche:

• eignet sich für Logos, Icons und einfache Illustrationen
• bleibt auf allen Bildschirmgrößen scharf
• lässt sich ohne Qualitätsverlust vergrößern oder verkleinern
• ist nicht für Fotos geeignet

SVG ist ideal für grafische Elemente, die flexibel skaliert werden müssen. Besonders Logos und Icons profitieren davon, weil sie auch auf hochauflösenden Displays gestochen scharf bleiben.

GIF

Dateigröße: mittel bis groß

Qualität: gering

Einsatzbereiche:

• eignet sich nur noch für einfache Animationen
• unterstützt Transparenz, aber nur ein begrenztes Farbspektrum
• wirkt bei Fotos schnell unsauber oder unnatürlich
• ist für moderne Websites meist nicht mehr die beste Wahl

GIF ist heute eher eine Ausnahme. Für Animationen sind WebP, kurze Videos oder andere moderne Formate meist effizienter und qualitativ besser. GIFs solltest du nur verwenden, wenn es technisch oder gestalterisch wirklich sinnvoll ist.

Lesetipp: In diesem Artikel geben wir dir Tipps für das perfekte Homepage-Design.

Wähle die richtige Bildgröße für verschiedene Website-Bereiche

Größe von Bildern und von Dateien hängen zusammen, bedeuten aber nicht dasselbe. Wenn du Bildgrößen für Webseiten richtig anlegen möchtest, solltest du immer den konkreten Einsatz auf Webseiten berücksichtigen. Für optimale Bildgrößen zählen nicht nur Pixelmaße, sondern auch die Dateigröße der Bilder.

• Hintergrundbilder
• Hero-Bilder
• Bannerbilder
• Blogbilder und Content-Bilder
• Produktbilder
• Kollektionsbilder und Produkt-Thumbnails
• Logos
• Favicons und Icons
• Lightbox- und Vollbildbilder

Hintergrundbilder

Hintergrundbilder füllen oft große Seitenbereiche aus und sollten deshalb besonders gut optimiert werden.

Richtwerte:

• Desktop: ca. 2560 x 1400 Pixel
• Mobil: ca. 360 x 640 Pixel
• Dateigröße: ca. 300 bis 500 KB
• Format: WebP oder AVIF

Vollbreite Bilder brauchen mehr Pixel als kleine Bilder, weil sie über große Seitenbereiche laufen. Prüfe deshalb, wie breit das Bild in Pixeln sein muss, bevor du ein Bild über die volle Breite einsetzt. Achte außerdem darauf, wichtige Motive mittig zu platzieren und die mobile Ansicht zu prüfen.

Hero-Bilder

Hero-Bilder erscheinen meist ganz oben auf Startseiten, Landingpages oder Kategorieseiten.

Richtwerte:

• Desktop: ca. 1280 x 720 bis 2500 x 900 Pixel
• Mobil: ca. 360 x 200 Pixel
• Dateigröße: ca. 150 bis 300 KB, bei detailreichen Bildern maximal ca. 500 KB
• Format: WebP oder AVIF

Da Hero-Bilder oft das größte sichtbare Element beim Seitenaufruf sind, können zu große Dateien die Ladezeit deutlich verschlechtern. Wenn ein Bild über die volle Breite angezeigt wird, sollte es groß genug sein, um Bilder gestochen scharf darstellen zu können, aber trotzdem komprimiert bleiben.

Bannerbilder

Banner eignen sich für Aktionen, Kategorien, Hinweise oder visuelle Trenner.

Richtwerte:

• Desktop: ca. 1200 x 400 Pixel
• Mobil: ca. 360 x 120 Pixel
• Dateigröße: ca. 80 bis 200 KB
• Format: WebP, AVIF oder PNG bei grafischen Elementen

Platziere Produkte, Gesichter oder wichtige Informationen möglichst mittig, da Banner je nach Theme unterschiedlich zugeschnitten werden.

Blogbilder und Content-Bilder

Bilder in Blogbeiträgen oder Ratgeberseiten müssen meist nicht vollbreit hochgeladen werden.

Richtwerte:

• Desktop: ca. 1200 x 800 Pixel
• Mobil: ca. 360 x 240 Pixel
• Dateigröße: ca. 70 bis 150 KB
• Format: WebP für Fotos, PNG für Screenshots oder Grafiken

Lade Content-Bilder nur so groß hoch, wie sie im Beitrag tatsächlich angezeigt werden. Screenshots sollten lesbar bleiben, aber nicht unnötig groß sein.

Produktbilder

Produktbilder beeinflussen Kaufentscheidungen direkt, weil sie Details wie Material, Farbe und Verarbeitung zeigen.

Richtwerte:

• Quadratische Produktbilder: ca. 2048 x 2048 Pixel
• Mindestgröße: möglichst nicht unter 800 x 800 Pixel
• Praktischer Zielwert: ca. 100 bis 300 KB pro Produktbild
• Detailbilder mit Zoom: ca. 300 bis 500 KB
• Format: WebP, AVIF oder JPEG

Bevor du Produktbilder auf deine Website hochlädst, solltest du die passende Bildgröße prüfen. So findest du die richtige Bildgröße für deine Website und kannst Bilder hochladen, die Details klar zeigen, aber nicht unnötig groß sind.

Kollektionsbilder und Produkt-Thumbnails

Kollektionsbilder und Thumbnails erscheinen häufig in Rastern, Kategorieübersichten oder Produktempfehlungen.

Richtwerte:

• Kollektionsbilder: ca. 1024 x 1024 Pixel oder passend zum Theme
• Produkt-Thumbnails: ca. 150 x 150 bis 300 x 300 Pixel
• Allgemeine Thumbnails: ca. 300 x 300 Pixel
• Dateigröße: ca. 20 bis 80 KB
• Format: WebP oder JPEG

Wichtig ist, dass das Motiv auch in kleiner Darstellung klar erkennbar bleibt.

Logos

Logos sollten klein, scharf und flexibel skalierbar sein.

Richtwerte:

• Rechteckiges Logo: ca. 400 x 100 Pixel
• Quadratisches Logo: ca. 100 x 100 bis 250 x 250 Pixel
• Mobile Variante: ca. 160 x 40 Pixel oder 60 x 60 Pixel
• Dateigröße: ca. 10 bis 50 KB
• Format: idealerweise SVG, alternativ PNG

SVG ist für Logos meist die beste Wahl, weil das Format auf allen Bildschirmgrößen scharf bleibt.

Favicons und Icons

Favicons und Icons sind kleine grafische Elemente und sollten sehr leicht sein.

Richtwerte:

• Favicon: ca. 48 x 48 Pixel
• Icons: ca. 32 x 32 bis 48 x 48 Pixel
• Dateigröße: ca. 5 bis 20 KB
• Format: SVG, PNG oder ICO für Favicons

Vermeide zu viele Details, weil sie in kleiner Darstellung schnell verschwimmen.

Lightbox- und Vollbildbilder

Lightbox-Bilder werden angezeigt, wenn Besucher:innen ein Bild vergrößern.

Richtwerte:

• Desktop: ca. 1920 x 1080 Pixel
• Mobil: ca. 360 x 640 Pixel
• Dateigröße: ca. 200 bis 500 KB
• Format: WebP, AVIF oder JPEG

Lightbox-Bilder dürfen größer sein als normale Content-Bilder, sollten aber trotzdem komprimiert werden.

Tipp: Der Bildeditor von Shopify unterstützt dich dabei, deine Bilder zu bearbeiten, damit du sie im richtigen Format hochladen kannst.

Bilder für das Web optimieren: Tools und Tipps

Bilder sollten möglichst klein sein, ohne unscharf, verpixelt oder verzerrt zu wirken. Wenn du Bilder fürs Web vorbereitest, solltest du die Größe des Bildes, das Format und die Qualität der Bilder prüfen. So kannst du dein Web optimieren, ohne sichtbare Qualitätsverluste zu riskieren.

Bildkomprimierung

Bildkomprimierung reduziert die Größe von Dateien und kann die Ladezeit verbessern. Wichtig ist ein guter Kompromiss aus Qualität und geringer Größe von Dateien.

Achte außerdem darauf, dass die Proportionen erhalten bleiben. Falsch skalierte Bilder wirken schnell verzerrt. Besonders bei Produkt- und Kategoriebildern solltest du möglichst einheitliche Seitenverhältnisse nutzen. Vor dem Hochladen der Bilder lohnt sich ein kurzer Qualitätscheck im tatsächlichen Layout.

Verlustfreie Kompression

Bei der verlustfreien Kompression gehen keine sichtbaren Bildinformationen verloren. Sie eignet sich vor allem für Logos, Icons, Illustrationen, Schaubilder und einfache Grafiken.

Typische Formate sind PNG, GIF oder SVG. Für Logos und Icons ist SVG meist die beste Wahl, weil es flexibel skalierbar ist und scharf bleibt.

Verlustbehaftete Kompression

Bei der verlustbehafteten Kompression werden Bildinformationen entfernt, um Dateien stärker zu verkleinern. Bei zu starker Komprimierung kann die Qualität sichtbar leiden.

Sie eignet sich besonders für Fotos, Produktbilder, Banner und Blogbilder. Typische Formate sind JPEG, WebP und AVIF. WebP und AVIF sind für viele Website-Bilder sinnvoll, weil sie gute Qualität bei kleiner Größe von Dateien ermöglichen.

Tools zur Bildoptimierung

Zur Bildoptimierung kannst du verschiedene Tools nutzen:

• Photoshop: Zum Anpassen von Format, Qualität und Pixelgröße.
• Squoosh: Zum Vergleichen verschiedener Formate und Kompressionsstufen.
• TinyPNG: Für PNG- und JPEG-Komprimierung.
• Image Optimizer von Squirai: Shopify-App zur automatischen Bildoptimierung, inklusive neuer Bilder, Wasserzeichen und SEO-Anpassungen.
• Shopify Image Resizer: Kostenloses Tool für passende Bildgrößen in Marketingkanälen und Social Media.
• Bildoptimierungs-Apps: Für automatische Komprimierung, ALT-Texte und Optimierung beim Upload.

Prüfe wichtige Bilder nach dem Upload trotzdem im Layout deiner Website – besonders Hero-Bilder, Produktbilder und Banner.

So prüfst du deine Website auf verschiedenen Geräten

Bilder sollten nicht nur am Desktop gut aussehen, sondern auch auf Smartphones und Tablets richtig dargestellt werden. Prüfe deshalb besonders Hero-Bilder, Banner, Produktbilder und Bilder mit voller Seitenbreite in mehreren Ansichten.

Wenn du eine Website erstellen oder eine bestehende Website verbessern möchtest, solltest du Bildgrößen auf deiner Website immer auf Desktop, Tablet und Smartphone testen. So erkennst du, ob Bilder auf der Website richtig dargestellt werden oder ob einzelne Bereiche angepasst werden müssen.

Im Chrome-Browser kannst du dafür die Entwickler-Tools nutzen:

1. Klicke mit der rechten Maustaste auf das Bild.
2. Wähle „Untersuchen“.
3. Öffne bei Bedarf oben links das Auswahl-Icon.
4. Prüfe, wie groß das Bild geladen und dargestellt wird.
5. Wechsle in die mobile Ansicht, um Smartphone- und Tablet-Größen zu testen.

So erkennst du, ob ein Bild für das jeweilige Gerät zu groß, zu klein oder ungünstig zugeschnitten ist. Wenn ein vollbreites Desktop-Bild mobil nicht funktioniert, kann eine separate Bildvariante für Smartphones sinnvoll sein.

Lesetipp: In diesem Beitrag geben wir dir wertvolle Tipps zum Thema Kleidung fotografieren.

Wie können Bilder zur Suchmaschinenoptimierung beitragen?

Bilder können SEO unterstützen, wenn sie technisch sauber eingebunden und inhaltlich passend platziert sind. Optimierte Bilder für Suchmaschinen helfen dabei, Inhalte besser einzuordnen. Wichtig sind vor allem Dateinamen, ALT-Tags, Title-Tags und der Zusammenhang zwischen Bild und Text.

Nutze aussagekräftige Dateinamen

Der Dateiname hilft Suchmaschinen, den Bildinhalt besser einzuordnen. Benenne Bilder deshalb vor dem Upload möglichst konkret.

Achte dabei auf:

• keine Leerzeichen, sondern Bindestriche
• nur Kleinbuchstaben
• keine Umlaute
• keine Sonderzeichen
• möglichst genaue Beschreibung des Bildes

Statt IMG_4827.jpg eignet sich zum Beispiel frau-sitzt-am-schreibtisch.jpg. Für Produktbilder ist schwarze-ledertasche-damen.jpg aussagekräftiger als produktbild-1.jpg. Solche Bilder mit dem Dateinamen, der den Inhalt klar beschreibt, sind für Suchmaschinen und Nutzer:innen verständlicher.

Verwende ALT-Attribute

ALT-Tags beschreiben den Bildinhalt. Sie helfen Suchmaschinen und verbessern gleichzeitig die Barrierefreiheit.

Ein guter ALT-Tag ist kurz, verständlich, konkret und passend zum umliegenden Inhalt. Dein Fokus-Keyword kannst du verwenden, wenn es natürlich passt. Vermeide aber Keyword-Stuffing.

Ergänze sinnvolle Title-Tags

Title-Tags können zusätzliche Informationen liefern, etwa bei erklärenden Grafiken, Screenshots oder Produktdetails. Sie sind weniger wichtig als ALT-Tags, sollten den Bildinhalt aber sinnvoll ergänzen und nicht einfach den ALT-Tag wiederholen.

Platziere Bilder im passenden Textabschnitt

Suchmaschinen berücksichtigen auch den Kontext eines Bildes. Platziere Bilder deshalb dort, wo sie den Inhalt wirklich unterstützen: Produktbilder nahe an der Produktbeschreibung, Grafiken im passenden Erklärabschnitt und Screenshots direkt bei der jeweiligen Anleitung.

Wenn Dateiname, ALT-Tag, Title-Tag und umliegender Text zusammenpassen, können Suchmaschinen den Bildinhalt besser einordnen. Gleichzeitig wird deine Seite für Besucher:innen verständlicher.

Häufige Fehler bei der Bildoptimierung und wie du sie vermeidest

Bei Website-Bildern treten häufig ähnliche Probleme auf: falsche Größen, lange Ladezeiten, schlechte Qualität oder defekte Bildlinks. So vermeidest du die wichtigsten Fehler:

Falsche Größe von Bildern

Problem: Bilder sind zu groß oder zu klein und stören das Layout.

Lösung:

• Prüfe die empfohlenen Bildmaße deines Themes.
• Lade Bilder nur so groß hoch, wie du sie wirklich brauchst.
• Achte auf einheitliche Seitenverhältnisse, besonders bei Produktbildern.
• Lege im Website-Builder passende Darstellungsgrößen fest.

Lange Ladezeiten

Problem: Bilder laden langsam oder blockieren den Seitenaufbau.

Lösung:

• Komprimiere Bilder vor dem Upload.
• Nutze moderne Formate wie WebP oder AVIF.
• Verwende SVG für Logos und Icons.
• Setze Lazy Loading nur für Bilder ein, die weiter unten auf der Seite erscheinen.

Schlechte Bildqualität

Problem: Bilder wirken unscharf, verpixelt oder verzerrt.

Lösung:

• Nutze eine höher aufgelöste Ausgangsdatei.
• Komprimiere Bilder nicht zu stark.
• Erhalte die ursprünglichen Proportionen.
• Verwende PNG oder SVG für Grafiken mit klaren Kanten.

Bilder werden nicht angezeigt

Problem: Defekte Bildlinks verhindern, dass Bilder geladen werden.

Lösung:

• Prüfe die Bild-URL.
• Kontrolliere Dateiname und Dateiendung, zum Beispiel .jpg, .png, .webp oder .svg.
• Achte auf korrekte Groß- und Kleinschreibung.
• Ersetze gelöschte oder verschobene Dateien im Backend.

Zukünftige Trends in der Bildoptimierung

Bildoptimierung wird zunehmend automatisiert. Moderne Bildformate, KI-gestützte Tools und responsive Ausspielung helfen dabei, Bilder schneller und passender bereitzustellen. Trotzdem solltest du wichtige Bilder weiterhin manuell prüfen, vor allem Produktbilder, Hero-Bilder und Banner.

• Moderne Bildformate: WebP und AVIF gehören inzwischen zu den wichtigsten Formaten für schnelle Websites. WebP ist für viele Website-Bilder ein guter Standard, während AVIF besonders bei großen Bildern wie Hero-Bildern oder hochwertigen Produktfotos sinnvoll sein kann.
• Bildoptimierung mithilfe von KI: KI kann Bilder automatisch analysieren, zuschneiden, skalieren, komprimieren oder in passende Formate umwandeln. Gerade im E-Commerce spart das Zeit, wenn viele Produktbilder einheitlich vorbereitet werden müssen. Wichtig bleibt aber, dass Farben, Proportionen und Produktdetails korrekt dargestellt werden.
• Automatische Bildoptimierung: Viele Shop-Systeme, Bildoptimierungs-Apps und CDNs übernehmen heute Aufgaben wie Komprimierung, Formatwahl und Skalierung. Dadurch können Bilder je nach Browser, Gerät und Bildschirmgröße passend ausgespielt werden.
• Responsive Ausspielung: Statt ein großes Bild für alle Geräte zu laden, erhalten Desktop, Tablet und Smartphone passende Varianten. Das verbessert Ladezeiten, Bildschärfe und Nutzererfahrung, besonders bei mobilen Besucher:innen.
• Core Web Vitals: Große Bilder im sichtbaren Bereich, etwa Hero-Bilder oder Produktbilder, können die Core Web Vitals beeinflussen. Sie sollten deshalb schnell laden und nicht unnötig groß sein. Lazy Loading ist hier nicht immer sinnvoll, sondern eher für Bilder weiter unten auf der Seite.
• Barrierefreiheit bei Bildern: Aussagekräftige ALT-Tags, klare Bildinhalte, ausreichender Kontrast und der Verzicht auf unnötige Animationen machen Bilder für mehr Nutzer:innen zugänglich. So wird Bildoptimierung nicht nur technischer, sondern auch nutzerfreundlicher.

Fazit

Die optimale Größe von Bildern für deine Website hängt immer vom Einsatzbereich ab. Hero-Bilder, Produktbilder, Logos und Thumbnails brauchen unterschiedliche Pixelmaße, Formate und Dateigrößen. Entscheidend ist, dass Bilder scharf genug für eine professionelle Darstellung sind, aber nicht unnötig groß geladen werden.

Für viele Website-Bilder sind moderne Formate wie WebP oder AVIF sinnvoll. Ergänzend helfen Komprimierung, einheitliche Seitenverhältnisse, sprechende Dateinamen, passende ALT-Tags und regelmäßige Tests auf mobilen Geräten. So kannst du deine Website optimal verbessern und Bilder-SEO, Ladezeit und Nutzererfahrung gleichzeitig stärken.