How to Optimize Images on Magento 2 stores: An Ultimate Guide and Best Practices

There are many factors that go into making a quality article for a website, such as unique content, the structure of the essay, ideal length, catchy title, etc. However, one of the critical elements for a compelling article is the image.

Image is everything. It should come as no surprise if customers want to see the products they want to buy from every angle. This will help them to know for sure everything about what they are going to buy. However, not every time you upload high-quality images to the website for your customers, you are successful. You are wrong.

Uploading images to your website without optimization will cause a lot of disadvantages for your online store, such as reduced page load speed, reduced website traffic, etc. That’s why you need to optimize the images on your Magento 2 store to ensure that your customers will be happy when shopping on your website.

In this topic, we will provide a comprehensive look at Magento 2 Image Optimization.

Without further ado, let’s dive in!

Image Optimizer for Magento 2

Speed up page loading & enhance the user experience for your store

(7 reviews)

Check it out!

Table of Contents

• Why is Magento 2 Image Optimization important?
• How to Optimize Images on Magento 2 stores
  • #1. Change the image size in Magento 2
  • #2 Use WebP to speed up Magento 2
  • #3 SEO-friendly images for Magento 2 optimization
  • #4. Use vector images to optimize images if possible
  • #5. Delay image loading to remove important render path
  • #6. Enable Fastly Image Optimization
  • #7. Use Multiversion Images Based on Screen Size
  • #8. Replace Images With CSS3 Styles
  • #9. Use an extension for Magento 2 Image Optimization
• Final Thoughts

Why is Magento 2 Image Optimization important?

We cannot deny the importance of optimizing images on Magento 2 stores. It plays a more important role than ever to build a unique website and attract customers. Below are some of the benefits that image optimization brings to a website.

• Improve page speed: if the images on your website are too large, not optimized will make your website slow. This adversely affects the customer’s shopping experience. They can’t wait patiently for your website to load images, and that’s why they are outside immediately. Optimizing the website’s images will help the page load quickly.

• Enhance user experience: as I mentioned above, having your site take too long to load will result in a bad customer experience. Image optimization will ensure that great user experiences happen on your online store. This will help them have a good first impression of your store, which is why they want to come back to shop next time.

• Better SEO: An important thing that image optimization brings to your website is to help optimize search engines. It not only helps your images appear in Google image search rankings but also provides a lot of benefits for website-wide SEO work.

How to Optimize Images on Magento 2 stores

If it takes more than 3 seconds to load your website, this means that the customer will leave. Images on your website that are not optimized will slow down the page speed when loading. There are many methods to help you optimize images in Magento 2. However, each method requires a different level of technicality, so choose the best one depending on your needs. Here are 9 ways to optimize photos that we have collected. It is for you.

#1. Change the image size in Magento 2

The parameter that affects the image size in Magento is its resolution - called pixels. It is determined by the total number of pixels as well as the height and width of the image. As a rule, the image size in Magento 2 is the first size to focus on for best image compression results. There are currently 3 ways to optimize images by it.

Keep the original image’s aspect ratio

Aspect ratio is the ratio relationship between width and height, which is written as 2 numbers separated by colons eg 1:1, 3:4, 16:9, etc. The current common problem of most e-commerce stores is that the uploaded product images and the product images on the website have different aspect ratios.

For example, you took a product photo that is 1920 pixels high and 1080 pixels wide. So its aspect ratio is 16:9. However, the size of your web product image is limited by CSS, assuming it is 600x600, the aspect ratio is 1:1. The difference in aspect ratio is why the uploaded image will be distorted to fit the product frame. And as a result, the image is distorted. Obviously, when customers visit and encounter images like this, it will make them feel uncomfortable and not have a good impression of your website.

So how to resize the product image and keep it beautiful to gain optimization? The answer is to keep the aspect ratio of the output product image the same as the aspect ratio of the original image.

Compress images in Magento

There is a statement that it is not possible to compress an image without losing its quality. However, that is just the past. With modern technology, there are many solutions and online tools on the market that help to compress images without losing their quality.

