CBK-006 Image

Wann wird die Komponente verwendet?

Über die Bildkomponente lassen sich einzelne Bildelemente auf einer Seite platzieren. Das Bildverhalten ist dabei adaptiv, das jeweilige Bild passt sich der Bildschirmgröße an. Die Bildkomponente erstreckt sich dabei über ein unsichtbares 12er Grid auf der Seite. Sie kann nach Bedarf über die Funktion 'Layout' auf die gewünschten Spalten gezogen werden.

Das Bildverhalten ist abhängig, welche Art von Container und Komponente verwendet wird. 

Eine Komponte wie der Structured Container erlaubt ein eigenes Hintergrundbild zu setzen. Dieses Bild ist angepasst an das Verhalten des Structured Containers.

Das Bildverhalten wird über die Einstellung 'Layout' in AEM definiert.

Hinweis zur Bilderpflege (struktureller Aufbau)

Jedes Bild sollte in einem eigenen Structure Container eingefügt werden. Das Bild richtet sich dann am Structure Container aus und lässt sich im gesamten Layout leichter verschieben und bearbeiten.

Wenn ergänzend zum Bild noch weitere Komponenten hinzugefügt werden, wie etwa Title oder Text, sollte diese Komponenten-Kombination zusätzlich im Structure Container in einen weiteren Group Container gesetzt werden. Das Bild und die Elemente richten sich dann am Group Container aus, der sich wiederum am Structure Container ausrichtet. Die Bündelung im Group Container ist sinnig, wenn Bild + Komponenten eine logische Einheit bilden.

Diese Hierarchie ist abhängig vom jeweiligen gewünschten Layout der Seite.

Dialogfelder

Bildkomponente Ansicht Dialogfeld Asset unausgefüllt

Inherited featured image from page: 

  • Standardeinstellung mit markierter Checkbox 
  • Wird Checkbox enthakt, kann ein Bild hochgeladen oder aus dem DAM gewählt werden 

Alternative text for accessibility:

  • Inherit from description of asset: Standardeinstellung, wenn enthakt muss ein eigener Alt-Text vergeben werden
  • Maximale Alt-Text Länge: xxxxx Zeichen

Don't provide an alternative text:

  • Nur nutzen bei dekorativen Bildern, die keinen Mehrwert liefern bei Screenreadern und nicht essentiell sind für die Seite 
  • Informative Bilder müssen einen Alt-Text haben

Disable lazy loading:

  • Wenn angehakt wird das Bild bereits beim Aufruf der Seite geladen, wodurch sich die Ladezeit je nach Bildgröße erhöhen kann
  • Wenn nicht angehakt lädt das Bild erst wenn es im sichtbaren Bereich der Website für den User ist

Bildkomponente Ansicht Dialogfeld Metadata unausgefüllt

Caption:

  • Get caption from DAM: Wird automatisch angehakt, sobald ein Bild ausgewählt ist aus der DAM. Die Caption ist dabei der in der DAM vergebene Title
  • Display caption as pop-up: Die Caption wird als Hover Popup über dem Bild ausgegeben. 
    • Ist der Haken entfernt, wird die Caption als Bildunterschrift unter dem Bild ausgegeben.

Link:

  • Erlaubt es ein Bild - sofern sinnig und notwendig - zusätzlich zu verlinken (intern/extern). 
    • Wichtig: Ein Bildlink ist kein Ersatz für einen CTA. 

How-to

Die empfohlene Bildgröße richtet sich nach dem genutzen Layout, d.h. wie viel Platz die Komponente oder dirket die Image-Komponente auf dem Layout einnimmt.

Beim Ändern der Bildgröße sollte das Seitenverhältnis (also das Verhältnis von Bildbreite zu Bildhöhe) immer proportional gehalten werden. Ansonsten kann es passieren, dass das Bild verzerrt wird und in der Qualität abnimmt.

Generell verfügbare Bildgrößenverhältnisse: 16:9, 3:2, 4:3, 1:1, 3:4

Columns / Viewport Desktop Tablet Mobile
12 Columns 16:9 16:9 16:9, 3:2, 4:3, 1:1, 3:4
10 Columns 16:9, 3:2 16:9, 3:2  
8 Columns 16:9, 3:2    
6 Columns 16:9, 3:2, 4:3 16:9, 3:2, 4:3 16:9, 3:2, 4:3, 1:1, 3:4
4 Columns 16:9, 3:2, 4:3, 1:1, 3:4 16:9, 3:2, 4:3, 1:1, 3:4  
3 Columns 16:9, 3:2, 4:3, 1:1, 3:4    

