Web 优化图像投放

了解核心组件如何利用 AEM as a Cloud Service 的 Web 优化图像投放功能来更有效地投放图像。

概述

AEM as a Cloud service 的 Web 优化图像投放功能以 WebP 格式从 DAM 投放图像资产。 WebP 平均可将图像的下载大小减小约 25%，从而加快页面加载速度。

在核心组件中激活 Web 优化图像投放非常简单，而且由于所有常用浏览器都支持 WebP，因此体验对最终用户是透明的。 他们会注意到的唯一区别是内容加载速度更快！

激活核心组件的 Web 优化图像投放

要启用 Web 优化图像投放，请编辑页面模板并只需激活选项​启用 Web 优化图像​的“设计”对话框中图像组件。 此选项适用于图像组件的 v1、v2 和 v3。

如果您不熟悉设计对话框和 AEM 页面模板，请查阅此文档。

在“设计”对话框中启用 Web 优化图像投放

就是这样！图像现在由图像组件以 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=&]*)?

验证 WebP 投放

Web 优化图像投放对内容的消费者是透明的，不会影响标记。 最终用户只会注意到加载时间更短。

因此，要观察行为的实际变化，您必须查看页面源。

  1. 在 AEM 中，编辑基于模板的页面，您在该模板中为图像组件激活了 Web 优化图像投放。
  2. 在页面编辑器中，选择左上角的​页面信息​按钮，然后选择​查看已发布。
  3. 使用您的浏览器开发工具，查看页面源代码并查看呈现的标记如何保持不变，但 src 属性中的图像指向新图像服务的 URL。

当 Web 优化图像投放不可用时

Web 优化图像投放仅在 AEM as a Cloud Service 中可用。 如果无法使用该功能(例如在内部部署或在本地开发实例上运行 AEM 6.5)，则图像投放将回退到使用自适应图像 Servlet。

正如启用 Web 优化图像投放不会影响标记一样，回退到自适应图像 Servlet 也不会影响标记，因为只有 img 元素的 src 属性中的 URL 发生了变化。

常见问题解答

为什么在我的环境中未启用 Web 优化图像的此类选项？

该功能仅在 AEM as a Cloud Service 上可用。 在本地运行或内部部署 AEM，图像组件 回退以使用自适应图像 Servlet。

为何该服务不与本地 SDK 一起使用？

在 localhost 上使用 AEM SDK 时，图像服务不可用，图像渲染退回以使用自适应图像 Servlet。

要使用 Web 优化图像投放服务，请将项目部署到 AEMaaCS 开发环境，以便能够准确测试图像服务与图像服务的行为方式。

为什么该服务不适用于我页面上的某些图像？

图片服务仅适用于位于 /content/dam 下的资产，不适用于直接上传到页面并存储在 cq:Page 对象下的图片。 此类资产仍将作为回退的自适应图像 Servlet 投放。

为什么该服务会显示质量较差的图像或限制图像的大小？

Web 优化图像服务会考虑所有 2048 像素和更小的图像呈现，并选取最大的图像演绎版作为应用所请求设置（宽度、裁切、格式、质量等）的基础。

图像服务永远不会放大图像。 因此，这些演绎版定义了图像服务能够投放的最佳大小和质量。 因此，请确保您的资产都具有 2048 像素的缩放演绎版，如果没有，则重新处理它们。

我的图片的 URL 仍然以 .JPG 或 .PNG 结尾，而不是 .WEBP，并且没有 SRCSET 属性或 PICTURE 元素。 这是否真的在使用优化的 Web 格式？

为了提供 WebP 格式，Web 优化图像投放服务使用了一种称为“内容协商”的技术。 这包括返回 WebP 文件格式，即使在请求 JPG 或 PNG 文件扩展名时也是如此，但仅当发出请求的浏览器提供了 image/webp HTTP 接受标头。 然后，支持此技术的浏览器可以提供此标头，而较旧的浏览器仍将获得 JPG 或 PNG 文件格式。

这种技术的优点是img元素及其属性可以保持不变，这将为现有站点带来最佳兼容性，并确保向 web 优化图像投放过渡的最顺畅路径。

我能否将 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 是什么？

有关示例 URL 和正则表达式，请参阅上一节为核心组件激活 Web 优化图像投放。

启用 Web 优化图像后，图像是否无法显示？

不，这不该发生。

  • 在 HTML 中，启用 Web 优化图像时，标记不会更改，只有图像元素上 SRC 属性的值会更改。
  • 每当新的图像服务不可用或无法处理所需的图像时，生成的 URL 将回退到自适应图像 Servlet。
  • 调度程序规则可能会阻止网络优化的图像服务，激活该功能时应检查。

在此页面上