Erfahren Sie, wie die Kernkomponenten die Funktionen zur Web-optimierten Bildbereitstellung von AEM as a Cloud Service nutzen können, um Bilder effizienter bereitzustellen.
Die Funktion der Web-optimierten Bildbereitstellung von AEM as a Cloud Service stellt Bild-Assets aus dem DAM im WebP-Format bereit. WebP kann die Download-Größe eines Bildes im Durchschnitt um etwa 25 % reduzieren, was zu einem schnelleren Laden von Seiten führt.
Die Aktivierung der Web-optimierten Bildbereitstellung in den Kernkomponenten ist einfach. Da alle gängigen Browser WebP unterstützen, ist das Erlebnis für den Endbenutzenden transparent. Der einzige bemerkbare Unterschied ist, dass Inhalte schneller geladen werden!
Um die Web-optimierte Bildbereitstellung zu aktivieren, bearbeiten Sie eine Seitenvorlage und aktivieren Sie einfach die Option Web-optimierte Grafiken aktivieren im Dialogfeld „Design“ der Bildkomponente. Diese Option ist für die Versionen 1, 2 und 3 der Bildkomponente verfügbar.
Wenn Sie nicht mit Design-Dialogfeldern und AEM-Seitenvorlagen vertraut sind, lesen Sie bitte dieses Dokument.
Das war´s! Bilder werden jetzt von der Bildkomponente im WebP-Format bereitgestellt.
Nachdem Sie die Web-optimierte Bildbereitstellung aktiviert haben, sollten Sie auch Ihre Dispatcher-Konfiguration überprüfen, um sicherzustellen, dass die Anforderung an den Bild-Service nicht blockiert wird. Die URLs dieses Service haben die folgende Form.
/adobe/dynamicmedia/deliver/dm-aid--741ed388-d5f8-4797-8095-10c896dc9f1d/skitouring.jpg?quality=80&preferwebp=true
Dies kann mit diesem regulären Ausdruck verallgemeinert werden.
\/adobe\/dynamicmedia\/deliver\/([^:[]|*\/])\/([\w-])\.(gif|png|png8|jpg|pjpg|bjpg|webp|webpll|webply)(?[a-z0-9=&]*)?
Die Web-optimierte Bildbereitstellung ist für alle, die die Inhalte nutzen, transparent und hat keine Auswirkungen auf das Markup. Die Endbenutzenden bemerken einzig eine schnellere Ladezeit.
Um die tatsächliche Verhaltensänderung zu beobachten, müssen Sie daher die Seitenquelle anzeigen.
src
-Attribut jedoch auf die URL des neuen Bild-Service verweist.Die Web-optimierte Bildbereitstellung ist nur in AEM as a Cloud Service verfügbar. In Fällen, in denen sie nicht verfügbar ist, z. B. wenn AEM 6.5 lokal oder auf einer lokalen Entwicklungsinstanz ausgeführt wird, fällt die Bildbereitstellung auf die Verwendung des Adaptive Image Servlets zurück.
Ebenso wie die Aktivierung einer Web-optimierten Bildbereitstellung das Markup nicht beeinflusst, hat ein Zurückfallen auf das Adaptive Image Servlet ebenfalls keine Auswirkungen auf das Markup, da nur die URL im src
-Attribut des img
-Elements geändert wird.
Die Funktion ist nur in AEM as a Cloud Service verfügbar. Wenn AEM lokal ausgeführt wird, kehrt die Bildkomponente zur Verwendung des Adaptive Image Servlets zurück.
Wenn Sie das AEM SDK auf localhost
verwenden, ist der Bild-Service nicht verfügbar und das Rendern von Bildern fällt auf die Verwendung des Adaptive Image Servlets zurück.
Um den Service zur Web-optimierten Bildbereitstellung zu verwenden, stellen Sie das Projekt in einer AEMaaCS-Entwicklungsumgebung bereit, um genau testen zu können, wie sich die Bilder mit dem Bild-Service verhalten.
Der Bild-Service funktioniert nur für Assets, die sich unter /content/dam
befinden. Er funktioniert nicht für Bilder, die direkt auf die Seite hochgeladen und unter einem cq:Page
-Objekt gespeichert werden. Solche Assets werden weiterhin mit dem Adaptive Image Servlet als Ausweichlösung bereitgestellt.
Der Web-optimierte Bild-Service berücksichtigt alle Bildausgabeformate, die 2.048 Pixel und kleiner sind, und wählt die größte davon als Grundlage für die Anwendung der angeforderten Einstellungen (Breite, Zuschnitt, Format, Qualität usw.).
Der Bild-Service skaliert Bilder niemals hoch. Diese Ausgabeformate definieren daher die beste Größe und Qualität, die der Bild-Service bereitstellen kann. Vergewissern Sie sich daher, dass Ihre Assets alle die Zoom-Ausgabedarstellung von 2048 Pixeln aufweisen, und verarbeiten Sie sie andernfalls erneut.
Zur Bereitstellung von WebP-Formaten verwendet der Service zur Web-optimierten Bildbereitstellung eine Technik namens „Inhaltsaushandlung“. Diese besteht darin, ein WebP-Dateiformat zurückzugeben, selbst wenn eine JPG- oder PNG-Dateierweiterung angefordert wird, jedoch nur, wenn der Browser, der die Anforderung stellt, eine Kopfzeile zum Akzeptieren von image/webp
-HTTP bereitstellt. Browser, die diese Technik unterstützen, können diese Kopfzeile dann bereitstellen, während ältere Browser weiterhin das JPG- oder PNG-Dateiformat erhalten.
Der Vorteil dieser Technik besteht darin, dass das img
-Element und seine Attribute unverändert bleiben können, was zu einer optimalen Kompatibilität mit bestehenden Websites führt und einen möglichst reibungslosen Übergang zu einer Web-optimierten Bildbereitstellung gewährleistet.
Ja, der Service zur Web-optimierten Bildbereitstellung kann von benutzerdefinierten Komponenten verwendet werden. Adobe empfiehlt in diesem Fall das Erweitern der Bildkomponente.
Im Folgenden finden Sie eine Service-Schnittstelle, die zum Generieren der Asset-URL verwendet werden kann.
com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL(Resource resource, Map<String, Object> parameterMap)
Dieser Service akzeptiert eine Asset-Ressource als obligatorischen ersten Parameter und kann eine optionale Zuordnung der gewünschten Bildtransformationen entgegennehmen, die angewendet werden sollen und die die folgenden Parameter enthalten können.
path
– Asset-ID, die bereitgestellt werden soll, muss dem Muster ([^:\[\]\|\*\/]+)
entsprechen (z. B.: unicorn–1234
)seoname
– Benutzerdefinierter, SEO-zentrierter Name, der an die Bild-URL angehängt werden soll, kann Bindestriche enthalten, muss dem Muster ([\w-]+)
entsprechen (z. B.: my-friend-the-unicorn
)format
– Das gewünschte Bildformat kann gif
, png
, png8
, jpg
, pjpg
, bjpg
, webp
, webpll
oder webply
(z. B.: webp
) seinpreferwebp
– Senden Sie nach Möglichkeit die WebP-Ausgabe, ignorieren Sie dabei den Parameter format
(siehe die häufig gestellten Fragen zur Inhaltsaushandlung), boolesch (z. B.: true
)width
– Die gewünschte Bildauflösung in Pixel, muss größer als 1 sein (z. B.: 400
)quality
– Die gewünschte Komprimierung zwischen 1
und 100
(z. B.: 75
)c
– Die gewünschten Bildzuschnittkoordinaten, kommagetrennte Pixel-Werte (z. B.: 100,100,400,200
)r
– Die gewünschte Bildrotation, kann 90
, 180
oder 270
sein (z. B.: 90
)flip
– Die gewünschte horizontale und/oder vertikale Spiegelung des Bildes, kann h
, v
oder hv
sein (z. B.: h
)Im vorherigen Abschnitt Aktivieren der Web-optimierten Bildbereitstellung für Kernkomponenten finden Sie eine Beispiel-URL und einen regulären Ausdruck.
Nein, das sollte niemals geschehen.