Magento 2 Image Optimization: Best Practices for 2022

Image optimization has to be your priority when it is about boosting Magento 2 conversion rate. Otherwise, your online store will encounter reduced site traffic and page loading speed.

Therefore, image optimization is a must.  It will make your customers satisfied and give them the best shopping experience. In this article, we present to you the best image optimization in Magento 2 store tips for 2022.

Tips to optimize images in Magento 2 store

When your website images are not optimized then, your page will take more time to load.  If your site is loading slow (taking almost 3 seconds) then, there will be a drop in the site ranking, user experience, etc. Many practices are there that help you to optimize images. Though every technique needs technicality, hence, choose the one that fits your requirements.

1. Standardized product images

Many product images can be optimized at one time by executing the compression in:

“/media/catalog/product/”

Tools such as OptiPNG, JPEGTran, GIFSicle, etc can be used. The command line aims to change the content images to their optimized version. Its process does not require any change of the file name. You can also optimize the cache images without even refreshing them.

• PNG images: With OptiPNG

optipng -o7 -strip all media/catalog/product/*.png

• JPEG images: With JPEGTran

search media/catalog/product/ -name “*.jpg” -type f -exec jpegtran -copy none -optimize -outfile {} {} \;

• GIF images: With GIFSicle

gifsicle –batch –optimize=3 media/catalog/product/*.gif

2. Adjusting the image size

The measure which is responsible for any change in the image size is resolution, known as Pixels. You can find it out by the height and width of the image and the number of pixels.

To believe, image size tends to give the right image compression outcome. Check out the below way to carry it out:

– Maintain the original image aspect ratio

The relationship of height and width is termed the Aspect ratio. Basically, it is written as; 1:2, 4:6, etc.  The major issue many eCommerce stores are facing is the product image and the uploaded product images have separate aspect ratios.

Consider an example.  There is a photo that is 1080 pixels wide and 1920 pixels high. Its aspect ratio will be 16:9.  Though, your product image size is defined by CSS. It assumes the size as 600X600, and 1:1 would be the aspect ratio.  This change in the aspect ratio is the reason that the uploaded image gets distorted and fits in the frame. And, that is why the image becomes distorted.

Certainly, when the visitors visit the online store and check such images, they will get disappointed, abandon your site and move to other sites.

Just keep the aspect ratio of the product image and original image the same. It will resize the image and maintain its beauty. 

– Compress images in the online Magento store

Many say that it is impossible to compress an image without compromising its quality.  It is an old saying. With the occurrence of new or unique technologies, several online tools, and solutions came into existence in the market. Several Magento eCommerce development services are helpful in the image compression process and maintain the image quality.

• Many leading tools are; OptiPNG, Jpegtran, Gifsicle, Mageplaza Image Optimizer, etc.  These assist in compressing an image without lessening the image quality.

• Google PageSpeed Insights: When you use this tool for page tests, there will be instructions on improving the performance of the online store. Additionally, the images can also be optimized particularly for Google Page Speed. The reason is that it gives details on how much a user can get.

– Create images of suitable size

Magento’s online store has its own needs for the image size of a product. It should not be less than 1200 wide and 1920px.  Hence, Magento prefers distorting the image which is higher than the mentioned one.

→ More about Magento SEO: The Complete Magento 2 SEO Checklist and Guide

3. Use an accurate image format

With the correct image format, you can lessen the image file size.  Few image formats such as PNG and JPEG are best for web images and photos. Whereas BMP and GIF have fewer colors and are best for fewer resolutions such as icons, buttons, and logos. To understand the image format to be used in an image, check the below chart:

Purpose	Best formats
Icons, Buttons	GIF
Product images	PNG, JPEG
Logos	SVG

4. Change GIFs with videos

Of course, GIF is the right way to make the content engaging. However, it is not the best one when it is about improving the page loading speed.  Choose videos though!

You can change the GIF to WebM or MP4 video. However, check if it is possible with Google Lighthouse or not. When there are suggestions on converting GIFs, then, there would be a suggestion of “Use video formats for animated content”.

Next is to convert GIFs. To have an MP4 video, work on FFmpeg. It is advised to run the below command in the console:

ffmpeg  -i  my-animation.gif  -b:v  0 - crf  25  -f  mp4  -vcodec 1ibx264 -pix_fmt  yuv420p my-animation.mp4

It indicates FFmpeg to use the input as “my-animation.gif” given by the “-i flag”. For converting it to video, use “my-animation.mp4”. When the GIFs dimensions is different, include a crop filter link as shown below:

<code>ffmpeg  -i  my-animation.gif  -vf  “crop=trunc(iw/2)*2:trunc(ih/2)*2”  -b:v  0  -crf  25  -f  mp4  - vcodec  libx264 -pix_fmt  yuv420p  my-animation.mp4</code>

For WebM video, run this command in your console: 

ffmpeg  -i  my-animation.gif  -c  vp9  -b:v  0  -crf  41  my-animation.webm

5. WebP to improve Magento 2 speed

A certain way for Magento 2 Performance Optimization is to amend the image format. WebP is an image format approved by Google itself. Especially for sites that have issues of loss of image quality and lossless compression.

Different ways are there to transform product images in the Webp format:

• Leverage online conversion services such as Webp Converter, Online convert, TinyImage, Egzig, etc.
• Practice Adobe Photoshop tools with specific plugins. Though, Photoshop is not a Webp format supportive. That’s the reason, it is advised to use the required functionality with plugins, such as AdoveWebM and Telegraphic.

Even then, if you have any doubt that WebP is best as compared to other image formats, then check out the below table:

Format	Animation	Transparency	Browser
PNG	No	Yes	All
WebP	Yes	Yes	Android, Opera, Chrome
GIF	Yes	Yes	All
JPEG	No	No	All
JPEG	Yes	Yes	IE

6. Use SEO-friendly images

No one can underestimate image optimization for SEO.  As Google is a highly active search engine, it is essential to optimize images. Below are some methods that will help you convert images SEO-friendly.

– Write Alt tags properly

The aim of Alt tag is to give information on websites and images to search engines.  It enables the search engines to understand the site in a better way. Hence, index the images rightly. Additionally, the Alt tag is helpful for Google. It supports Google to structure the search results web pages in an accurate manner.

– Mention the right image file name

With the addition of crawling the website text, search engines scan the image file name in Google. Hence, you must name image files explicitly that have keywords and are descriptive.  Do not provide a general image name, like “IMG00112”. However, it could be specific, like,  “Magento 2 optimized image.jpg”. Allow Google to understand the site to get reliable site results.

– Create Sitemaps

Web sitemaps improve the image’s visibility in image search results.  Creating sitemaps is considered to be the way to give information on search results. With more details on Google,  you will get more benefits.  It is not easy to find the definite impact of image optimization for SEO.  Understand that Google ranks only those sites that have optimized images.

7. Change Images with CSS3 Style

CSS3 gives more benefits than one expects. Changing a few images by CSS3 style offers great vector optimization. It gives 100% animation, shading, and gradient handling for any device or screen resolution. Additionally, changing elements by CSS improves the performance and speed of the site. With the replacement of the devices, the images become optimized.

8. Extensions to optimize images

Web markets have several extensions that help in image optimization on your online store. The purpose of extensions is to optimize and compress the images and assure the best website loading experience. Consequently, gives a better user experience; that results in improving the conversion rate. Below are the features that usually these extensions offer:

• Automated optimization method
• Optimize different image types
• Back up unique images
• Restore and record optimized images
• Force File Permission
• Support Command-line

Conclusion

Neglecting image optimization gives a negative impact on your Magento 2 store.  It has to be your top-most priority.  Despite your high-quality service or product, engaging or unique content, if the visitors have to wait for long on your site, then, they will leave. That is why you must optimize the Magento 2 images to stand out from your competitors. If you find it tricky to handle, you can get support from Magento eCommerce development Company. With the assistance of professionals, you can make your online store highly image optimized. 

Do you find these tips helpful? Which one do you think is beneficial? Are you applying any of these? Share your feedback with us. Thanks for reading!

About the author – Aria Johns Aria Johns is a dedicated Magento developer & technical writer. Currently, she is associated with Magentofx – Magento development company. She loves to share her knowledge with others.