Optimize images in Magento 2

1. Introduction

Better user experience: When it comes to Magento or any ecommerce websites, images matter because their role is to capture the attention of the visitor. Relevant images – instead of “filler” images that only have the purpose to look pretty – enhance the user experience. They deliver a contextual message, which answers the need for information.

2. Types of Image formats

JPEG (or JPG)
PNG – Portable Network Graphics (.png)
GIF – Graphics Interchange Format (.gif)
WebP (.webp)
TIFF – Tagged Image File (.tiff)
PSD – Photoshop Document (.psd)
AI – Adobe Illustrator Document (.ai)
RAW – Raw Image Formats.

3. What is image optimization?

Image optimization is the process of creating and delivering high-quality images in the ideal format, size, and resolution to increase user engagement. It also involves accurately labeling images so search engine crawlers can read them and understand page context.

This process also involves delivery images as per device size and resolution.

4. Why is image optimization important?

Image optimization helps in improving page load speed, boosts websites’ SEO ranking, and improves user experience.

When images payload is higher then following will be impacted:

These three are directly proportional.

i) LCP

ii) Speed Index

iii) Time to interactive

Other parameters that will be impacted are :

i) Total Blocking time ( as browser might give a higher priority to image download holding back JS which will result in higher blocking time )

5. An image format for the WebP :

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP includes the lightweight encoding and decoding library libwebp and the command line tools cwebp and dwebp for converting images to and from the WebP format, as well as tools for viewing, mixing and animating webP images. The full source code is available on the download page.

Due to better compression of images and support for all these features, WebP can be an excellent replacement for most image formats: PNG, JPEG or GIF. You can see from the below example that WebP offers over 50% saving in image size for the same picture quality.

There are modules that can be used to do the following :

1. Convert catalog images and other images dynamically into webP images.

2. Install a module that allows uploading webP images.

5.1. Modules recommended for webP :

Magento 2 WebP is the extension for Magento 2 that allows you to reduce the size of images by converting them to next-generation image format – WebP.

This provides superior compression for images and decreases fille size improving your website performance that is one of the most important factors of user experience and SEO.

– WebP Images Extension by Magefan :

Compatibility: Magento 2.2.x- 2.4.x (CE, EE, ECE, B2B)

https://magefan.com/blog/best-magento-2-webp-images-extensions

– WebP Images by Yireo :

Compatibility: Magento 2.2.x, 2.4.x (CE, EE)

https://magefan.com/blog/best-magento-2-webp-images-extensions

– WebP Optimized Images Extension by JaJuMa

Compatibility: Magento 2.0, 2.4 (CE, EE)

https://magefan.com/blog/best-magento-2-webp-images-extensions

– WebP Images for Magento 2 by FME extensions

Compatibility: Magento 2.1.x- 2.4.x (CE, EE)

https://magefan.com/blog/best-magento-2-webp-images-extensions

– Magento 2 WebP Image Support by MageComp

Compatibility: Magento 2.1.x- 2.4.x (CE, EE)

https://magefan.com/blog/best-magento-2-webp-images-extensions

6. Techniques to Optimize images in Magento 2?

Here is what you can do to optimize images on your Magento store.

Serve scaled images

Scaled images are used to resize images and their display size as close as possible to original image size. It is necessary to pay attention to image sizes and use perfect size images on your website.

You can audit your site in one of the speed optimization audit tools like GtMetrix or PSI to find the oppurtunities due to the present sizes of the images you are using on the website. These tools also give a recommendation on the extent of scaling down you need to do to optimize the images.

As shown in the screen below, the original image size was 101.9 KiB and the scaled down version is 50 KiB, which can then be uploaded on your website.

As an example of scaling, say, your Magento website banner size is 1440 x 400 pixels. During the display on the website, the image size used is 2000 x 900 pixels. As a result, the user’s browser has to download and scale the picture down before displaying it. This process will slow down the loading time as image payload is higher . This problem can be overcome if you scale down the image to 1400 x 400 pixels before uploading it onto your Magento website. Smaller images use lesser space and also speed up your site, which, in turn, improves your site’s SEO and ranking too.

