了解核心组件如何利用 AEM as a Cloud Service 的 Web 优化图像投放功能来更有效地投放图像。
AEM as a Cloud service 的 Web 优化图像投放功能以 WebP 格式从 DAM 投放图像资产。 WebP 平均可将图像的下载大小减小约 25%,从而加快页面加载速度。
在核心组件中激活 Web 优化图像投放非常简单,而且由于所有常用浏览器都支持 WebP,因此体验对最终用户是透明的。 他们会注意到的唯一区别是内容加载速度更快!
要启用 Web 优化图像投放,请编辑页面模板并只需激活选项启用 Web 优化图像的“设计”对话框中图像组件。 此选项适用于图像组件的 v1、v2 和 v3。
如果您不熟悉设计对话框和 AEM 页面模板,请查阅此文档。
就是这样!图像现在由图像组件以 WebP 格式投放。
激活 Web 优化图像投放后,您可能还希望检查调度程序配置以验证它是否不会阻止对图像服务的请求。 此服务的 URL 采用以下形式。
/adobe/dynamicmedia/deliver/dm-aid--741ed388-d5f8-4797-8095-10c896dc9f1d/skitouring.jpg?quality=80&preferwebp=true
这可以用此正则表达式来推广。
\/adobe\/dynamicmedia\/deliver\/([^:[]|*\/])\/([\w-])\.(gif|png|png8|jpg|pjpg|bjpg|webp|webpll|webply)(?[a-z0-9=&]*)?
Web 优化图像投放对内容的消费者是透明的,不会影响标记。 最终用户只会注意到加载时间更短。
因此,要观察行为的实际变化,您必须查看页面源。
src
属性中的图像指向新图像服务的 URL。Web 优化图像投放仅在 AEM as a Cloud Service 中可用。 如果无法使用该功能(例如在内部部署或在本地开发实例上运行 AEM 6.5),则图像投放将回退到使用自适应图像 Servlet。
正如启用 Web 优化图像投放不会影响标记一样,回退到自适应图像 Servlet 也不会影响标记,因为只有 img
元素的 src
属性中的 URL 发生了变化。
该功能仅在 AEM as a Cloud Service 上可用。 在本地运行或内部部署 AEM,图像组件 回退以使用自适应图像 Servlet。
在 localhost
上使用 AEM SDK 时,图像服务不可用,图像渲染退回以使用自适应图像 Servlet。
要使用 Web 优化图像投放服务,请将项目部署到 AEMaaCS 开发环境,以便能够准确测试图像服务与图像服务的行为方式。
图片服务仅适用于位于 /content/dam
下的资产,不适用于直接上传到页面并存储在 cq:Page
对象下的图片。 此类资产仍将作为回退的自适应图像 Servlet 投放。
Web 优化图像服务会考虑所有 2048 像素和更小的图像呈现,并选取最大的图像演绎版作为应用所请求设置(宽度、裁切、格式、质量等)的基础。
图像服务永远不会放大图像。 因此,这些演绎版定义了图像服务能够投放的最佳大小和质量。 因此,请确保您的资产都具有 2048 像素的缩放演绎版,如果没有,则重新处理它们。
为了提供 WebP 格式,Web 优化图像投放服务使用了一种称为“内容协商”的技术。 这包括返回 WebP 文件格式,即使在请求 JPG 或 PNG 文件扩展名时也是如此,但仅当发出请求的浏览器提供了 image/webp
HTTP 接受标头。 然后,支持此技术的浏览器可以提供此标头,而较旧的浏览器仍将获得 JPG 或 PNG 文件格式。
这种技术的优点是img
元素及其属性可以保持不变,这将为现有站点带来最佳兼容性,并确保向 web 优化图像投放过渡的最顺畅路径。
可以,自定义组件可以使用 Web 优化图像投放服务。 在这种情况下,Adobe 建议扩展图像组件。
以下是一个服务界面,可用于帮助生成资产 URL。
com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL(Resource resource, Map<String, Object> parameterMap)
此服务将资产资源作为第一个必需参数,并且可以为要应用的所需图像转换(可选映射,其中可能包含以下参数)进行映射。
path
— 要投放的资产 ID 必须符合模式 ([^:\[\]\|\*\/]+)
(例如: unicorn–1234
)seoname
– 用户定义的、以 SEO 为中心的名称,附加到图像 URL,可能包含连字符,必须是模式 ([\w-]+)
(例如:my-friend-the-unicorn
)format
– 所需的图像格式,可以是 gif
、png
、png8
、jpg
、pjpg
、bjpg
、webp
、webpll
、webply
(例如:webp
)preferwebp
– 如果可能,传递 WebP 输出,忽略format
参数(参见关于内容协商的常见问题),布尔值(例如:true
)width
– 所需的图像分辨率(以像素为单位)必须大于 1(例如:400
)quality
– 所需的压缩,在 1
和 100
之间(例如:75
)c
– 所需的图像裁剪坐标,逗号分隔的像素值(例如:100,100,400,200
)r
– 所需的图像旋转,可以是 90
、180
、270
(例如:90
)flip
– 所需的图像翻转,可以是 h
、v
、hv
(例如:h
)有关示例 URL 和正则表达式,请参阅上一节为核心组件激活 Web 优化图像投放。
不,这不该发生。