Bildgrößen für Websites: Die richtigen Maße für Hero, Blog und Galerie

Die richtige Bildgröße für eine Website ergibt sich aus der Breite, die das Bild im Layout einnimmt, multipliziert mit zwei für hochauflösende Bildschirme. Ein Bild in einer 800 Pixel breiten Textspalte braucht also etwa 1.600 Pixel Breite, ein Titelbild über die volle Fensterbreite 1.920 bis 2.560 Pixel. Kleinere Varianten für Smartphones liefern Sie zusätzlich über srcset aus, damit niemand unnötig große Dateien lädt.

Wie Pixel, ppi und dpi zusammenhängen, erklärt der Ratgeber Pixel, Auflösung und Bildformate. Hier geht es um konkrete Maße.

Die Übersicht: Richtwerte je Einsatz

Die Werte sind Richtgrößen für verbreitete Layouts mit einer Inhaltsbreite um 1.200 Pixel. Entscheidend ist immer Ihr eigenes Layout. Ist Ihre Textspalte schmaler, etwa 680 Pixel, genügen für Inhaltsbilder entsprechend kleinere Exporte um 1.360 Pixel. Ist sie breiter, wachsen die Werte mit.

So ermitteln Sie die passende Größe selbst

1. Anzeigebreite messen: Öffnen Sie die Seite am größten vorgesehenen Bildschirm, rufen Sie die Entwicklerwerkzeuge auf und lesen Sie die Breite des Bildelements in CSS-Pixeln ab.
2. Mit zwei multiplizieren: Viele Smartphones und Laptops stellen ein CSS-Pixel mit zwei oder mehr physischen Bildpunkten dar. Faktor zwei ist ein guter Kompromiss zwischen Schärfe und Dateigröße, darüber ist der sichtbare Gewinn meist gering.
3. Kleinere Stufen ergänzen: Für schmalere Bildschirme erzeugen Sie zusätzliche Varianten, etwa 480, 800 und 1.200 Pixel.
4. Seitenverhältnis festlegen: Schneiden Sie alle Bilder einer Art auf dasselbe Verhältnis zu.

Hero-Bilder: groß, aber nicht schwer

Das große Bild im Kopfbereich ist oft das erste, was Besucher sehen, und häufig das größte Element der Seite. Google misst mit dem Wert Largest Contentful Paint, wie schnell dieses größte sichtbare Element erscheint. Deshalb gilt für Hero-Bilder:

• Mehrere Größen: Ein Smartphone mit 400 CSS-Pixeln Breite braucht kein 2.560 Pixel breites Bild. Mit srcset und sizes wählt der Browser selbst.
• Eigener Ausschnitt für Mobilgeräte: Ein breites Panoramabild wird auf dem Smartphone zu einem schmalen Streifen. Mit dem picture-Element liefern Sie dort einen enger geschnittenen Ausschnitt im Hoch- oder Quadratformat. Mehr dazu im Ratgeber Responsive Webdesign.
• Sofort laden: Das Hero-Bild darf nicht verzögert geladen werden. Statt loading="lazy" hilft hier fetchpriority="high".
• Text nicht ins Bild: Überschriften gehören als HTML über das Bild, nicht in die Bilddatei.

Beitragsbilder und Bilder im Fließtext

Beitragsbilder erscheinen meist an mehreren Stellen: groß im Artikel, verkleinert in der Übersicht, als Vorschau beim Teilen. Legen Sie ein Original in ausreichender Größe an und lassen Sie daraus die Varianten erzeugen. Ein einheitliches Seitenverhältnis verhindert, dass Kacheln in Übersichten unterschiedlich hoch werden.

Bilder in der Textspalte sollten genauso breit angezeigt werden wie der Text, damit die Lesespalte ruhig bleibt. Bei Screenshots mit kleiner Schrift lohnt sich manchmal eine größere Variante, die sich per Klick öffnen lässt.

Galerien: kleine Vorschau, große Ansicht

In Galerien werden viele Bilder gleichzeitig angezeigt. Hier zählt jedes Kilobyte:

