Bildgrößen für Websites: Hero, Blog, Produkt, Logo, OG | We.Inc
Eine Tabelle mit Pixelgrößen, Seitenverhältnissen und Dateigrößenbudgets für jeden Bildplatz auf einer Website, plus ein Rechner, der deine Layoutbreite in srcset-Größen umwandelt.
Bemiss jedes Bild nach dem breitesten Platz, den es ausfüllt, und verdopple diese Breite für Bildschirme mit hoher Pixeldichte. Ein Hero über die volle Breite funktioniert mit 2560 mal 1440, ein Bild im Blogtext mit 1600 Breite, ein quadratisches Produktfoto bei Shopify mit 2048 mal 2048 und ein Bild zum Teilen in sozialen Netzwerken mit 1200 mal 630. Halte Fotos unter etwa 200 KB.
Schnelle Größen für die häufigsten Bildplätze
Bildplatz
Zu exportierende Pixel
Seitenverhältnis
Hero über volle Breite
Bild im Blogtext
Produktfoto (Shopify)
Vorschaubild (og:image)
Logo
SVG oder PNG in 2x seiner Anzeigegröße
Entspricht dem Logo
Für ein Hero- oder Blogbild gibt es keinen offiziellen Standard. Was es gibt, ist einfache Rechnung: wie viele CSS-Pixel breit der Platz ist, mal die Pixeldichte, auf der das Bild scharf aussehen soll. Die Tabelle unten wendet diese Regel auf jeden gängigen Bildplatz an, und wo eine Plattform eine eigene Zahl veröffentlicht, etwa Shopify für Produkte oder Facebook für Vorschaubilder, nutzen wir den veröffentlichten Wert.
Such den Bildplatz in der Tabelle oder miss mit dem Inspektor des Browsers, wie breit er in deinem Layout dargestellt wird.
Gib diese CSS-Breite in den Rechner ein und wähle die Pixeldichten, die du abdecken willst.
Exportiere die aufgeführten Breiten, komprimiere jede davon und füge das erzeugte srcset in dein img-Tag ein.
Vergleiche die Dateigröße vor dem Hochladen mit der Budget-Spalte.
Exportiere in 2x der Darstellungsbreite; 3x erhöht das Gewicht, ohne dass es bei einem Foto viele sehen.
Beschneide Bilder vor dem Hochladen auf das Seitenverhältnis, damit das Layout sie nie strecken oder mit Balken versehen muss.
Setze width- und height-Attribute an jedes img, damit der Browser den Platz reservieren kann, bevor die Datei ankommt.
Nutze für Logos und Icons bevorzugt SVG, denn eine Vektordatei bleibt in jeder Größe scharf und ist ein kleiner Download.
Belasse das Vorschaubild auch bei schmalen Websites bei 1200 mal 630, da soziale Apps es unabhängig von deinem Layout abrufen.
Häufige Fragen
Wie groß sollte ein Hero-Bild sein?
Für einen Hero über die volle Browserbreite exportierst du 2560 mal 1440 für große Bildschirme und ergänzt im srcset Versionen mit 1280 und 1920 Breite, damit Smartphones und Laptops weniger laden. Sitzt der Hero in einem Container mit 1200 Pixeln, reichen 2400 Breite.
Wie groß sind Produktbilder bei Shopify?
Laut Shopifys Hilfe-Center werden quadratische Produktbilder meist mit 2048 mal 2048 Pixeln am besten dargestellt. Uploads dürfen bis zu 5000 mal 5000 Pixel groß und müssen kleiner als 20 MB sein. Halte alle Produktfotos im gleichen Verhältnis, damit die Raster der Kollektionen sauber aussehen.
Wie groß ist ein Open-Graph-Vorschaubild?
Facebooks Dokumentation zum Teilen empfiehlt mindestens 1200 mal 630 Pixel, ein Verhältnis von 1.91 zu 1 und eine Datei unter 8 MB. Kleinere Bilder funktionieren bis hinunter zu 600 mal 315, werden aber verkleinert angezeigt.
Wie groß sollte die Datei sein, nicht nur die Pixel?
Pixelgröße und Dateigröße sind zwei verschiedene Dinge. Ein Foto mit 1600 Breite, als WebP oder gut komprimiertes JPEG gespeichert, landet meist zwischen 80 und 200 KB. Liegt ein Bild weit darüber, senke die Qualitätseinstellung oder wechsle das Format, bevor du die Abmessungen verkleinerst.
Brauche ich für Mobilgeräte andere Bilder?
Meist keine anderen Ausschnitte, sondern nur kleinere Kopien derselben Datei im srcset. Nutze das picture-Element nur, wenn ein Smartphone einen anderen Ausschnitt braucht, etwa eine hohe Version eines breiten Banners.
Die eine Regel hinter jeder Zahl
Browser legen Seiten in CSS-Pixeln an. Ein Smartphone oder Retina-Laptop packt zwei oder drei Gerätepixel in jeden davon, daher wirkt ein Bild, das genau in seiner CSS-Breite exportiert wurde, dort unscharf. Die doppelte Breite behebt das für fast alle.
Über 2x hinauszugehen, lohnt sich bei Fotos selten. Die Datei wird ungefähr noch einmal doppelt so schwer, und das zusätzliche Detail fällt bei normalem Betrachtungsabstand kaum auf.
Das Seitenverhältnis zählt mehr als exakte Pixel
Die meisten Layouts skalieren Bilder passend zu ihrer Spalte, daher entscheidet das Verhältnis, wie ein Bild auf der Seite sitzt. Wähle ein Verhältnis pro Bildplatz, beschneide jedes Bild darauf, und das Raster bleibt bei jeder Breite ordentlich.
Übliche Wahl sind 16:9 für Heroes und Artikelbilder, 1:1 für Produkte und Avatare, 4:5 für Karten im Hochformat und 1.91:1 für Vorschaubilder.
Budgets halten Seiten schnell
Das größte Bild im sichtbaren Bereich ist oft das Element, das über den Largest Contentful Paint entscheidet. Ein schwerer Hero bremst die Seite stärker als jede andere einzelne Datei, also verdient er die meiste Sorgfalt.
Lege ein Budget pro Bildplatz fest und halte dich daran. Passt ein Foto bei guter Qualität nicht ins Budget, probiere WebP oder AVIF, bevor du die Auflösung senkst.
Bildgrößen für jeden Bildplatz
Die Breiten der Bildplätze entsprechen typischen Desktop-Layouts. Miss dein eigenes Theme und wende die 2x-Regel an, falls deine Werte abweichen.
Exportgrößen, Verhältnisse und Dateibudgets pro Bildplatz
Bildplatz
CSS-Breite
Exportpixel
Verhältnis
Budget
Hinweis
Hero über volle Breite
100vw (bis 1280+)
250 KB
Ergänze Kopien mit 1280 und 1920 Breite im srcset
Hero im Container
200 KB
Doppelte Containerbreite
Bannerstreifen
150 KB
Halte Text von den äußeren Rändern fern, die Seiten werden auf Smartphones beschnitten
Beitragsbild im Blog
800 bis 1200
1600 x 900 bis 2400 x 1350
150 KB
Passe es an die Inhaltsbreite deines Themes an
Bild im Blogtext
720 bis 800
16:9 oder 3:2
150 KB
Textspalten sind schmaler als Heroes
Produktfoto
Rasterkarte
200 KB
Shopifys empfohlene quadratische Größe
Kollektions- oder Kategoriekarte
800 x 800 oder 800 x 1000
1:1 oder 4:5
80 KB
Nutze im ganzen Raster ein einziges Verhältnis
Team- oder Avatarfoto
40 KB
Oft im Kreis angezeigt, zentriere das Gesicht
Logo im Header
etwa 160
SVG oder PNG mit 320 Breite
Wie das Logo
20 KB
SVG bleibt in jeder Größe scharf
Hintergrundtextur
150 KB
Hinter Text ist geringere Qualität in Ordnung
Vorschaubild (og:image)
Nicht auf der Seite sichtbar
Unter 8 MB (deutlich weniger anstreben)
Facebooks empfohlene Größe
Favicon
16 bis 32
SVG plus 32 x 32 ICO oder PNG
5 KB
Alle Größen findest du im Favicon-Leitfaden
Markup für einen responsiven Hero
Hero über volle Breite mit drei Breiten
Der Browser wählt die kleinste Datei, die den Viewport bei der Pixeldichte des Bildschirms noch abdeckt. width und height legen das Verhältnis fest, damit beim Laden nichts springt.
Bildgrößen-Rechner
Gib die Breite in CSS-Pixeln ein, die ein Bild in deinem Layout ausfüllt, und wähle die abzudeckenden Pixeldichten. Der Rechner listet die zu exportierenden Pixelbreiten auf und schreibt das passende srcset.