Magento 2 Image Optimization: Best Practices for 2022

1
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,
2

• 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.
• 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

3

• 600X600, and 11 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.

Purpose
Best formats
4
Icons, Buttons GIF
Product images PNG, JPEG
Logos SVG
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.
(Source https//web.dev/replace-gifs-with-videos/
) Next is to convert GIFs. To have an MP4 video,
work on FFmpeg. It is advised to run the below
command in the console
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
5
For WebM video, run this command in your console
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.

6

• 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

• 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

7
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. 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. Extensi
ons 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
8

• Automated optimization method
• Optimize different image types
• Back up unique images
• Restore and record optimized images
• Force File Permission
• Support Command-line
• Concluding Remarks
• 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!
• Bio 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. To
  know more follow her on twitter or instagram.
• Source https//blog.magezon.com/magento-2-image-o
  ptimization-best-practices-for-2022/