Bildgrößen

Welche Größe Bilder und Videos mindestens haben müssen, damit sie in jeder Situation scharf stehen. Die Maße folgen aus den Layoutbreiten und der Bildpipeline, die Breiten von 800, 1280 und 1920 px erzeugt und nie vergrößert. Stand 1. Oktober 2026.

Übersicht

Situation	Darstellung	Mindestgröße	Format
Produktbild freigestellt im Seitenkopf	bis 736 px breit	1600 px Breite, Höhe frei	PNG mit Alphakanal
Produktbild als Teaser im Inhalt	quadratisch, Karte bis ca. 490 px, mobil volle Breite	1600 × 1600 px	JPG oder PNG, Hintergrund im Bild
Bilder im Fließtext	Absatz 832 px · Inhalt bis 1344 px · Layout bis 1568 px · Viewport volle Fensterbreite	Absatz 1600 px · Inhalt 1920 px · Layout und Viewport 1920 px, besser 2560 px (Breite)	JPG, Standard 3:2
Video im Hero	volle Fensterbreite, füllt die Fläche	1920 × 1080 px (Desktop) und 1280 × 720 px (bis 768 px Fensterbreite)	MP4 (H.264), ohne Ton, nahtloser Loop 10–20 s
Bild im Hero	volle Fensterbreite, füllt die Fläche	1920 × 1080 px, besser 2560 × 1440 px	JPG
Bild im Seitenkopf von Unterseiten	21:9, bis 1344 px breit	1920 × 823 px	JPG, 21:9
Bilder in der Layoutbreite	bis 1568 px breit	1920 px Breite, besser 2560 px	JPG
Bild im Media Object	etwa halbe Breite, bis ca. 920 px	1920 × 1280 px (3:2)	JPG; Variante Freisteller: PNG mit Alphakanal, 1920 px Breite
Meldung: erstes Bild unter der Headline	21:9, bis 1344 px breit	1920 × 823 px, besser 2560 × 1097 px	JPG, 21:9
Personenkarten	3:2, bis ca. 490 px breit	1200 × 800 px, besser 1600 × 1067 px	JPG, 3:2

Im Einzelnen

Produktbild freigestellt im Seitenkopf

Produktseite, rechte Spalte

Darstellung: bis 736 px breit
Mindestgröße: 1600 px Breite, Höhe frei
Format: PNG mit Alphakanal
Bauteil: heroes/hero-split.html

Ohne leeren Rand freigestellt.
Der Schatten darf im Bild bleiben.

Produktbild als Teaser im Inhalt

Produktkacheln (tiles--object)

Darstellung: quadratisch, Karte bis ca. 490 px, mobil volle Breite
Mindestgröße: 1600 × 1600 px
Format: JPG oder PNG, Hintergrund im Bild
Bauteil: sections/tiles.html (variant object)

Anthrazit · #3B4A5B · RGB 59 / 74 / 91

Hintergrund Anthrazit #3B4A5B (RGB 59 / 74 / 91), bei allen Produkten derselbe Ton.
Maschine mit ca. 8 % Luft zum Rand, auf dem Boden stehend, waagerecht mittig.
Keine Schrift im Bild.

Bilder im Fließtext

z. B. Meldung; im CMS in vier Breiten wählbar

Darstellung: Absatz 832 px · Inhalt bis 1344 px · Layout bis 1568 px · Viewport volle Fensterbreite
Mindestgröße: Absatz 1600 px · Inhalt 1920 px · Layout und Viewport 1920 px, besser 2560 px (Breite)
Format: JPG, Standard 3:2
Bauteil: components/figure.html

3:2 bei 1600 px Breite: 1600 × 1067 px; bei 1920 px: 1920 × 1280 px.

Video im Hero

Startseiten mit Film

Darstellung: volle Fensterbreite, füllt die Fläche
Mindestgröße: 1920 × 1080 px (Desktop) und 1280 × 720 px (bis 768 px Fensterbreite)
Format: MP4 (H.264), ohne Ton, nahtloser Loop 10–20 s
Bauteil: heroes/hero-video.html

Richtwerte ca. 4,5 MB und 2,2 MB.
Dazu ein Posterbild 1920 × 1080 px = erstes Bild des Videos.
Hauptmotiv mittig, mobil wird hochkant beschnitten.

Bild im Hero

Startseiten, Vollbild

Darstellung: volle Fensterbreite, füllt die Fläche
Mindestgröße: 1920 × 1080 px, besser 2560 × 1440 px
Format: JPG
Bauteil: heroes/hero-image.html

Links steht der Text auf einem Verlauf: Motiv eher rechts oder mittig.
Fokuspunkt mitliefern.

Bild im Seitenkopf von Unterseiten

hero-page mit Bild

Darstellung: 21:9, bis 1344 px breit
Mindestgröße: 1920 × 823 px
Format: JPG, 21:9
Bauteil: heroes/hero-page.html

Bilder in der Layoutbreite

Bildstrecken, breite Figuren

Darstellung: bis 1568 px breit
Mindestgröße: 1920 px Breite, besser 2560 px
Format: JPG
Bauteil: components/figure.html (width layout)

Bild im Media Object

Bild neben Text

Darstellung: etwa halbe Breite, bis ca. 920 px
Mindestgröße: 1920 × 1280 px (3:2)
Format: JPG; Variante Freisteller: PNG mit Alphakanal, 1920 px Breite
Bauteil: components/media-slot.html

Meldung: erstes Bild unter der Headline

Meldung im Detail

Darstellung: 21:9, bis 1344 px breit
Mindestgröße: 1920 × 823 px, besser 2560 × 1097 px
Format: JPG, 21:9
Bauteil: heroes/hero-page.html

21:9 schneidet oben und unten viel ab: Wichtiges in die Mitte.

Personenkarten

Portraits im Personenraster

Darstellung: 3:2, bis ca. 490 px breit
Mindestgröße: 1200 × 800 px, besser 1600 × 1067 px
Format: JPG, 3:2
Bauteil: sections/team-grid.html

Kopf im oberen Drittel, Schultern im Bild, Gesicht mittig.
Dasselbe Foto erscheint im persönlichen Kontaktblock als runder Ausschnitt.

Allgemein

„Mindestens“ heißt: auf großen Bildschirmen auch bei doppelter Pixeldichte noch scharf. Größere Dateien sind willkommen, das System rechnet sie herunter; kleinere werden nicht vergrößert.
Fotos als JPG oder PNG in höchster verfügbarer Qualität, keine Screenshots.
Keine Schrift, Logos oder Wasserzeichen im Bild, außer wo ausdrücklich gewünscht.
Ein Bild je Motiv; die Ausschnitte für die verschiedenen Formate setzt das System.