Optimizing images is crucial for improving the performance of your AEM (Adobe Experience Manager) website. Below are some reasons why image optimization is important:

Faster load times: Large image files can significantly slow down the load time of a webpage. Optimizing images reduces their file size, which allows them to load faster, improving the overall performance of the page.

Improved user experience: Slow loading pages can frustrate users and cause them to leave a site. Optimizing images can help ensure that pages load quickly, providing a better user experience and keeping users engaged with the content.

Better SEO: Website speed is an important factor in search engine optimization (SEO). Pages that load faster tend to rank higher in search results. By optimizing images, you can improve the speed of your site, potentially boosting your search engine rankings.

Reduced bandwidth usage: Large image files consume more bandwidth. Optimizing images can help reduce bandwidth usage.

Mobile optimization: Mobile devices often have slower internet speeds and smaller screens, making it even more important to optimize images for performance. By reducing file size, images can load faster on mobile devices and take up less space on smaller screens.

Optimizing images on performance is critical for improving website speed, user experience, SEO, and mobile optimization. It is essential to optimize images on an AEM website for better overall performance.

How to optimize your site's images

To start optimizing, you need two things, to know which image to optimize and how to optimize it. 

Which image to optimize?
You can find out easily by doing the practice shared below.

You can easily find out oversized images you have in your DAM (Digital Asset Manager) folder by doing:

• navigate to your DAM folder
• switch to list view
• sort assests by size or
• sort assets by dimension

With this, you can see immediately see any images that has reach MB in size which should be optimized immediately. If an image has reached MB in size, no matter what the use case is, it can be optimized down to KB. Another oppportunity is the file's dimenson, your standard AEM site desktop size 1920x1080 or what we call Full HD. Anything larger than your site's resolution size should be downscaled and optimize.

If you are in a position to help out other teams to optimize their image and you don't have access to their DAM paths or you don't know where it is, then measurement tools like pagespeed.web.dev can help point out the opportunities for improvement.

• Visit pagespeed.web.dev
• place the URL (it's best to start with the home page), then hit analyze.
• It will now start scanning the page and once completed
• You can switch the result between mobile and desktop
• Scroll down and you'll see the section Properly size images
• Expand and it will list down all the oversized images

You can now then target these images and optimize them for web usage.

How to optimize the image?

You can use multitple tools to optimize your images, you can even ask your dedicated design team if you have to one to optimize for you but what we are sharing below is something you or your team can use immediately.

To optimize your images for the web, we can use Google's free web-based image optimization tool called Squoosh. This tool can be installed as an extension to your Chrome web browser and a desktop icon can be added in your desktop or taskbar.

To use: 

• Navigate to https://squoosh.app/ or open the extension from your desktop
• Drop the image you want to optimize
• Under compress, select Browser JPEG
• You'll immediately see the savings and you can adjust the slider accordingly
• The only time you would notice any difference is if you pixel peep
• download and then overwrite the image you have in the DAM 
• republish the pages and you'll now have a page that has optimized images

GIF below showing basic usage of the tool.

Example below shows an image from 3.6 MB down to 436 KB. I could also resize it to a teaser sized resolution if it is used as a teaser reducing the size further but not reducing the quality that the human eye can see unless you pixel-peep.