• Vorschaubilder in der tatsächlichen Rastergröße mal zwei exportieren, nicht das Original verkleinert anzeigen.
• Vorschaubilder unterhalb des ersten Bildschirms mit loading="lazy" verzögert laden.
• Die Großansicht erst laden, wenn jemand ein Bild öffnet.
• Für ein ruhiges Raster einheitliche Formate verwenden oder bewusst ein Mauerwerk-Layout mit unterschiedlichen Höhen wählen.

Dateigröße: die zweite Hälfte der Rechnung

Pixelmaße sind nur ein Teil. Wie groß die Datei wird, hängt von Format, Qualitätsstufe und Motiv ab. Ein Foto mit vielen feinen Details wird größer als eine ruhige Fläche. Als grobe Orientierung:

Mit den Formaten WebP und AVIF und einer Qualitätsstufe im mittleren Bereich lassen sich diese Werte bei den meisten Fotos ohne sichtbaren Verlust erreichen. Welches Format für welches Motiv passt, vergleicht der Artikel WebP, AVIF, JPG oder PNG.

Mehrere Größen mit srcset ausliefern

Damit jedes Gerät die passende Datei bekommt, beschreiben Sie im HTML alle verfügbaren Varianten. Der Browser rechnet dann selbst aus, welche er braucht:

<img src="/bilder/werkstatt-1200.webp"
     srcset="/bilder/werkstatt-480.webp 480w,
             /bilder/werkstatt-800.webp 800w,
             /bilder/werkstatt-1200.webp 1200w,
             /bilder/werkstatt-1600.webp 1600w"
     sizes="(min-width: 860px) 800px, 100vw"
     width="1600" height="900"
     alt="Arbeitsplatz mit Grafiktablett und Farbmustern">

Die Angabe sizes beschreibt, wie breit das Bild im Layout angezeigt wird: hier 800 Pixel ab einer Fensterbreite von 860 Pixeln, darunter die volle Fensterbreite. Ein Smartphone mit 400 Pixeln Breite und doppelter Pixeldichte lädt damit die 800-Pixel-Variante, ein Desktop-Bildschirm mit doppelter Dichte die 1.600-Pixel-Variante.

Lohnt sich Faktor drei?

Manche Smartphones haben eine dreifache Pixeldichte. Theoretisch bräuchte ein 400 Pixel breites Bild dort 1.200 Pixel. In der Praxis ist der Unterschied zwischen zweifacher und dreifacher Auflösung bei Fotos auf so kleinen Bildschirmen kaum zu sehen, die Datei wird aber deutlich größer. Für die meisten Websites ist Faktor zwei der bessere Kompromiss. Ausnahmen sind Bilder mit feiner Schrift oder Linien, die lieber als SVG umgesetzt werden.

Bildgrößen in Content-Management-Systemen

Systeme wie WordPress erzeugen beim Hochladen automatisch mehrere Größen und schreiben srcset selbst ins HTML. Prüfen Sie in den Medieneinstellungen und im Theme, welche Größen tatsächlich entstehen, und laden Sie Originale nicht unnötig groß hoch. Ein Kamerafoto mit 6.000 Pixeln Breite belegt Speicherplatz, ohne dass es je in dieser Größe angezeigt wird. Ein Original mit 2.560 Pixeln Breite reicht für fast jeden Einsatz.

Breite und Höhe immer angeben

Geben Sie im HTML bei jedem Bild width und height an, passend zum Seitenverhältnis. Der Browser reserviert dann schon vor dem Laden den richtigen Platz, und der Text springt nicht nach unten, sobald das Bild erscheint. Diese Layoutverschiebung misst Google als Cumulative Layout Shift. Per CSS skaliert das Bild trotzdem flexibel mit dem Container.

Checkliste vor dem Hochladen

• Anzeigebreite im Layout bekannt und Exportbreite etwa doppelt so groß
• einheitliches Seitenverhältnis für alle Bilder einer Art
• kleinere Varianten für Smartphones vorhanden oder automatisch erzeugt
• modernes Format mit passender Qualitätsstufe
• Metadaten wie Aufnahmeort entfernt
• sprechender Dateiname
• width, height und Alternativtext gesetzt
• Hero-Bild ohne Lazy Loading, alle anderen mit

Wer diese Punkte einmal in einen festen Ablauf übersetzt, etwa als Exportvorlage im Grafikprogramm, spart bei jedem neuen Bild Zeit und bekommt schärfere Bilder bei kürzerer Ladezeit.