As E-commerce websites necessarily use more images in products and services. It’s important to optimize your images on the page to make sure that
They are fast and easy. Here are five tips to Optimize images.
01: Correct the size of your images.
Put the right width and height for your images. Larger files take longer to download, particularly on mobile phones with low network connections. As well as larger files also require more time to process, especially on mobiles with less powerful CPUs. You can detect Incorrectly sized images using the properly sized images section under opportunities in the page speed insights report. Pagespeed
Insights identifies images on a page that have a larger dimension than needed, you can fix this problem by listing their URLs.
E.g: In HTML there is a set of attributes that allows you to list URLs for different sizes and the browser can choose the best one to download.
Note:
This requires you to resize the images in advance. If resizing images think of using Content Delivery Network (CDN) services like this can resize images and convert them to more efficient formats on your behalf.
02: make ensure the file format of your images.
such as whether it is PNJ, JPEJ, or Webp files. The file format affects the size. Files such as JPEG Webp can reduce files using lossy compression algorithms. ‘lossy’ means image quality may be reduced as a trade-off for reducing the file size.
03: Compress images properly.
Select the optimal quality level for efficient encoding that maintains the desired image clarity.. Encodeing images sections of the pagespeed insight report can be used to indentfy candidate images for compression optimization the report also show potential file size savings. The report is based on commonly used compression factors. To find a quality factor, use your favorite image conversion on several images using different methods quality values. Site like squoosh.app can be usefull for this purpose.
04: Cache images in the browser.
You could tell the browser how long it can safely cache images. You can include an HTTP responsive header with caching guidance, such as how long it is suggested for a browser to change an image. You can detect if the HTTP responsive cache headers have been
sent appropriately to your site using the Pagespeed insights roport.
05: Eliminate image cumulative layout shift.
Cumulative Layout Shift (CLS): CLS occurs when page content unexpectedly jumps or shifts on the screen, disrupting the user’s reading flow or interrupting clicks. This jarring experience negatively impacts user satisfaction.
Google recognizes CLS as a crucial aspect of Core Web Vitals, a set of metrics that measure user experience across the web. Images can significantly contribute to CLS if not handled correctly. To render a web page efficiently, browsers typically start displaying the top portion of the page before all elements are fully loaded. During this process, images and other resources (like JavaScript and CSS files) are queued for download.
The issue arises when
Leave excessive space for the image: This can lead to large areas of blank space that later shift when the image loads, causing CLS.
Render content around the image placeholder: If the image turns out to be larger than anticipated, it will push the surrounding content down, resulting in unexpected shifts. You can visually detect CLS by observing page loading, automated tools provide more accurate measurements. To minimize CLS caused by images: Specify image dimensions; Always include width and height attributes in your HTML image tags.
This tells the browser how much space to allocate for the image before it loads, preventing unexpected layout shifts
Important Note:
Remember that other factors can also trigger CLS, such as dynamically loaded content or JavaScript animations.