Optimize images in Magento 2

Dec 22, 2020 | 06 min read

Optimize images in Magento 2

1. Introduction

Pertinent and clear images are critical for the success of your online store. The use of images is a trade-off between the quality of the images and the loading speed of the site. The main things to take care of when using images are the image resolution (the resolution should be clear enough to attract the user but not so high that it impacts site performance) and the image format (should follow the standard – non-standard formats tend to slow down the page loading speed, or worse, users may not be able to download or view the images in non-standard formats at all). Images are a major factor affecting website speed. Higher resolution images have larger file sizes and that can negatively impact the site speed, especially on mobile devices. Images take up 70% of all data downloaded by the web browser. So you cannot underestimate the importance of making images faster, lighter, and more streamlined.
It is imperative that you optimize the images on your Magento 2 website to get the best out of it. In this article, we examine the various techniques to optimize images so that your Magento store can load quicker.

2. 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 know the restrictions due to the present sizes of the images you are using on the website. These sites 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 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. This problem can be overcome if you scale down the image to 1400 x 400 pixels before uploading it onto your 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 online tools and extensions available for image compression in Magento 2. These tools & extensions help to compress images without any 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.
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.

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 handy skill 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 are loaded first, and the remaining images are gradually loaded as and when the user scrolls through the page. For Example, if your web page contains 100 or more images then instead of loading all the images at one time we can add images in lazy loading and load only required images on page scrolling.

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 viewport width, multiple images can be designed to load as per requested browser viewport.
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. 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, she gets connected to the server closest to her location.

How does it work?

  1. When customers open stores in the browser, the browser requests the media that is specified in the HTML.
  2. 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.
  3. 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

Magento offers a variety of fonts and in-built icons 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:

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.
Dec 22nd, 2020|
This website or its third party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy policy . By tapping on "I accept" you agree to the use of cookies.