Importierte Bilder werden in AEM Edge Delivery Services als statische anstatt als responsive Assets gerendert
In Adobe Experience Manager (AEM) Edge Delivery Services können in Seiten importierte Bilder als statische Bilder anstatt als responsive Dynamic Media-Assets gerendert werden. Daher profitieren Bilder nicht von Dynamic Media-Funktionen wie der automatischen Generierung mehrerer Bildgrößen oder Transformationen. Um dieses Problem zu beheben, generieren Sie responsives Bild-Markup mithilfe unterstützter AEM Assets-Bereitstellungs-URLs.
Beschreibung description
Umgebung
- Adobe Experience Manager (AEM) Edge Delivery Services
- AEM Cloud Service
Problem/Symptome
- In Seiten importierte Bilder werden als statische Bilder anstatt als responsive Dynamic Media-Assets gerendert.
- Bilder profitieren nicht von Dynamic Media-Funktionen wie der automatischen Generierung mehrerer Bildgrößen oder Transformationen.
- Das Problem tritt häufig bei automatisierten Migrationen auf, bei denen Bildverweise programmgesteuert ausgefüllt werden.
- Es werden keine Fehlermeldungen angezeigt, aber die Bilder zeigen kein responsives Verhalten an.
Lösung resolution
Gehen Sie wie folgt vor, um das Problem zu beheben.
-
Stellen Sie sicher, dass Bilder in Ihrer AEM Cloud Service-Instanz als genehmigte AEM Assets hochgeladen oder aufgelöst werden.
-
Rufen Sie für jedes Bild die unterstützte AEM Assets-Bereitstellungs-URL ab. Verwenden Sie dazu die Assets OpenAPI oder lösen Sie das Asset über seine
jcr:uuidauf und rufen Sie die Bereitstellungs-URL ab. -
Aktualisieren Sie Ihre Import-Tool- oder EDS-Blocklogik, um responsives Bild-Markup mithilfe der AEM Assets-Bereitstellungs-URL zu generieren. Schließen Sie Parameter für Breite, Zuschnitt, Format und Qualität ein, um Dynamic Media-Transformationen zu ermöglichen.
Beispiel für responsives Bild-Markup:
code language-none <img src="https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80" srcset="https://assets.example.com/asset-id.jpg?width=400&format=webp&quality=80 400w, https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80 800w, https://assets.example.com/asset-id.jpg?width=1200&format=webp&quality=80 1200w" sizes="(max-width: 800px) 100vw, 800px" alt="Description of image"> -
Speichern Sie die Versand-URL-Referenz in Ihrem importierten Inhalt, damit der EDS-Block sie zum Rendern zum Generieren des responsiven Markups verwenden kann.
-
Testen Sie die gerenderten Seiten, um zu überprüfen, ob Bilder responsiv bereitgestellt und Dynamic Media-Transformationen angewendet werden.