WebP Images in Magento 2

How much time do you usually wait for the website to load? 

Attracting customers is not easy these days since eCommerce has become really competitive. To stand out your Magento 2 store really has to be unique and provide the best customer experience. 

There are a lot of things that influence that experience, but website speed comes first.

Since website performance is hugely influenced by images, we’re going to lay some light upon the modern file format — WebP — used by a lot of big e-commerce websites e.g. amazon.com.

Never heard of it?

In this article you will learn what is the WebP format, why is it different from the PNG format and how can it influence your Magento 2 store.

Let’s dive into it.

What is WebP?

WebP format was introduced by Google in September 2010 as the next-gen file format that is smaller in size and faster to load than standard PNG and JPG. Now, it is the file format accepted and used by almost all browsers.

WebP provides file size 26% smaller than PNG and 25 - 34% smaller than JPEG while maintaining image quality.

Besides, WebP is a mixture of both lossless and lossy image compression types:

• Lossless compression - files of a large size are restored to original form without any data loss.
• Lossy compression - files of a large size are restored to original form with data loss.

To put it simply, the quality of images after lossless compression is not influenced, but with the lossy type there is the slight change in quality. However, it is so minor that it is hard to even notice.

Can you really tell the difference in the quality of these images?

Due to the use of both types of file compression, WebP is great for image optimization. It makes your website load faster, boosts both user experience and SEO. 

The faster your website loads the more users come to your website, the more reliable it seems to Google. The math is simple.

WebP vs JPG, PNG, GIF. Is WebP better?

Over the years, WebP file format has become generally accepted by a wide range of browsers. Besides, the next-gen file format is actively used in eCommerce which is no wonder. 

Magento 2 stores, in particular, sell hundreds or thousands of products. That makes tens of thousands of product images, plus images on homepage, blog, CMS pages and blocks.

As it’s been already stated, the WebP files are smaller in size than JPG or PNG. Correspondingly they load faster and don’t cause any delay in website performance. Your website users can find the products they are interested in faster.

Here is also the comparison table where WebP is compared to PNG, JPG and GIF:

If your website has only JPG or PNG images, you definitely have to consider converting images to WebP format to avoid loading issues. 

Isn’t that what you’re looking for?

Moreover, using outdated image formats is not recommended by search engines. Even GooglePageSpeed Insights recommend you to serve images in next-gen formats.

Reasons to Use WebP Images in Magento 2

In the world of flourishing online stores it is hard to stand the competition. Although you may sell the very same product customers are looking for, they will go to the website that offers them these products faster.

If you are still not convinced that you need this file format, here are the reasons to use WebP in Magento 2:

Reduced Website Loading Time

Aren’t we tired of repeating this over and over again? 

No, since improved website speed is what WebP is all about. If the website takes more than 3 seconds to load, customers will most likely leave. And these 3 seconds can be crucial for any small or big-scope Magento 2 business.

Due to the mixed image compression Webp images load faster and improves website performance.

If you have unoptimized images any website speed test tool will point that out as the reason of slow website loading.

Improved SEO

SEO is a complex concept that is influenced by a lot of things. Website speed is not an exception. Using WebP images in your Magento 2 store makes your website lighter and makes it run faster. 

Actually, when it comes to SEO many factors depend on each other. So, all of the reasons to use WebP on this list influence SEO, one way or another.

Optimized User Experience

When customers come to your website they don’t want to see blank and text-stuffed pages. Images make it easier to pursue information and, as in eCommerce, can even influence the purchase decision.

WebP images retain the same transparency and quality even if the size is reduced. Therefore, you will not only provide quality images to your Magento 2 store customers. You will provide them fast.

Better Conversions

Step in your customer’s shoes, choosing the best practice to attract customers and improve conversions. Would you rather purchase a product with bad quality images that loaded fast or a product with high-quality images, you have to wait for a little to get to?

None of these options is too appealing, right?

WebP file format allows you to provide your customer with high-quality images in a short time. Optimize your website with WebP images, so customers want to come back to it over and over again.

Reduced Bounce Rates

No one likes to wait to get to the information since there’s plenty of it on the web. Having a website that loads longer than people are willing to wait is not good for your bounce rates. Especially for your Magento 2 business.

WebP format significantly improves your website speed by reducing the image file size. It doesn’t matter how many images you have on your website if they are in WebP format that loads lightning fast.

Should You Upload Images in WebP format to Magento?

If you’ve made it down here, you must be convinced to use WebP image for your Magento 2 website. 

But, what should you start with?

First of all, Magento 2 supports PNG and JPG files. So if you try to upload WebP images to Magento you will receive a notification that WebP file is not supported.

Don’t get upset too early. This actually works for your benefit.

The WebP file format is recognized by multiple browsers, but not all of them. So if you upload already converted  WebP images to Magento 2, people from those browsers will see broken images:

That is why you have to find alternative ways to optimize images in Magento 2 by converting them to WebP format.

How to Optimize Images in Magento 2 with WebP?

There are multiple WebP converters on the web. However, as we already agreed on, it’s best not to directly upload images in WebP format to Magento.

Instead, you can use the extension that automatically converts images from PNG, JPG and GIF to WebP format. 

We recommend using the Magento 2 WebP Images Extension since it has all the necessary options to help you optimize images and boost performance with no difficult configurations or code editing.

With this extension you get a complex solution for your Magento 2 store image optimization since it offers you the following features:

• Quality Score Setting

Our Magento 2 WebP Images extension allows you to set the image quality score. To get the best quality you have to set a 90-100% score. However, the lower the quality score, the faster the images load. 

You can play with the quality to choose the best one for your Magento 2 store images. Just don’t forget to flush WebP cache. 

• 4 WebP Conversion Modes

You can choose how you want your image to be converted. WebP Images extension offers you 4 conversion modes, so you can convert images automatically or manually. 

Decide whether you want images to be converted at once, by cron or via a page load.

• Ability to Skip Certain Image Folders

You have plenty of images on your store from multiple places: product, blog, CMS blocks and pages. They may all be in different folders. So, this WebP Images converter in Magento 2 allows you to skip certain media or static folders. 

You don’t have to convert all images to WebP, just the ones you want to.

• Separate Cache Folder

All converted images in WebP format are stored in a separate cache folder, so you can easily clear the WebP cache and set new configuration for image generation.

• CSS Background Images and Picture Tags Conversion

In case you have some images in the background or in the picture tag, our extension covers that too.

There is no need to change anything in code. Just enable the corresponding options and these images will be converted as well.

• REST API and GraphQL Endpoints

Do you have a third-party application and want to provide better experience for your app users? Boost performance and convert images in GraphQL and REST API requests with our WebP Images Extension.

• Ability to Convert Images from External Folders

If you use images from some external source on your website and don’t want that to delay the loading of the page, you can convert them to WebP format.

Just insert the base URLs of the websites you use images from in a corresponding field and voilà - Magento 2 WebP Images extension will do the trick.

To find out more about these features, check the WebP Images Configuration Guide or check the live demo and try them out.

You can also watch this short video to check how WebP images are loaded in Magento 2 store: 

Why use WebP Images in Magento 2?

Website speed is one of the vital factors influencing a lot of things on your website from customer experience to bounce rates and SEO. 

WebP is called the next generation file format not without a reason. PNG and JPG formats served well. But with the progressive developments in the eCommerce world there is a strong need for more advanced formats. 

And that’s when WebP comes into play. It is generally accepted as a “smaller in size” and “faster to load” format that boosts website speed.

If you’re struggling with making your website rank and attracting new customers, WebP might be just the remedy you need. Convert images to WebP in your Magento 2 store and improve its overall performance.