CBK-006 Image

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

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. 

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

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. 

Beispiel: Bild soll nur auf einem Smartphone angezeigt werden

• Auswahl des Device in der hellgrauen Emulator Bar (Desktop, Phone, Tablet). Standardeinstellung ist Desktop.
• Weitere Auswahl der Rotation des Endgeräts (Hochformat, Querformat). Standardeinstellung ist Querformat.
• Einfügen und Pflege der Image-Komponente an der gewünschten Stelle auf der Seite
• Wechsel in die Layout-Ansicht
• Auswahl der Viewports in denen das Bild NICHT sichtbar sein soll (Desktop, Tablet)
• Klick auf die Image-Komponente für das Augensymbol-Icon 'hide component'
• 'Hide component' anklicken in Desktop und Tablet
• Das Bild wird jetzt nur auf der Smartphone-Version der Seite ausgegeben

Wichtig: Das Bild ist versteckt weiterhin auf der Seite vorhanden, wird jedoch nur für diesen Viewports ausgegeben. Es existiert kein Protokoll und keine weitere Übersicht, welches Bild in welchem Viewport ausgeblendet ist. Für Bildaktualisierungen sollten daher immer alle Viewports geprüft werden.

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.

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.

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)

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.

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).