• Some popular tools include Mageplaza Image Optimizer=, Gifsicle, Jpegtran, or OptiPNG. We also suggest 12 other free excellent Image Optimization Tools.
• Google PageSpeed Insights: by running a page test through this tool, you will get recommendations on how to improve Magento’s performance. In addition, you can also optimize images specifically for Google PageSpeed, as Google provides information on how much you can achieve.

Don’t make Magento 2 images too big

Magento’s eCommerce platform has its own requirement for product image size, which is no higher than 1920px and 1200 wide. That’s why Magento will distort any image that is larger than the numbers above.

#2 Use WebP to speed up Magento 2

A surer way to optimize product images for Magento is to change the image format. Currently, the Webp image format is a format recommended by Google to use instead. It is specially designed for websites and has lossless compression and loss of image quality.

How to convert Magento 2 product images in WebP

There are many ways to convert Magento 2 store product images to Webp format in different ways.

• Use online conversion services like TinyImage, Online-Convert, Egzig, Webp Converter, and so on.
• Use Adobe Photoshop tools with special plugins. It’s sad that, as of now, Photoshop doesn’t support the Webp format. That’s also why we recommend using the necessary functionality through plugins like Telegraphic or AdoveWebM.
• And, if you’re still wondering why WebP is the star of all image formats, the image below is a detailed comparison for you.

If you are interested in Mageplaza, you certainly know that we are very impressed with the features of WebP. That’s why Mageplaza’s website decided to replace jpeg with WebP. After experiencing the WebP format on the web, it’s great because it improves performance significantly. It not only reduces the loading time for customers but also gives them a pleasant shopping experience. Do not hesitate any longer; apply WebP to your website and experience it right away. It definitely won’t let you down.

#3 SEO-friendly images for Magento 2 optimization

When it comes to optimizing images, it is impossible not to mention optimizing images for SEO. Google is getting smarter by the day, and it makes a lot of sense to optimize overall images for SEO. Here are a few simple ways to help you make your images SEO-friendly.

Write Alt tags wisely

There are many articles about the importance of using alt tags. We will not go into details. Currently, however, most business owners don’t take this issue seriously, and it’s easy to find a lot of stores that don’t specify Alt tags for product optimization. The value of the Alt tag is that it will provide information about images and websites to search engines, so that search engines better understand your website, thereby helping to index images correctly. Besides, the Alt tag is also extremely useful for Google, which helps Google structure the search results page more accurately.

Name the image files clearly

While crawling the text on the website, the search engines also scan the names of the image files on Google. This is why you should explicitly name image files that are descriptive and contain keywords. You should not give generic names like IMG00273, but better use names like “one-step-checkout-magento-2.jpg”. If you help Google understand your website, then it will surely bring worthy results for your website.

Build Sitemaps

Sitemaps on the web will increase the visibility of your images in image search results. Building Sitemaps is also a way for you to provide more information to Google. The more information you provide to Google, the more you will benefit from it. It’s hard to know the exact impact of optimizing images for SEO, but you should know that Google will always favor pages with optimized images.

#4. Use vector images to optimize images if possible

You may think this is trivial, but take a close look at your design because a clean design is a fast design. Some types of images on your website can be replaced with vectors or even fonts, and others with CSS. You can speed up the rest with a CDN, but your best bet is to make your store cleaner and lighter.

Here are some of the salient features that Vector offers: best design responsiveness; no loss of detail; zoom-friendly images; among other things.

In addition to the smaller size, you can also make SVGs take up less space by shrinking and compressing them with gzip.

#5. Delay image loading to remove important render path

Deferring loading images is another trick to optimize images in Magento. It not only helps to declare the critical render path but also speeds up the overall performance. Lazy loading is done with the deferred script, which is defined by image formats such as gifs, photos, or other media on the screen.

#6. Enable Fastly Image Optimization

It’s called Fastly IO. This is an image compression service on Magento 2, which is used for much faster image creation. Fastly IO is a great tool to handle different formats, including jpeg, png, and gif.

Some outstanding features that Fastly brings are to promote loss conversion, use adaptive pixel scaling for different screen resolutions Resize product images from lossy to lossless (and vice versa).

For Fastly IO to run well on your store, you need to enable it, then configure and confirm it. You can refer here for detailed instructions on how to enable Fastly in Magento as well as how to speed up the admin dashboard in Magento.

