Bildkomponente image-component

Die Bildkomponenten-Kernkomponente ist eine adaptive Bildkomponente.

Verwendung usage

Die Bildkomponente bietet adaptive Bildauswahl und responsives Verhalten mit verzögertem Laden für die Menschen, die eine Seite besuchen, sowie einfache Bildplatzierung für die Inhaltsautorin bzw. den Inhaltsautor.

Inhaltsautorinnen und Inhaltsautoren können das Dialogfeld „Bearbeiten“ verwenden, um das Bild-Asset zu bearbeiten, um z. B. einen Zuschnitt anzuwenden oder das Bild zu drehen.

Die Bildbreiten sowie zusätzliche Einstellungen können vom Vorlagenautor im Dialogfeld „Design“ definiert werden. Der Inhaltseditor kann Elemente im Dialogfeld „Konfigurieren“ hochladen oder auswählen.

Version und Kompatibilität version-and-compatibility

Die aktuelle Version der Bildkomponente ist v3, die mit Version 2.18.0 der Kernkomponenten im Februar 2022 eingeführt wurde und in diesem Dokument beschrieben wird.

Die folgende Tabelle enthält alle unterstützten Versionen der Komponente, die AEM-Versionen, mit denen die Versionen der Komponente kompatibel sind, sowie Links zur Dokumentation für frühere Versionen.

Komponentenversion
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v3
-
Kompatibel
Kompatibel
v2
Kompatibel
Kompatibel
Kompatibel
v1
Kompatibel
Kompatibel
Kompatibel

Weitere Informationen zu Kernkomponentenversionen und -freigaben finden Sie in den Kernkomponentenversionen.

Responsive Funktionen responsive-features

Die Bildkomponente verfügt über robuste responsive Funktionen, die direkt sofort bereitgestellt werden können. Auf der Seitenvorlagenebene kann das Design-Dialogfeld verwendet werden, um die Standardbreiten des Bild-Assets zu definieren. Die Bildkomponente lädt dann automatisch die richtige Breite für die Anzeige, abhängig von der Größe des Browser-Fensters. Wenn die Größe des Fensters geändert wird, lädt die Bildkomponente die korrekte Bildgröße dynamisch. Komponentenentwickler müssen sich keine Gedanken darüber machen, wie sie benutzerdefinierte Medienabfragen definieren, da die Bildkomponente bereits optimiert ist, um Ihren Inhalt zu laden.

Darüber hinaus unterstützt die Bildkomponente verzögertes Laden, um das Laden des tatsächlichen Bild-Assets zu verzögern, bis es im Browser sichtbar ist, wodurch die Reaktionsgeschwindigkeit Ihrer Seiten zunimmt.

TIP
Standardmäßig wird die Bildkomponente durch das Adaptive Image Servlet gesteuert. Details zur Funktionsweise erhalten Sie unter Adaptive Image Servlet.

Dynamic Media-Unterstützung dynamic-media

Die Bildkomponente (ab Version 2.13.0) unterstützt Dynamic Media-Assets. Wenn diese Funktionen aktiviert sind, können Sie Dynamic Media-Bild-Assets per Drag-and-Drop oder über den Assets-Browser hinzufügen, wie Sie es mit jedem anderen Bild tun würden. Darüber hinaus werden auch Bild-Modifikatoren, Bildvorgaben und Smartes Zuschneiden unterstützt.

Ihre mit Kernkomponenten erstellten Web-Erlebnisse können jetzt funktionsreiche, Sensei-gestützte, robuste, leistungsstarke und plattformübergreifende Dynamic Media-Bildfunktionen enthalten.

Unterstützung für Remote Assets remote-assets

Die Bildkomponente (ab Version 2.23.2) unterstützt Remote-Assets. Wenn sie konfiguriert sind, können Sie Assets aus einem Remote-Service für Ihre Bildkomponente auswählen.

SVG-Unterstützung svg-support

Skalierbare Vektorgrafiken (SVG) werden von der Bildkomponente unterstützt.

  • Es wird sowohl das Verschieben eines SVG-Assets per Drag-and-Drop aus DAM als auch das Hochladen einer SVG-Datei aus einem lokalen Dateisystem unterstützt.
  • Die ursprüngliche SVG-Datei wird gestreamt (Transformationen werden übersprungen).
  • Bei einem SVG-Bild werden die „Smart-Bilder“ und die „Smart-Größen“ auf ein leeres Array im Bildmodell festgelegt.

Sicherheit security

Aus Sicherheitsgründen wird die ursprüngliche SVG niemals direkt vom Bild-Editor aufgerufen. Es wird durch <img src="path-to-component"> aufgerufen. Dadurch wird verhindert, dass der Browser Skripte ausführt, die in der SVG-Datei eingebettet sind.

