我们如何在DAM AEM6.3中压缩图像？

Question

我们正在努力为我们的网站增加网页分数（谷歌）。其中一个选项是“图像优化”。

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

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

有什么建议吗？

Answer 1

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的版本，其宽度为140px，高度为100px，依此类推。

这是所有由DAM Update Asset工作流时的图像上载，并且可以进行修改，以产生更多的引渡具有不同尺寸的完成。

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

它的要点是，你的图像分量的包含不同大小引渡的URL列表。当呈现页面时，客户端JavaScript确定哪个呈现最适合当前屏幕大小，并将URL添加到img标记src属性。

我建议你看看它不包含AEM的相当新的AEM核心组件。这些核心组件包含支持响应图像的图像组件。你可以阅读更多有关这些位置：

1. AEM Core Components Image Component (GitHub)
2. AEM Core Components Documentation

通常情况下，这样的组件将不会使用已经由DAM更新资产工作流程产生的“静态”的演绎，但将依赖于自适应图像Servlet。这个servlet基本上获取资产路径和目标宽度，并将以所请求的宽度返回资产。为了避免这样做，你应该允许Dispatcher缓存结果图像。

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

Answer 2

我有同样的需要，我也看着ImageMagick也研究了各种选项。最终，我定制了我们用来创建图像格式以与其他工具集成的工作流程。我修改了它们以使用Kraken.io API自动将制作的再现图像AEM发送到Kraken，并在那里完全进行网页优化（使用默认的Kraken设置）。我用他们的Java integration library来获得这个集成的基本代码。因此，最终我最终得到了针对所有生成的渲染的正确Web优化的图像（并且可以对原始图像进行相同的处理），这些图像在工作流程中自动优化，而不需要作者手动重新上传图像。此API使用需要Kraken许可证。

所以我相信答案是在这个时候AEM并没有提供实现这个功能的功能，你最好的选择是与另一个工具（定制代码）集成。

TinyPng.com是另一种图像优化服务，看起来好像它会有这种需求，并且还有一个API。

并且为了记录，我还将此作为功能请求提交给我们的AEM代表。这对我来说似乎是一个明显的产品差距，我感到惊讶的东西还没有被建立到产品中，而是让客户能够对图像进行完全的网络优化。

Answer 3

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

这是AEM项目很常见的情况，并有几个选项要做到这一点，他们中的一些是来乱的盒和甚至不需要编程：

• 您可以使用CreateWebEnabledImageProcess工作流程处理步骤扩展DAM Update Asset。它可以让你生成新的图像再现与大小，质量，MIME类型的参数。根据工作流启动程序配置，可以在创建或修改资产期间生成此演示文稿。您还可以触发工作流在选定或所有资产上运行。

• 在情况下CreateWebEnabledImageProcess配置不足以满足您的要求，您可以实现自己的工作流流程步骤和程序生成正确的翻译，例如使用ImageHelper或图像转换一些Java框架。例如，如果您想要在运行上生成压缩图像，则可能还需要这样做，而不是为每个上传的图像生成再现，您可以实现附加到适当选择器和图像扩展的servlet（即。imageName.mobile.png），它返回压缩图像。

• 最终，与ImageMagick的集成是可能，Adobe documentation描述了如何能够使用CommandLineProcess工作流程过程步骤来实现。但是，您需要注意与文档中提到的相关的安全漏洞。

还值得一提的是，如果你的客户需要在未来形象的转型更先进的解决方案，然后integration with Dynamic Media也可以被看作是一种可能性，但是，这是最昂贵的解决方案。

Answer 4

有很多方法可以优化AEM中的图像。在这里，我将通过其中三种方式。

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

这是AEM中的一款开箱即用的工作流程，其中创建了图像渲染上传。您可以在img src属性中使用这些呈现路径。

2）使用ACS公地图片变压器

安装ACS公地封装，使用图像变压器servlet配置以生成优化的或变换图像ACC到要求。有关此检查的更多信息ACS AEM commons。

3）在调度程序级别

使用谷歌的PageSpeed如果你想减少图像的大小，谷歌的PageSpeed是值得考虑的选择。在调度程序级别安装PageSpeed并添加图像优化规则以实现您的要求。 此规则Insights检测页面上可优化的图像，以减少文件大小，而不会显着影响其视觉质量。 欲了解更多信息，请点击此处Optimising Images