我们正在尝试增加我们网站的页面分数(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转移到用户浏览器的千里或兆字节的数量。
资产的大小受两件事的影响:
- 资产维度(宽度和高度)。
- 压缩。
可以通过简单地减少资产维度来实现最大的收益。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核心组件。这些核心组件包含一个支持响应图像的图像组件。您可以在此处阅读有关这些信息的更多信息:
- AEM核心组件图像组件(github)
- 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代表。对我来说,这似乎是一个明显的产品差距,我感到惊讶的是,该产品还没有内置,以使客户能够使图像完全优化。