0

我们正在努力提高我们网站的页面分数（谷歌）。执行此操作的选项之一是“图像优化”。

由于我们在 DAM 中有大量图像，我们如何压缩/优化它们？AEM 有没有这样的工具来实现这一点？

ImageMagick是实现这一目标的工具之一。我们是否需要将其与 AEM 集成，或者我们必须在使用该工具压缩它们后重新上传所有图像？

有什么建议么？

4

4 回答 4

2

与可以使用 dispatcher 压缩的 CSS、JS 和 HTML 文件相比，图像只能通过降低质量或调整大小来压缩。

对于 AEM 项目来说，这是一个很常见的情况，有几个选项可以做到这一点，其中一些是开箱即用的，甚至不需要编程：

  • DAM Update Asset您可以使用CreateWebEnabledImageProcess Workflow Process Step进行扩展。它允许您使用大小、质量、mime 类型等参数生成新的图像再现。根据工作流启动器配置，可以在创建或修改资产期间生成此再现。您还可以触发工作流在选定或所有资产上运行。

  • 如果CreateWebEnabledImageProcess配置不足以满足您的要求，您可以实现自己的工作流程处理步骤并以编程方式生成正确的再现，例如使用ImageHelper或一些用于图像转换的 Java 框架。如果您要开发的压缩映像，例如，也可能需要，例如，您可以实现连接到适当的选择器和图像扩展名（即imageName.mobile.png）的Servlet，而不是为每个上传的图像生成演绎，以返回压缩图像。

  • 最终，与 ImageMagick 的集成成为可能，Adobe 文档描述了如何使用CommandLineProcessWorkflow Process Step 来实现。但是，您需要注意文档中提到的与此相关的安全漏洞。

还值得一提的是，如果您的客户将来需要更高级的图像转换解决方案，那么也可以考虑与 Dynamic Media 集成，但这是最昂贵的解决方案。

于 2017-09-12T16:17:00.163 回答
1

在 AEM 中有多种优化图像的方法。在这里，我将介绍其中的 3 种方式。

1) 使用 DAM 更新资产工作流程。

这是 AEM 中开箱即用的工作流程，在上传图像时会在其中创建再现。您可以在 img src 属性中使用这些演绎版路径。

2）使用ACS commons Image Transformer

安装 ACS commons Package ，使用 Image Transformer Servlet config 根据要求生成优化或转换的图像。有关此检查的更多信息ACS AEM commons。

3) 在调度程序级别使用 Google PageSpeed

如果您想减小图像的大小，可以考虑使用 Google PageSpeed。在调度程序级别安装 PageSpeed 并添加图像优化规则以实现您的要求。此规则 Insights 检测页面上可以优化以减小其文件大小而不显着影响其视觉质量的图像。有关更多信息，请在此处查看优化图像

于 2017-09-15T07:20:38.093 回答
0

AEM 提供“图像优化”选项，但这是一个广泛的主题，因此没有“魔法”开关可以用来“优化”图像。这一切都归结为从 AEM 传输到用户浏览器的千字节或兆字节的数量。

资产的大小受两个因素影响：

  1. 资产尺寸（宽度和高度）。
  2. 压缩。

最大的收益可以通过简单地减少资产维度来实现。AEM 已经这样做了。如果您查看您的资产演绎版，您会注意到不仅有所谓的原始演绎版，还有其他几个不同尺寸的演绎版。

MyImage.jpg
└── jcr:content
    └── renditions/
        ├── cq5dam.thumbnail.140.100.png
        ├── cq5dam.thumbnail.319.319.png
        ├── cq5dam.thumbnail.48.48.png
        └── original

演绎版名称中的数字是演绎版的宽度和高度。所以有一个版本，MyImage.jpg宽度为 140 像素，高度为 100 像素，依此类推。

这一切都是在DAM Update Asset上传图像时由工作流完成的，并且可以修改以生成更多不同尺寸的再现。

但是生成不同尺寸的图像只是故事的一半。AEM 必须在正确的时刻选择具有正确尺寸的再现。这通常被称为“响应式图像”。AEM 图像组件不支持开箱即用的“响应式”图像，并且有多种方法可以实现此功能。

它的要点是您的图像组件必须包含不同大小的再现的 URL 列表。当页面呈现客户端时，JavaScript 确定哪种再现最适合当前屏幕大小，并将 URL 添加到imgtagssrc属性。

我建议您查看 AEM 中未包含的相当新的 AEM Core 组件。这些核心组件包含一个支持响应式图像的图像组件。您可以在此处阅读有关这些内容的更多信息：

  1. AEM 核心组件图像组件 (GitHub)
  2. AEM 核心组件文档

通常，这样的组件不会使用DAM 更新资产工作流已经生成的“静态”再现，而是依赖于自适应图像 Servlet。这个 servlet 基本上获取资产路径和目标宽度，并将返回请求宽度的资产。为避免一遍又一遍地这样做，您应该允许 Dispatcher 缓存生成的图像。

这些只是您可以做的基本事情。还有很多其他的事情可以做，但所有这些事情在“优化”方面的收益越来越少。

于 2017-09-11T14:48:53.360 回答
0

我也有同样的需求，我也研究了 ImageMagick 并研究了各种选择。最终，我定制了我们用来创建图像再现的工作流程，以便与另一个工具集成。我修改了它们以使用Kraken.io API 将 AEM 生成的再现图像自动发送到 Kraken，在那里它们将完全进行网络优化（使用默认的 Kraken 设置）。我使用他们的Java 集成库来获取此集成的基本代码。因此，最终我为所有生成的演绎版（对原始版本也可以这样做）进行了适当的网络优化图像，这些图像在工作流程中自动优化，无需作者手动重新上传图像。此 API 使用需要 Kraken 许可证。

所以我相信答案是，目前 AEM 没有提供实现这一点的功能，最好的办法是与另一个可以做到这一点的工具（自定义代码）集成。

TinyPng.com是另一个图像优化服务，看起来很适合这种需求，并且也有一个 API。

作为记录，我还将此作为功能请求提交给我们的 AEM 代表。对我来说，这似乎是一个明显的产品差距，令我惊讶的是，该产品还没有内置到允许客户制作完全网络优化的图像。

于 2017-09-11T18:25:36.330 回答