Muster für Komponentenausgabe sample-component-output

Um die Bildkomponente zu erleben und Beispiele für ihre Konfigurationsoptionen sowie die HTML- und JSON-Ausgabe zu sehen, besuchen Sie die Komponentenbibliothek.

Technische Details technical-details

Die aktuelle technische Dokumentation zur Bildkomponente finden Sie auf GitHub.

Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler.

Die Bildkomponente unterstützt Schema.org-Mikrodaten.

Dialogfeld „Bearbeiten“ edit-dialog

Das Dialogfeld „Bearbeiten“ ermöglicht Inhaltsautorinnen und Inhaltsautoren das Zuschneiden und Zoomen des Bildes.

Je nachdem, ob Dynamic Media oder Remote-Assets-Unterstützung aktiviert ist, unterscheiden sich die für die Bildbearbeitung verfügbaren Optionen.

Bearbeitung von Standard-Assets standard-assets

Wenn Sie Standard-AEM-Assets bearbeiten, können Sie auf das Symbol Bearbeiten im Kontextmenü der Bildkomponente klicken.

Dialogfeld „Bearbeiten“ der Bildkomponente

  • Zuschneiden beginnen

    Symbol „Zuschneiden beginnen“

    Wenn Sie diese Option auswählen, wird eine Dropdown-Liste für vordefinierte Zuschneideproportionen geöffnet.

    • Wählen Sie Beschnitt entfernen, um das ursprüngliche Asset anzuzeigen.

    Nachdem Sie eine Zuschnittoption ausgewählt haben, verwenden Sie die blauen Griffe, um die Beschneidung auf dem Bild anzupassen.

    Optionen für das Zuschneiden

  • Nach rechts drehen

    Symbol „Nach rechts drehen“

    Verwenden Sie diese Option, um das Bild um 90° nach rechts (im Uhrzeigersinn) zu drehen.

  • Zoom zurücksetzen

    Symbol „Zoom zurücksetzen“

    Wenn das Bild bereits gezoomt wurde, verwenden Sie diese Option, um den Zoom-Grad zurückzusetzen.

  • Zoom-Regler öffnen

    Symbol „Zoom-Regler öffnen“

    Mit dieser Option können Sie einen Schieberegler anzeigen, um den Zoom-Grad des Bildes zu steuern.

    Steuerelement des Zoom-Reglers

Der Editor für die Bearbeitung im Kontext kann auch zum Ändern des Bildes verwendet werden. Aus Platzgründen sind nur einfache Optionen inline verfügbar. Für vollständige Bearbeitungsoptionen verwenden Sie den Vollbildmodus.

Optionen für die Bildbearbeitung im Kontext

NOTE
Bildbearbeitungsvorgänge werden für GIF-Bilder nicht unterstützt. Alle Änderungen, die im Bearbeitungsmodus an GIFs vorgenommen werden, bleiben nicht bestehen.

Bearbeiten von Dynamic Media-Assets dynamic-media-assets

Wenn Sie die Funktionen von Dynamic Media aktiviert haben, muss die Bildbearbeitung selbst in der Asset-Konsole erfolgen.

Dialogfeld „Konfigurieren“ configure-dialog

Die Bildkomponente bietet ein Dialogfeld zum Konfigurieren, in dem das Bild selbst zusammen mit seiner Beschreibung und den grundlegenden Eigenschaften definiert ist.

Registerkarte „Asset“ asset-tab