Es existieren drei mögliche Viewports als Layout: Phone, Tablet und Desktop. Die Layout-Definitionen sind durch Umbruchpunkte (Englisch Breakpoints) gekennzeichnet und gehen von links nach rechts auf dem Bildschirm. Breakpoints hängen von der Größe des Displays des jeweiligen Endgeräts ab.

Je nach Displaygröße, bricht die Seite in einen der folgenden Viewports:

  • Maximale Breite von 480 Pixeln (Phone, Hochformat)
  • Maximale Breite von 767 Pixeln (Phone, Querformat)
  • Breite zwischen 768 Pixeln und 979 Pixeln (Tablet, Hochformat)
  • Breite zwischen 980 Pixel und 1199 Pixel (Tablet, Querformat)
  • Breite von 1200 Pixel oder mehr (Desktop)

Dabei lassen sich Bilder auch nur für bestimmte Viewports integrieren. 

Wichtig: Die Pflege für unterschiedliche Viewports ist sehr aufwändig. Die Pflege unterschiedlicher Bilder auf unterschiedlichen Viewports ist die Ausnahme und nicht die Regel. Es wird nur notwendig, sofern im Design unterschiedliche Aspect Ratios für die Bilder der jeweiligen Seite geplant sind. Es muss daher bereits in der Layout-Phase für neue und bestehende Seiten wohl überlegt sein, welches Bildseitenverhältnis angestrebt wird.

Alle Bilder für die einzelnen Seiten sollten in der Mediathek von AEM abgelegt werden. Alle Bilder und weitere Dateitypen (Englisch Assets) finden sich in AEM im Abschnitt Assets. 

Im Unterordner Files spiegeln die Ordner die einzelnen Website-Bereiche wieder. Ein designierter Seitenordner, der nur die Bilder für Seite X beinhaltet, ist empfehlenswert.

Der Upload sollte direkt im Ordner erfolgen. Nach dem Upload sollten direkt Meta-Daten (Title, Description) vergeben werden. Das hat den Vorteil, dass diese Informationen konsistent und konsequent beim Einbinden des Bildes auf der Seite nicht - und nicht jedes Mal manuell ausgefüllt werden müssen.

Ein Hochladen über Drag & Drop ist möglich.

Backend-Ansicht im Bereich Assets mit Icons zu Subpunkten

Die Metadaten der Bilder in AEM sollten immer direkt nach dem Hochladen im jeweiligen Bild gepflegt werden.

Die Vorteile:

  • erleichterte Pflege bei Nutzung auf mehreren Seiten bei gleichbleibender Info
  • erleichterte Suche in AEM bzw. im Asset Management 
  • verringerter Aufwand durch einmaliges Pflegen im Bild direkt

Die Pflege der Metadaten erfolgt in den Properties des einzelnen Bildes.

Bilddatei im AEM-Backend mit hervorgehobenem Properties-Aktionsfeld

In den Properties stehen zahlreiche Freitextfelder zur Verfügung. Dabei genügt meistens die Pflege im Tab 'Basic'. Hier müssen im Bereich 'Metadata' die Freitextfelder 'Title' und 'Description' ausgefüllt werden.

  • Metadata Title: Titel des Bildes (kurz und prägnant)
  • Metadata Description: kurze Beschreibung, die aus als Alternative Text des Bildes dienen kann und so für Screenreader brauchbar ist (kurz und prägnant, keine Lyrik)
Bilddatei im AEM-Backend mit ausgefülltem Basic Tab eines Beispielbildes

Nach dem Befüllen der Metadaten spiegeln sich diese auch im Backend der Assets wieder. 

Ein gut betiteltes Bild ist auch über die interne Suche leichter auffindbar.

AEM Backend-Ansicht der Bilddateien mit ausgewählter Bilddatei

Die Caption bezeichnet hier den Titel des Bildes. Bei Pflege der Bild-Metadaten mit Titel und Description, wird das Title-Feld automatisch als Caption nutzbar gemacht.

Bei der Bildauswähl ist der Haken automatisch gesetzt im Feld "Get caption from DAM".

Folgende Formate sind zulässig:

  • JPG, PNG, GIF, TIFF, weitere

Die maximale Dateigröße von 10 MB (4000 x 4000 pixels) darf nicht überschritten werden.

Je geringer die Dateigröße, desto besser ist dies in Hinblick auf die Ladegeschwindigkeit der Seite. Dies wirkt sich positiv auf die Suchmaschinenoptimierung (SEO) und Nutzerfreundlichkeit der Seite aus. Empfehlenswert sind hier wiederum 100 kB bis 300 kB pro Bilddatei. Dabei ist die Dateigröße ebenso entscheidend wie eine hohe Bildqualität (kein Rauschen, kein Verzerren).