4 Tips for Optimizing Images in AEM

Let’s be honest, we love images more than words! Great images can boost your SEO, improve your overall customer experience, and simply make your site more appealing. But on the downside, they can potentially drag your page performance down. In this article I will suggest four tips you must consider when dealing with images in Adobe Experience Manager.

1. Load images at the right time

Beware of below-the-fold images!

These days it is more common than not that we will have a large quantity of images that are not visible to the user when the page initially loads. These images are “below the fold”, which means that the user must scroll the page before seeing them. Loading these images immediately means additional, unnecessary network resources (i.e. http requests) that can hurt performance.

So why not just delay loading these images? You can. Fortunately, the solution has been available for a while and is called “lazy loading” and, yes, AEM is able to implement lazy loading through the Image Component from the AEM Core Components.

If you’re using a pre-v3 version of Image Component, you must manually enable this option so authors can see this option in the component. The lazy load option can be enabled through policies so authors can use it as needed. On v3 lazy loading is enabled by default.

v2 Image Core component dialog options:

v3 Image Core component dialog options:

2. Use the right image type

“If the only tool you have is a hammer, you tend to see every problem as a nail.”
   — Abraham Maslow

If you’re not already, pay attention to the most appropriate image type (or file format) to use for different types of images within your website. For instance, don’t use JPEGs for all of your images. There are tons of image formats available today (e.g. webP, AVIF, SVG, PNG, etc.), and I could write a whole article on them, but I’ll keep it short: get familiar with the various image formats and their strengths and weaknesses. For example, JPG and webP are generally better for photographic images, PNG is usually better for illustrations and charts (and images with transparent backgrounds), while SVG is great for logos and icons that can scale with no loss in quality.

As you can imagine, AEM can help on this topic. If you are using AEM Sites and have Dynamic Media available to you, you can take advantage of Smart Imaging to properly deliver the best format you need. From the official documentation: “It works to enhance image delivery performance by automatically optimizing image format, size, and quality based on client browser capabilities.”.

And YES, it works as good as it sounds. Enabling and using Smart Imaging can be a little bit painful without help, but no worries, we are here to help.

3. Use the right size

“There is nothing more deceptive than an obvious fact.”
   — Arthur Conan Doyle

File size has a direct impact on performance. The heavier the image, the slower the response will be. So how do we guarantee we are using the correct size while using images in our pages? AEM has our back again; there are at least two ways we can be sure to use the correct size for an image when using AEM.

1. Use Image Core component

   Out of the box, this component provides the ability to specify different “widths” of the images which will be used at different breakpoints. This will guarantee that a small image can be served on a mobile device and a big image can be delivered on a desktop device. These options must be configured through the design dialog (policies).

   

2. Use Dynamic Media features

   Dynamic Media is a powerful ally. It comes with great features. We spoke above about Smart Imaging and how that can help deal with image type. Smart Imaging can also provide the correct size at the correct time on the correct device.

Beyond that, Smart Cropping, which comes out-of-the-box with the Dynamic Media implementation, can also solve this problem. You can set your own image profile to crop your images to specific dimensions, or you can just leverage Adobe Sensei (AI) to crop it for you. This will deliver a cropped (smaller) image.

4. Use the right cache strategy

Caching, as you may know, is one of the key performance aspects of AEM. For images it is very important to review the cache strategy. Below are some bullets points you can use to make sure you are in a good spot:

• Identify your cache layers so you can review their configurations.

• If you are using a CDN, make sure there is a reasonable Time To Live (TTL) set for assets. Depending on the CDN provider, you may be able to set TTL per asset type, so, for example, you could set a longer TTL for an SVG.

• Validate your dispatcher configs for assets. For example: cache mutable client library resources for about 12 hours. (Adobe’s documentation provides additional optimizations.)

Conclusion

AEM has the tools to help you optimize your images, and getting to know the tools and how to apply them to your needs is key. Performance matters, and image optimization is an essential component to a faster user experience.