我们如何在aem6.3大坝中压缩图像



我们正在尝试增加我们网站的页面分数(Google)。这样做的选择之一是" 图像优化"。

由于大坝中有大量图像,我们如何压缩/优化它们? AEM是否有任何这样的工具可以实现此

ImageMagick 是实现此目标的工具之一。我们是否需要将其与AEM集成,或者我们必须在使用该工具压缩它们后重新上传?

有什么建议?

与CSS,JS和HTML文件相反,可以使用调度器进行GZZ,只能通过降低质量或质量来压缩图像调整大小。

对于AEM项目而言,这是一个非常普遍的情况,有几个选择可以做到这一点,其中一些正在开箱即用,甚至不需要编程:

  • 您可以使用createwebenabledimageprocess工作流程步骤扩展DAM Update Asset。它允许您生成具有大小,质量,哑剧类型等参数的新图像演绎。根据工作流启动器的配置,可以在资产的创建或修改过程中生成此演绎。您还可以触发要在选择或所有资产上运行的工作流程。

  • 如果CreateWebEnabledImageProcess配置不足以满足您的要求,则可以使用诸如ImageHelper或某些Java框架进行图像转换,以编程性地实现自己的工作流程步骤并以编程方式生成适当的演绎。如果您要在Fly 上生成压缩图像,例如,也可能需要这一点,例如,您可以实现连接到适当的选择器和图像扩展的servlet(即imageName.mobile.png))返回压缩图像。

  • 最终,与ImageMagick的集成是可能的,Adobe Documentation描述了如何使用CommandLineProcess WorkFlow过程步骤来实现它。但是,您需要了解与文档中提到的有关的安全漏洞。

也值得一提的是,如果您的客户将来需要更高级的解决方案来进行图像转换,那么与动态媒体的集成也可以视为可能性,但是,这是最昂贵的解决方案。

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

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

这是AEM中的一个开箱即用的工作流程,在其中创建了图像的上传。您可以在IMG SRC属性中使用这些演绎路径。

2)使用ACS Commons Image Transformer

安装ACS Commons软件包,使用Image Transler Servlet配置来生成优化或转换的图像ACC达到要求。有关此检查ACS AEM CONSONS的更多信息。

3)在调度器级别中使用Google PagesPeed

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

aem为"图像优化"提供选项,但这是一个广泛的主题,因此没有"魔术"开关,您可以转向"优化"图像。所有这些都归结为从AEM转移到用户浏览器的千里或兆字节的数量。

资产的大小受两件事的影响:

  1. 资产维度(宽度和高度)。
  2. 压缩。

可以通过简单地减少资产维度来实现最大的收益。AEM已经做到了。如果您看一下资产启动,您会注意到,不仅有所谓的 Original 演绎,而且还有其他几个具有不同维度的再现。

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核心组件图像组件(github)
  2. AEM核心组件文档

通常,类似的组件不会使用 dam Update Asset Asset Workflow生成的"静态"演绎 Workflow,但会依靠自适应图像servlet。该servlet基本上获取资产路径和目标宽度,并将在请求的宽度中返回资产。为了避免一遍又一遍地这样做,您应该允许调度程序缓存结果图像。

这些只是您可以做的基本事情。可以做很多其他事情,但是所有这些都在"优化"方面越来越少。需要,我也研究了ImageMagick,并研究了各种选择。最终,我自定义了我们用来创建图像渲染的工作流程,以与另一个工具集成。我修改了它们,以使用kraken.io api自动发送给Kraken产生的演绎图像AEM,并在其中将它们完全优化(使用默认的Kraken设置)。我使用他们的Java集成库获取此集成的基本代码。因此,最终,我最终为所有生成的演绎(可以对原始)进行了适当的Web优化图像,这些图像在工作流程期间自动优化了,而无需作者必须手动重新上传图像。此API的使用需要KRAKEN许可。

因此,我相信答案是目前AEM无法提供实现此目的的功能,而您最好的选择是与另一个工具集成(自定义代码)。

tinypng.com是另一种图像优化服务,看起来对这种需求有好处,也有一个API。

和记录,我还将其作为功能请求提交给我们的AEM代表。对我来说,这似乎是一个明显的产品差距,我感到惊讶的是,该产品还没有内置,以使客户能够使图像完全优化。

最新更新