Artikel

TYPO3: Optimale (responsive) Bilddarstellung auf vielen Displaygrößen

Mit dem Aufkommen unterschiedlicher Darstellungsgeräte und deren variierenden Displaygrößen ist die variable Darstellung von Bildern wichtiger geworden. Denn ein gut aussehendes Bild im 16:9 Format auf einem großen Desktop-Monitor wirkt auf einem Smartphone-Display im Hochformat flach und unscheinbar, wenn es einfach auf eine schmale Display-Breite herunterskaliert wird. Oft rückt auch der interessante Bildteil aus dem Fokus sobald die Displagyröße verändert ist. Hinzu kommen Performace-Herausforderungen, denn gängige JavaScript/jQuery-Lösungen laden auch für kleine Displays große Bilddaten, von denen dann nur ein kleiner Teil durch ein Schlüsselloch gezeigt wird. Gerade im Zeitalter, in dem "mobile first" in der Google-Bewertung für das Page Ranking gilt, ein echter Nachteil. Es werden unbenötigte und damit zu viele Daten übertragen. Besser ist es, wenn für kleine Displays nur der interessante Bildausschnitt ausgeschnitten, als eigenes Bild generiert und dann bei Bedarf für das entsprechende Endgerät ausgeliefert wird. Die Lösung dieser Probleme wird in Konzepten grob als responsive Bilddarstellung umrissen. Tatsächlich steckt hinter dem Begriff „responsive“ eine ganz eigene, logische Welt mit vielen effektiven, aber auch uneffektiven Lösungsmöglichkeiten.

Wer TYPO3 als CMS im Einsatz hat, dem stehen effektive Werkzeuge für eine responsive Bilddarstellung auf allen Medien zur Verfügung. Dieser Artikel stellt Ihnen einen komfortablen Weg der Bild-Bearbeitung mit TYPO3 vor, mit dem Redakteure bei intuitiver Bedienung einen maximalen Einfluss auf die responsive Bilddarstellung haben.

Das Bildbearbeitungs-Tool von TYPO3 CMS

Crop- (aufgehellt), Focus- (gelb) und Covered Areas (gestrichelt), die in TYPO3 für jede Displaygröße (rechts im Bild) festgelegt werden können. Bildquelle: https://docs.typo3.org.
Übersicht der beschnittenen Bilder für mehrere Displaygrößen.

TYPO3 behandelt jedes Bild, welches auf der Website integriert wird, als ein eigenes Element und erstellt dafür in jeder definierten Displaygröße eine Kopie vom Original und speichert diese Bilddatei im Dateisystem. Diese Erstellung kann individuell vom Redakteur beeinflusst werden. Bilder können so als Content Element

  • beschnitten werden (Crop),

  • es können Fokusbereiche (FocusAreas) für jede Displaygröße definiert werden

  • es können zudem potenziell verdeckte Bereiche (Covered Area) im Bild, z.B. durch überlagerte Headlines oder Texte, dem Redakteur angezeigt werden.

Die Angaben dieser Daten erfolgt in der Content-Pflege, direkt an jedem einzelnen Bild. Eine zusammenfassende Vorschau bei der Bildeingabe zeigt dem Redakteur, wie das Bild in der jeweilig definierten Displaygröße angezeigt wird.

So wird es gemacht:

Nachdem ein Bild für den neuen Webseiteninhalt ausgewählt wurde, finden Sie in den Bildeigenschaften eine Übersicht der Darstellungen auf den im Content-Management-System definierten Bildschirmgrößen. Zu Beginn wird das Bild auf allen Medien gleich dargestellt. Hierzu dienen Standard-Vorgaben. Diese können die Redakteure aber mit einem Klick auf den Button „Editor öffnen“ ändern.

Im linken Teil des Editors befindet sich das Bild. Auf diesem Bild sind drei beschriftete Bereiche (Crop, Focus und Covered Area), die mit der Maus mit gedrückter (linker) Maustaste an ihren Rändern verändert werden können.
Im rechten Bereich ist die Auswahl der definierten Display-Größen. Die Standard-Größe ist geöffnet. Je nach Konfiguration können auch die Seitenverhältnisse der Crop-Area ausgewählt werden (z.B. 1:1, 16:9 oder „frei“) werden.
Einem Klick auf die Headlines können die Akkordeons der anderen Display-Größenbereiche geöffnet werden.
Über den Button "Akzeptieren" (unten rechts) werden die vorgenommenen Bildeinstellungen gespeichert. Nun übernimmt die Logik der Webseitendarstellung die weitere Arbeit.

Fazit

Effektive Bilddarstellungen unter der Berücksichtigung unterschiedlicher Displaygrößen und ohne aufwändige manuelle Bildbearbeitung für jedes Bild und jede Displaygröße im Vorfeld, sind für Redakteure eine Herausforderung.
TYPO3 kann den Redakteuren einen Großteil dieser Arbeiten abnehmen. Dabei werden für unterschiedliche Displaygrößen automatisch eigene Bilder erstellt, berechnet und auf Wunsch auch Fokus-Bereiche mit berücksichtigt. Damit liefert das TYPO3-System nur das eine passende Bild mit dem gewünschten Ausschnitt und Fokus-Bereich für die Displaygröße des anfragenden Gerätes aus, womit eine optimale Darstellung gewährleistet ist.

Sie möchten diese Möglichkeit der Bildverarbeitung mit TYPO3 auch nutzen oder Sie möchten den vollen Umfang der TYPO3-Möglichkeiten kennen lernen?

Fragen Sie uns unverbindlich nach Ihrem kostenlosen TYPO3-Demo-System.

TYPO3

Zurück