However, before you start using this tool, you need to test your store’s website speed to compare with your website speed after working with Fastly. From there, you will have a correct view of this tool.

#7. Use Multiversion Images Based on Screen Size

A responsive design brings new challenges and opportunities to Magento developers in image optimization. One of them is the use of different versions of images for different screen resolutions. Magento can show you the most appropriate version of the image, depending on your frame. For example, shrinking your screen from 960px wide to 240px will force the server to switch from wide to narrow. This is really a big challenge.

<img alt="image alt text" src="medium.jpg" srcset=" small.jpg 240w, medium.jpg 300w, large.jpg 720w " sizes=" (min-width: 960px) 720px, 100vw " >


<img
   alt="image alt text"
   src="medium.jpg"
   srcset="
      small.jpg 240w,
      medium.jpg 300w,
      large.jpg 720w
   "
   sizes="
      (min-width: 960px) 720px,
      100vw
   "
>

#8. Replace Images With CSS3 Styles

CSS3 can offer a lot more benefits than most people expect. Replacing some images with CSS3 styles is completely real and provides great vector optimization. CSS3 provides 100% shading, animation, and gradient handling for any screen resolution or device. An example below demonstrates that CSS3 really cares about creating simple geometries, using CSS3 instead of SVG.

Moreover, replacing these elements with CSS also helps to increase the speed and performance of the website. The more devices are replaced, the more impact the optimizations make.

For example: using the below code you can create CSS shapes

/* Arrow down */ #triangle-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 40px solid black; } /* Menu Hamburger */ #hamburger { width: 40px; height: 25px; display: flex; flex-direction: column; justify-content: space-between; } #hamburger span { width: 100%; height: 5px; background: linear-gradient(45deg, red, blue); } /* Menu Hamburger */ #hamburger { width: 40px; height: 25px; display: flex; flex-direction: column; justify-content: space-between; } #hamburger span { width: 100%; height: 5px; background: linear-gradient(45deg, red, blue); }



/* Arrow down */
#triangle-down {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 40px solid black;
}
 
/* Menu Hamburger */
#hamburger {
  width: 40px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#hamburger span {
  width: 100%;
  height: 5px;
  background: linear-gradient(45deg, red, blue);
}
 
 
/* Menu Hamburger */
#hamburger {
  width: 40px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#hamburger span {
  width: 100%;
  height: 5px;
  background: linear-gradient(45deg, red, blue);
}

And this is a result, we get:

#9. Use an extension for Magento 2 image optimization

There are many extensions on the market today that help you optimize images on the Magento 2 store. However, Magento 2 Image Optimization by Mageplaza is an ideal choice for you to apply to your website. This module not only helps you to compress and optimize your images, but also gives you amazing page loading speed on your online store. As a result, it brings a great user experience for your customers, which in turn improves your store’s conversion rate.

Some outstanding features that this extension brings:

• Optimize multiple image types: It allows store owners to compress many types of images such as PNG, TIF, JPG, GIF, and BMP.

• Image Optimization Quality - Lossless or Lossy: Store owners can set compression levels with 2 options: Lossless or Custom (Lossy) with the differences in the quality and file size of images.

• Automated optimization process: Image compression can be activated frequently. When the Cron function is activated, store administrators do not need to spend time manually compressing files.

• Back up original images: It helps store admins keep the orginal images safely and roll-back if necessary

• Included and excluded image directories: The picture scan can be set to particular store website directories. Store administrators can specify which folders are included in the scan of the photos and which directories are omitted from the scan from the admin backend.

Image Optimizer for Magento 2

Speed up page loading & enhance the user experience for your store

(7 reviews)

Check it out!

Final Thoughts

To sum up, Images Optimization in Magento 2 is a top-important task that you need to do to optimize your website speed. No matter how great your product or service is, how unique and engaging the content you create is, and customers take too long to learn about it, they will leave. Therefore, Magento 2 Image Optimization is extremely necessary if you want to stay ahead in the market. Above are 9 ways to help you optimize images easily. We hope you can choose the best solution for your store.

Now it’s time to change the look of your store, and optimizing images on Magento 2 is the first job. Try it out and share with us your results. And you can try out this web hosting for your Magento project as well.

Thanks a lot for reading!

Related Post

• Magento 2: Resize Product Images