Image Compression

Optimize images by compressing images to reduce their size without damaging their picture quality. There is a variety of offline tools, online tools and extensions available for image compression. These tools & extensions help to compress images without notable deterioration in quality, while providing significant size reduction.

The Google PageSpeed Insight tool can also give a good indication of the optimized image size. If you run the page through this tool, you can get recommendations on how to optimize image size without compromising on its quality – as seen on the screenshot below:

Use WebP for Optimizing Images in Magento 2

WebP is a modern image format and it is supported in Google Chrome, Firefox, Edge, the Opera browser, and by many other tools and software libraries. WebP helps to optimize images faster and reduce image sizes without compromising on the picture quality. For your website image optimization, you can choose the Magento 2 WebP Images extension that helps you to automatically convert all current and future images on your website to WebP format. Using WebP, web masters and web developers can create smaller, richer images that make the page load faster. WebP images are about 30% smaller in size compared to PNG and JPEG images at equivalent visual quality.

You Might Be Interested In: Magento 2 Speed Optimization Services

WebP includes the lightweight encoding and decoding library libwebp and the command line tools cwebp and dwebp for converting images to and from the WebP format, as well as tools for viewing, mixing and animating WebP images. The full source code is available on the download page.

Lazy Loading

When a user opens a webpage, all the contents of the page are downloaded, including all images in it. Obviously, if the web page contains more images, then it will take more time to load. Lazy loading is a technique to help you prevent the downloading of unnecessary images. Instead of loading all images at one time, the images are loaded only when the user accesses the part of the page that relates to these images. With lazy loading, on-screen images above fold are loaded first, and the remaining images are gradually loaded as and when the user scrolls through the page.

lazy loading should be applied to all images that are not visible above fold.

Why Lazy Loading:-

Lazy Loading defers the loading of an image that is not needed on the page immediately. An image, not visible to the user when the page loads, is loaded later when the user scrolls and the image actually becomes visible.

These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs.

This helps improve LCP and Speed index.

Lazy Load Offscreen Images:-

Deferring offscreen images has three crucial benefits

Speed : Lazy loading reduces the initial page payload by cutting the number of images that need to be loaded upfront. As a result, browsers can render the page much faster due to reduces payload.
Resource savings : Deferred images are only processed if the visitor needs them. This reduces the total number of bytes delivered on the page for users who bounce immediately or don’t scroll down. If your CDN provider charges based on data transfer and HTTP requests, lazy loading can literally save you money. The same is true for visitors on limited data plans;
Better resource utilization. Since some images are never loaded, lazy loading also saves resources like battery and processing time.

Identification in any tool for lazyload:-

The Opportunities section of your Page speed insight report lists all offscreen or hidden images in your page along with the potential savings in kibibytes (KiB). Consider lazy-loading these images after all critical resources have finished loading to lower Time to Interactive

Code for Lazyload :-

Before :-

< img src=”pub/media/wysiwyg/placeholder-565×300.jpg” alt=”lazyloadimg” width=”300″ height=”300″ data-src=”pub/media/wysiwyg/lazyloadimg.jpg” / >

After:-

Eg:- < img class=””lazyload”” src=”pub/media/wysiwyg/placeholder-565×300.jpg” alt=”lazyloadimg” width=”300″ height=”300″ data-src=”pub/media/wysiwyg/lazyloadimg.jpg” / >

With JavaScript:-

< script src=”lazysizes.min.js defer=’’” >< /script >

How to test if lazy loading is working :-

Once you have implemented lazy loading, you will want to check if the behavior of images on your website is as intended. The simplest way is to open developer tools in Chrome browser.

Go to Network Tab > Images.

Here, when you refresh the page for the first time, only the images that are to be loaded up front should get loaded. Then, as you start scrolling down the page, other image load requests would get triggered and loaded.

You can also notice the timings for image load in the waterfall column in this view. It would help you identify image loading issues, if any, or issues in triggering the image load.

Module for lazyload :-

=> Magefan extensions