Registerkarte „Asset“ im Dialogfeld „Konfigurieren“ der Bildkomponente

  • Vorgestelltes Bild von Seite übernehmen – Diese Option verwendet das vorgestellte Bild der verknüpften Seite oder das vorgestellte Bild der aktuellen Seite, wenn das Bild nicht verknüpft ist.

  • Bild-Asset – Dies wird automatisch ausgefüllt, wenn Vorgestelltes Bild von Seite übernehmen ausgewählt ist. Heben Sie die Auswahl auf, um das Bild manuell zu definieren, indem Sie die folgenden Optionen festlegen.

    • Ziehen Sie ein Asset aus dem Asset-Browser oder tippen Sie auf die Option Durchsuchen, um es aus einem lokalen Dateisystem hochzuladen.

    • Tippen oder klicken Sie auf Löschen, um die Auswahl des aktuell ausgewählten Bilds aufzuheben.

    • Tippen oder klicken Sie auf Auswählen, um zum Auswählen eines Bildes den Asset-Browser zu öffnen.

      • Wenn die Remote-Assets-Unterstützung aktiviert ist, haben Sie mehrere Optionen zum Auswählen eines Assets:

        • Mit der Option Lokal wird ein Asset aus der lokalen AEM-Asset-Bibliothek ausgewählt.
        • Mit Remote wird aus einer Dynamic Media-Bibliothek außerhalb Ihrer AEM-Instanz ausgewählt.
    • Tippen oder klicken Sie auf Bearbeiten, um die Ausgabedarstellungen des Assets im Asset-Editor zu verwalten.

  • Alternativtext für Barrierefreiheit – In diesem Feld können Sie eine Beschreibung des Bildes für sehbehinderte Benutzer definieren.

    • Alternativtext von Seite übernehmen – Diese Option verwendet die alternative Beschreibung des verknüpften Asset-Werts der dc:description-Metadaten in DAM oder der aktuellen Seite, wenn kein Asset verknüpft ist.
  • Keinen Alternativtext angeben – Mit dieser Option wird das Bild so markiert, dass es von unterstützenden Technologien wie Bildschirmlesegeräten ignoriert wird, etwa wenn das Bild rein dekorativ ist oder sonst keine zusätzlichen Informationen für die Seite liefert.

Registerkarte „Metadaten“ metadata-tab

Registerkarte „Metadaten“ im Dialogfeld „Konfigurieren“ der Bildkomponente

  • Vorgabetyp – Hier wird der Typ der verfügbaren Bildvorgaben festgelegt, entweder Bildvorgabe oder Smartes Zuschneiden. Dies ist nur verfügbar, wenn die Dynamic Media-Funktionen aktiviert sind.

    • Bildvorgabe – Wenn der Vorgabetyp Bildvorgabe ausgewählt ist, ist die Dropdown-Liste Bildvorgabe verfügbar, sodass aus den verfügbaren Dynamic Media-Vorgaben ausgewählt werden kann. Dies ist nur verfügbar, wenn für das ausgewählte Asset Vorgaben definiert sind.
    • Smartes Zuschneiden – Wenn der Vorgabetyp Smartes Zuschneiden ausgewählt ist, ist die Dropdown-Liste Ausgabedarstellung verfügbar, sodass aus den verfügbaren Ausgabedarstellungen des ausgewählten Assets ausgewählt werden kann. Dies ist nur verfügbar, wenn für das ausgewählte Asset Ausgabedarstellungen definiert sind.
    • Bild-Modifikatoren – Hier können zusätzliche Befehle zur Dynamic Media-Bildbereitstellung definiert werden, die durch & getrennt sind, unabhängig davon, welcher Vorgabetyp ausgewählt ist.
  • Beschriftung – Zusätzliche Informationen über das Bild, die standardmäßig unter dem Bild angezeigt werden.

    • Beschriftung aus DAM abrufen – Wenn diese Option aktiviert ist, wird der Beschriftungstext des Bildes mit dem Wert der dc:title-Metadaten in DAM gefüllt.
    • Beschriftung als Popup anzeigen – Wenn diese Option aktiviert ist, wird die Beschriftung von einigen Browsern nicht unter dem Bild angezeigt, sondern als Popup, wenn der Mauszeiger über das Bild bewegt wird.
  • Verknüpfung – Verknüpfen Sie das Bild mit einer anderen Ressource.

    • Verwenden Sie das Dialogfeld „Auswahl“, um eine Verknüpfung zu einer anderen AEM-Ressource herzustellen.
    • Geben Sie die absolute URL ein, wenn Sie keine Verknüpfung zu einer AEM-Ressource erstellen. Nicht-absolute URLs werden als relativ zu AEM interpretiert.
    • Link in neuer Registerkarte öffnen – Mit dieser Option wird der Link in einem neuen Browser-Fenster geöffnet.
  • ID – Mit dieser Option können Sie die eindeutige Kennung der Komponente in der HTML-Datei und in der Datenschicht steuern.

    • Wenn Sie das Feld leer lassen, wird automatisch eine eindeutige ID generiert, die Sie über die resultierende Seite finden.
    • Sofern eine ID angegeben wird, ist vom Autor bzw. der Autorin sicherzustellen, dass diese eindeutig ist.
    • Änderungen der ID können sich auf das CSS-, JS- und Datenschicht-Tracking auswirken.
TIP
Smartes Zuschneiden und Bildvorgabe sind Optionen, die sich gegenseitig ausschließen. Wenn eine Autorin oder ein Autor eine Bildvorgabe zusammen mit einer Ausgabedarstellung von Typ „Smartes Zuschneiden“ verwenden muss, muss sie bzw. er Bild-Modifikatoren verwenden, um Vorgaben manuell hinzuzufügen.

