How to Easily Convert Images to WebP in Magento 2?

In a previous article, we discussed how to optimise Magento 2 website performance with WebP Images. The discussion confirmed that WebP Images improve loading times, ensure seamless shopping experience, and increase online rankings in the search engine results page. While we did provide an overview of how to convert images to the WebP format, it was quite brief. Today, we are going to discuss it in more detail. This article will serve as a comprehensive guide on Magento 2 convert images to WebP.

Why Magento 2 Convert Images to WebP Format?

There are several reasons, including:

Faster Loading Times

WebP Images improve a website’s loading time since this format is up to 35% smaller in size compared to JPEG, PNG, and other previous generation formats.

Less Data Consumption

Since they are smaller in size, your store will need less data to load. For mobile users, this is a much-needed benefit. The reason is that they are mostly on limited data plans. They will be reluctant to visit sites that eat up their data. Also, most of the eCommerce traffic and sales comes from smartphone devices as shown below.

Thus, it wouldn’t be wrong to say that WebP Images are a necessity. Without them, your store is losing potential smartphone customers to competitors.

Online Visibility

Google and other search engines consider a website’s loading time as an important part of the search algorithm. In simpler terms, faster loading websites appear higher in the rankings. Therefore, with WebP images, your Magento 2 store will benefit from a boost in rankings. The higher the rankings, the better the organic traffic. Ultimately, increase in website traffic can have a positive impact on your conversion rate.

Bulk Uploads

The best way to market your product is to showcase it from every possible angle. Thus, a single product may have up to 20 images, highlighting the different features. Now, if you have 100 products, you need to upload around 1500 – 2000 images. If they are in JPEG or PNG formats, uploading them to the store can prove tedious. Internet disruptions can result in restarting the process all over again. With WebP images, you can upload 1000s of images quickly.

User Experience

Faster loading websites ensure a seamless shopping experience. For example, when browsing product images, users don’t have to contend with unloaded images. They can view the product in one go, allowing them to decide without feeling frustrated.

Convert Images to WebP in Magento 2

There are different ways to convert an image to WebP in Magento 2.

Method 1 – Use Online Tools

If you search for ‘WebP Image Convert’ on Google, you will come across various online tools as shown below.

After you find the right tool, all you need to do is upload the images you wish to change to WebP format, click ‘Convert’, and then download the images. Afterwards, upload the converted images to your Magento 2 store. While this seems straightforward, there are a few things to keep in mind.

Firstly, these only tools are not 100% reliable. Secondly, although they are ‘free’, they have a limit. You may have to get a paid subscription after converting 5, 10 or any other set limit. Thus, the best course of action is to go for a Magento Marketplace certified WebP Image Convert extension.

Method 2 – Magento 2 Convert WebP Image Using an Extension

Extensions offer numerous benefits compared to online tools. For instance, most extensions allow store owners to select folders for automatic conversion. Once the folder is selected, all images are converted to WebP format. This removes the need for manual conversion, thereby saving valuable time.

Secondly, admins can determine the size and quality for each conversion. This allows them to convert images in a manner that best suits their unique requirements. Thirdly, extensions ensure that converted images are compatible with multiple browsers. Apart from this, extensions may offer advanced features such as lazy loading.

Before you go searching for an extension which offers all such features, check out WebP Images Extension by FME. This extension contains all the features listed above and a lot more. You can view the backend and frontend demos to see how the extension may prove valuable for your store.

How to Use the Magento 2 Convert WebP Image Extension?

After installing the extension, go to FME EXTENSIONS -> Configurations. Before we move on to the settings part, you need to configure a few pre-requisites. Otherwise, the extension won’t work properly.

Prerequisites & Information

Expand the Prerequisites & Information Tab to check all the requirements. Firstly, install the library rosell-dk with the following command:

composer require rosell-dk/webp-convert Secondly, run: catalog:image:resize

Thirdly, you need to select a conversion method. There are two options:

• Through CLI command: fme:convert:webp
• On Page Load: When pages are loaded on storefront, images will be automatically converted to WebP format.

Now, let’s focus on the main settings.

Settings

To configure the settings, expand the Settings tab. You will have the following options:

Enable: Set it to ‘Yes’. If you wish to disable it, set it to ‘No’. Quality Level (1-100): Select the desired level as per your requirements. Conversion Tool: You have three different options to select from. The options are:

• GD
• CwebP
• Imagick

Conversion Tool Support: This tells if the WebP is supported by the selected conversion tool. Skip Folders:

If you wish to skip any folder from the conversion process, you need to enter the folder path. As an example, we have skipped the captcha folder from the conversion process.

Add Lazy Loading Attribute:

This will load only the required images, thereby improving the loading time.

Clear all Generated WebP Images:

In case you need to delete all WebP images in the ‘media’ folder, click on the button.

WebP Conversion Test:

The extension allows you to check if the extension is working as intended. All you need to do is enter an image ID and click on the button. It will show the converted and original image for comparison.

Final Thoughts on Magento 2 Convert WebP Images

Don’t forget to clear the cache once you are done setting up the extension. To do so, go to System -> Cache Management -> Select All from Mass Actions -> Click Refresh the Cache. This concludes our article on how to easily covnert images to WebP in Magento 2. If you have only a handful of images, you can opt for Method 1. However, if images are in hundreds and more, the most logical option is to use an extension. We have already shown you how to use one WebP Image extension. If you have any further questions, contact our support team.