Zum Hauptinhalt springen

Bildausschnitt (Cropping)

Cropping hilft Ihnen, den sichtbaren Bildausschnitt an das Seitenverhältnis eines Inhaltselements anzupassen. So vermeiden Sie, dass wichtige Bildbereiche ungünstig abgeschnitten werden – besonders in der mobilen Ansicht.

Schnellstart: So gehen Sie vor

  1. Zuerst Format klären (Seitenverhältnis/Mindestmaß)
    Prüfen Sie das passende Format je Inhaltselement, bevor Sie den Ausschnitt feinjustieren.
  2. Cropping im Element setzen (falls verfügbar)'
    Ausschnitt wählen, zentrale Motivteile sichern (Gesicht/Text/Objekte).
  3. Frontend/Preview prüfen (insbesondere mobil)
    Der entscheidende Check, ob der Ausschnitt wirklich überall funktioniert.

Backend-Cropping: Wo ist das aktuell möglich?

Ein Bildbeschnitt direkt im TYPO3-Backend ist derzeit nur in folgenden Inhaltselementen verfügbar:

  • Bühne
  • Teaser-Karte

Für alle anderen Elemente gilt: Bitte verwenden Sie Bilder im passenden Seitenverhältnis bzw. schneiden Sie Bilder bei Bedarf vorab extern zu.

Cropping im Backend: praxistauglicher Ablauf

  1. Öffnen Sie das Inhaltselement (Bühne oder Teaser-Karte) und wählen Sie das eingebundene Bild aus.
  2. Öffnen Sie den Bildbearbeitungs-/Cropping-Editor (dort sehen Sie den Ausschnitt-Rahmen).
  3. Stellen Sie den Ausschnitt so ein, dass die zentrale Bildaussage sicher im Rahmen bleibt (nicht nur „auf Desktop schön“).
  4. Speichern Sie und prüfen Sie den Ausschnitt im Frontend/Preview, insbesondere mobil.

Praxis-Tipp: Wenn ein Motiv nur mit einem extrem engen, „perfekten“ Ausschnitt funktioniert, ist externes Zuschneiden meist die bessere Lösung – oder ein anderes Motiv.

Ansicht des Editors zur Bildbearbeitung
Bild: ZIM
Editor zur Bildbearbeitung

Wenn kein Backend-Cropping verfügbar ist

  • Wählen Sie das Bild möglichst bereits im passenden Seitenverhältnis (siehe Bildformate je Inhaltselement).
  • Wenn das Motiv nur mit einem sehr spezifischen Ausschnitt funktioniert, ist externes Zuschneiden meist die bessere Lösung.
  • Prüfen Sie den Bildausschnitt immer im Frontend/Preview, insbesondere mobil.

Mini-Checkliste (vor Veröffentlichung)

  • Passt der Bildausschnitt auch mobil?
  • Bleiben zentrale Motive (Gesichter, Text, wichtige Objekte) sichtbar?
  • Ist die Bilddatei nicht unnötig groß?

Häufige Fehler, die Sie schnell vermeiden können

  • Nur im Backend beurteilt → im Frontend wirkt der Ausschnitt (besonders mobil) anders.
  • Text im Bild → wird durch Cropping leicht abgeschnitten; wenn Text wichtig ist, besser als echten Text im Inhalt abbilden oder extern sauber vorbereiten.
  • Zu kleines Ausgangsbild → Cropping kann dann zwar „passen“, aber das Bild wirkt unscharf (Qualität vor dem Upload prüfen).