Registerkarte „Arten“ styles-tab-edit

Registerkarte „Arten“ im Dialogfeld „Bearbeiten“ der Bildkomponente

Die Bildkomponente unterstützt das AEM-Stilsystem.

Verwenden Sie das Dropdown-Menü, um die Stile auszuwählen, die Sie auf die Komponente anwenden möchten. Die im Dialogfeld „Bearbeiten“ vorgenommenen Auswahlen haben denselben Effekt wie die in der Komponenten-Symbolleiste ausgewählten.

Stile müssen für diese Komponente im Dialogfeld „Design“ konfiguriert werden, damit das Dropdown-Menü zur Verfügung steht.

Dialogfeld „Design“ design-dialog

Registerkarte „Haupt“ main-tab

Registerkarte „Haupt“ im Dialogfeld „Design“ der Bildkomponente

  • DM-Funktionen aktivieren – Wenn diese Option aktiviert ist, sind die Dynamic Media-Funktionen verfügbar.

    • Diese Option wird nur angezeigt, wenn „Dynamic Media“ in der Umgebung aktiviert ist.
  • Web-optimierte Grafiken aktivieren – Wenn diese Option aktiviert ist, liefert der Web-optimierte Bildbereitstellungs-Service Bilder im WebP-Format. Dadurch wird die Bildgröße durchschnittlich um 25 % verringert.

    • Diese Option ist nur in AEMaaCS verfügbar.
    • Wenn diese Option deaktiviert ist oder der Web-optimierte Bildbereitstellungs-Service nicht verfügbar ist, wird das Adaptive Image Servlet verwendet.
  • Lazy Loading deaktivieren  – Wenn diese Option aktiviert ist, lädt die Komponente alle Bilder vorab, ohne dass das Laden verzögert wird.

  • Bild ist dekorativ – Festlegen, ob die Option für dekorative Bilder automatisch aktiviert ist, wenn die Bildkomponente einer Seite hinzugefügt wird.

  • Alternativtext von DAM abrufen - Festlegen, ob die Option zum Abrufen des Alternativtexts aus DAM automatisch aktiviert ist, wenn die Bildkomponente einer Seite hinzugefügt wird.

  • Beschriftung aus DAM abrufen – Festlegen, ob die Option zum Abrufen der Beschriftung aus DAM automatisch aktiviert ist, wenn die Bildkomponente einer Seite hinzugefügt wird.

  • Beschriftung als Pop-up anzeigen – Festlegen, ob die Option zum Anzeigen der Bildbeschriftung als Popup automatisch aktiviert ist, wenn die Bildkomponente einer Seite hinzugefügt wird.

  • Breite ändern – Dieser Wert wird verwendet, um die Breite der Basisbilder zu ändern, die DAM-Assets sind.

    • Das Seitenverhältnis der Bilder wird beibehalten.
    • Wenn der Wert größer ist als die tatsächliche Breite des Bildes, hat dieser Wert keine Auswirkung.
    • Dieser Wert hat keine Auswirkungen auf SVG-Bilder.

Sie können eine Liste von Breiten in Pixeln für das Bild definieren, und die Komponente lädt, basierend auf der Browser-Größe, automatisch die am besten geeignete Breite. Dies ist ein wichtiger Teil der responsiven Funktionen der Bildkomponente.

  • Breiten – Definiert eine Liste der Breiten in Pixel für das Bild und die Komponente lädt automatisch die passende Breite basierend auf der Größe des Browsers.

    • Tippen oder klicken Sie auf die Schaltfläche Hinzufügen, um eine weitere Größe hinzuzufügen.

      • Verwenden Sie die Griffpunkte, um die Größenreihenfolge neu anzuordnen.
      • Verwenden Sie das Symbol Löschen, um eine Breite zu entfernen.
    • Standardmäßig wird das Laden von Bildern verzögert, bis sie sichtbar werden.

      • Wählen Sie die Option Verzögertes Laden deaktivieren, um die Bilder schon beim Laden der Seite zu laden.
  • JPEG-Qualität – Der Qualitätsfaktor (in Prozent von 0 bis 100) für umgewandelte (z. B. skalierte oder zugeschnittene) JPEG-Bilder.

TIP
Tipps zur Optimierung der Auswahl für die Ausgabedarstellung durch sorgfältige Definition der Breiten finden Sie im Dokument Adaptive Image Servlet.

Registerkarte „Arten“ styles-tab

Die Bildkomponente unterstützt das AEM-Stilsystem.

Adobe Client-Datenschicht data-layer

Die Bildkomponente unterstützt die Adobe Client-Datenschicht.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c