Bildformate je Inhaltselement

Damit Bilder im Frontend sauber wirken (und nicht unschön beschnitten oder unscharf werden), sollten Sie sich am empfohlenen Seitenverhältnis und an den Mindestmaßen der jeweiligen Inhaltselemente orientieren. Entscheidend ist dabei weniger „die exakte Pixelzahl“, sondern vor allem: passt das Seitenverhältnis zum Element?

• Seitenverhältnis vor Pixelzahl: Ein Bild im falschen Verhältnis wird fast immer ungünstig beschnitten.
• Nicht zu klein hochladen: Wenn TYPO3 stark hochskalieren muss, leidet die Qualität sichtbar.
• Mobil mitdenken: Motive mit „kritischem Bildrand“ (Gesichter, Text im Bild, wichtige Details) vorab prüfen.

Bühne 

• Empfohlen: mind. 1170 × 470 px (bzw. dieses Seitenverhältnis)
• Hinweis: Der Bildausschnitt kann im Backend per Cropping angepasst werden.

Text mit Bild (Variante „Nur Bild“) 

• Empfohlen: mind. 1170 × 470 px (bzw. dieses Seitenverhältnis)

Text mit Bild (Variante „Text mit Bild“) 

• Querformat
  • Mindestmaß: mind. 430 × 323 px (bzw. dieses Seitenverhältnis)
• Hochformat
  • Mindestmaß: mind. 100 × 133 px (bzw. dieses Seitenverhältnis)

Teaser-Karte 

• Standard: mind. 423 × 223 px (bzw. dieses Seitenverhältnis)
• Hinweis: Der Bildausschnitt kann im Backend per Cropping angepasst werden.
• Bitte zusätzlich beachten: Hinweise zu „Fit-Content-Image“ (wenn im Projekt/Element relevant).

Galerie 

• Bilder: mindestens 2 Bilder, jeweils mind. 1024 × 768 px (bzw. dieses Seitenverhältnis)
• Thumbnails:134 × 134 px (quadratisch)

Hinweis: Bei Abweichungen erfolgt ein Bildbeschnitt von unten rechts.

Aktuell ist Bildbeschnitt direkt im TYPO3-Backend nur in diesen Elementen verfügbar:

• Bühne
• Teaser-Karte

Für alle anderen Elemente gilt: Bitte Bilder passend vorbereiten (Seitenverhältnis/Mindestmaß), damit kein ungünstiger automatischer Beschnitt entsteht.

• Passt das Seitenverhältnis zum Element (Bühne/Teaser/Galerie etc.)?
• Ist das Bild groß genug, ohne sichtbar unscharf zu werden?
• Sind wichtige Bildbereiche auch in mobiler Ansicht noch gut erkennbar?
• Enthält das Bild Text? Dann prüfen, ob dieser mobil lesbar bleibt (oder besser im Inhalt als Text abbilden).