https://magefan.com/magento-2-image-lazy-load-extension

=> Navigate to Stores > Configuration > Magefan Extensions > Lazy Load. Enable the extension by choosing “Yes” in Enabled select box and define blocks (Lazy Load Blocks text area) for which images should be loaded via lazyload.

We can apply for lazyload ignore images that contains:-

Admin setting for lazyload in Magento2:-

Store=>configuration=>Amasty Extension=>Google Page speed optimizer=>image optimization=>Lazyload

Before:-

After:-

Use the HTML < picture > tag

The most common use of the < picture > tag is to load the multiple images of different sizes and resolutions, which can be best fit for different viewports, Instead of having one image that is scaled up based on the view port width, multiple images can be designed to load as per requested browser view port.

The < picture > element contains two tags: one or more tags and one tag.

The browser will look for the first element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).

How to use the < picture > tag :

< picture style=”width:100%” >
< source media=”(max-width: 414px)” srcset=”//banner1-414.jpg” >
< source media=”(max-width: 768px)” srcset=”//banner1-768.jpg” >
< source media=”(max-width: 1400px)” srcset=”//banenr1-1400.jpg” >
< source media=”(max-width: 1920px)” srcset=”//banner1-1920.jpg” >
< /picture >

Use CDN

A Content Delivery Network (CDN) is used to store media files and JS / CSS files. Content Delivery Networks are the preferred means to serve images for your online store. A CDN distributes your images over a secure network of servers around the world. So when a user accesses your site, they get connected to the edge server closest to there location.

How does it work?

When customers open stores in the browser, the browser requests the media that is specified in the HTML.
The request is sent first to the CDN. If the CDN has the images in storage, it serves the media files to the customer’s browser.
If the CDN does not have the media files, the request is sent to the Magento web server. If the media files are found in the file system, the web server sends them to the customer’s browser.

Backend Configuration

Login to the Magento backend, go to the Stores->Settings->Configuration
In the left panel, go to General->Web
Expand the Base URLs section and do the following
Update the Base URL for Static View Files with the URL of the location on the CDN where static view files are stored.
Update the Base URL for User Media Files with the URL of the JavaScript files on the CDN. Both these fields can be left blank, or can start with the placeholder: {{unsecure_base_url}}

Expand the Base URLs (Secure) section and do the following:

Update the Base URL for Static View Files with the URL of the location on the CDN where static view files are stored.
Update the Base URL for User Media Files with the URL of the JavaScript files on the CDN.Both these fields can be left blank, or can start with the placeholder: {{unsecure_base_url}}
Once you fill these details click on Save Configuration.

Other tools to optimize images

Since high resolution images negatively impact the website speed, especially on mobile devices, images can be optimized for size either through Photoshop or by using other available online tools for this purpose.

Replace images with fonts and icons

variety of fonts and in-built icons are available which can be used to replace images, especially those of generic nature such as hearts, stars, thumbnails, shopping carts, and so on. To optimize your Magento website for images, the number of images can be reduced and instead replaced with fonts and icons wherever possible.

Generate Sprite

Sprite is a container that unites a multiplicity of small and simple pics – such as stars, hearts, thumbnails, and so on, into one big image. This way, the user gets to download one single image instead of querying and spending time downloading every little element. CSS sprites are perfect if you have many images that can’t be replaced with icons. Instead of using separate images icons on the header like social icons, mini cart icon, my account icon, search icon, you can use the sprite image and add all these icons in a single image and use that.

Conclusion:

Present websites have per page image payloads of above 2.5 MB in general and 50 plus image request
If following is used :

Advanced image format ( webP ).
Lazy Loading
Image sprites

then the payload can be down to less then 1 MB( atleast for above fold ) also number of requests will go down due to lazy loading and image sprite.

We have attempted to show you the various techniques to optimize image sizes in your Magento 2 online store so that page loading speeds can be improved. Images are the selling factor in any online store and are indispensable for any online eCommerce website. But the use of high-resolution images needs to be tempered with the concern for site speed. We recommend the use of image optimization tools and techniques listed above.