Bride Show Dubai is part of the Informa Markets Division of Informa PLC
This site is operated by a business or businesses owned by Informa PLC and all copyright resides with them. Informa PLC's registered office is 5 Howick Place, London SW1P 1WG. Registered in England and Wales. Number 8860726.
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.
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:
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.
You can now then target these images and optimize them for web usage.
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:
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.
As part of the image optimization, you can do one more step to increase your page's performance and that is using the lazy loading feature. Lazy loading is a technique that delays the loading of images until the user scrolls to the part of the page where they are located. This can significantly improve page load times, especially for pages with many images.
All you need to do is open the component dialog window and tick on Enable Lazy Loading, this feature is available on the following components: