Скачать или смотреть Web-Optimized Image Delivery in AEM - Leveraging WebP for Faster Page Loads

#AdobeExperienceManager
#AEM
#AEMCloudService
#WebOptimizedImages
#WebP
#ImageOptimization
#AEMDispatcher
#DigitalAssetManagement
#PageSpeed
#WebPerformance
#WebPImageFormat
#ContentDelivery
#AEMCoreComponents
#AssetDelivery
#AEMTutorial

In this video, we dive into web-optimized image delivery in Adobe Experience Manager (AEM) as a Cloud Service, focusing on how to leverage WebP image delivery for faster load times and improved performance. WebP is a modern image format that provides high-quality visuals at smaller file sizes, making it ideal for web optimization.

We’ll cover:

What is WebP? – Understand the benefits of WebP, such as reduced file size, support for transparency, and compatibility with most modern browsers.
Setting up Web-Optimized Image Delivery in AEM – Learn how to enable WebP delivery for images stored in the AEM DAM using the Core Image Component.
Dispatcher Configuration – Step-by-step setup for AEM's dispatcher to support Web-Optimized images, including filter rules, cache setup, and headers required for content negotiation.
Using the AssetDelivery API – A quick look at how developers can utilize the AssetDelivery Java API for custom components and conditional WebP delivery.
Demo – See the performance differences between standard image delivery and WebP optimized delivery, showcasing the impact on page speed and user experience.
By the end of this video, you’ll understand how to implement Web-Optimized Image Delivery in AEM, helping your website load faster and perform better. Whether you're a developer, content author, or site administrator, this tutorial will guide you through the best practices for configuring WebP support in AEM.

Options for Using Web-Optimized Delivery in AEM

AEM Core WCM Components: "Use AEM's built-in Core Image Component with the Web-Optimized Delivery setting."
Custom Components:
"Create a custom component that extends the Core Image Component."
"Or use the AssetDelivery Java API to generate WebP URLs directly."

AssetDelivery OSGi Service

"The AssetDelivery OSGi Service enables Web-Optimized Delivery in AEM as a Cloud Service."
Code Example:
java
Copy code
import com.adobe.cq.wcm.spi.AssetDelivery;
@Reference(cardinality = ReferenceCardinality.OPTIONAL)
private volatile AssetDelivery assetDelivery;
"This service only runs in AEM Cloud. If unavailable, use a conditional approach to fall back to non-WebP URLs."
Configuring Image Parameters for Delivery

"When using the AssetDelivery API, you can configure parameters such as image height, width, path, quality, and format. Here’s an example of a parameter map you might use to specify WebP:"
java
Copy code
params.put("preferwebp", "true");
params.put("quality", "85"); // Adjust quality as needed
params.put("imageHeight", imageHeight);
params.put("imageWidth", imageWidth);
params.put("path", assetPath);
params.put("seoname", imageName);
params.put("format", extension);
params.put("width", "" + width);
params.put("c", cropParameter);
params.put("r", "" + rotate);
params.put(flip, flipParameter);

https://experienceleague.adobe.com/en...
https://experienceleague.adobe.com/en...
https://experienceleague.adobe.com/en...