Image optimization is one of the crucial steps you need to take to speed up Magento 2. Switching to the new WebP format developed by Google is a great way to start. They are smaller in size and correspondingly take less time to load.
There are two ways how you can convert images to WebP in Magento. You either do it automatically with the tool or convert them elsewhere and upload them directly to the admin panel.
Thus, in this guide, you'll learn everything you need to know to convert images to WebP in Magento both ways.
Should we start?
How to Convert Images to WebP in Magento?
Note: the Magefan extension comes with pre-set options. So all you need to do to start the WebP generation is enable the extension. Change the options only if you need to.
To start, go to Stores > Configuration > Magefan Extensions > WebP Images.
Step 1: Fill out the basic settings
In the basic setting, you can specify the quality of the converted WebP images, image metadata and the generation mode.
Let's see what each option stands for.
Image Quality (1-100) defines the level of the image compression. The higher the value you set, the better the quality of the converted images. A default value of 85 ensures minimal quality change.
Image Metadata defines a list of metadata to copy from the original image to the webp image. Note that the more metadata you include, the heavier the webp image.
WebP Generation Mode defines how you want to generate the WebP images.
- Page Load: WebP images are generated during the page load.
- Cron: images are converted to WebP format by cron daily.
- Page Load&Cron: both of these 2 modes combined.
- Manually by CLI commands bin/magento magefan:webp:convert; images are converted to WebP after you run the CLI command.
Additionally, if you choose the Page Load mode, you can enable the Asynchronous WebP Generation.
Note: regardless of the conversion method you use the extension never generates two same WebP images. The extension checks if the WebP version of the image exists, and only then starts the conversion. So, it skips images already converted to WebP.
Step 2: Skip certain images from conversion
It's preferred if you convert all of your images to WebP format to reduce the total image size. But if you want to skip some of them, do that in these sections.
Recent images — if you only want to convert images added lately, define the number of days in the Skip Images Created More Than (Days) field.
Entire folders — you can also exclude entire image folders from WebP conversion. Define them in the Skip Media Folders and Skip Static Folder fields.
Specific images — if you want some specific <img> tags to be ignored during WebP conversion, add the data-webpconverted="1" attribute to the <img> tag as in the example.
<img src="image.jpg" /> —> <img src="image.jpg" data-webpconverted="1" />
Don't forget to Save the settings if you change any and that's it. Images will be converted to WebP according to the settings you've set. You don't have to do anything else.
However, if you have some specific images to convert (HTML picture tag, CSS background images, etc.) explore the advanced options in the next step.
Step 4: Explore advanced WebP generation options (optional)
When we say Magento 2 WebP Images extension converts all images to WebP, we mean it. The Advanced WebP Conversion Settings cover all specific cases. Here you can:
Use PICTURE Tag to Show WebP — (enabled by default) to support browsers that don't support WebP.
Convert HTML Picture Tag Images — only if you use picture tags with responsive images (different images for different screen sizes).
e.g.
<picture><source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
Convert CSS Background Images — only if you use CSS background images in the HTML tags style attribute.
e.g.
<div style="width: 1000px; height: 1000px; background-image: https://mydomain.com/media/wysiwyg/balenciaga1.jpg"></div>Convert Images and Sliders inserted via Magento Page Builder — if you insert images through the page builder.
If you want to convert images to WebP in your third-party application you can also do that here. Just use the Convert Images In GraphQL and REST API Requests options.
Note: the extension will replace the original images in WebP format in GraphQL and REST API request results only in case the user agent (browser or application you make a request in) supports the WebP format.
Finally, if you use images from some external websites, e.g. WordPress, you can also convert them to the WebP format. For that specify external websites' base URLs in the Convert Images From External Websites field.
Step 4: Monitor WebP image generation
After you start converting images to WebP format in Magento, they will appear in the System > WebP Optimized Images > Images panel.
Here you can see general metrics on the WebP generation, such as:
- how many images are already converted, skipped or scheduled
- the number of images converted based on the conversion mode
- how many images were converted in the last 5 minutes, a day or a week, etc
- the comparison of the original and converted image sizes
Besides, you can find every single converted image in a handy grid. This allows you to compare the original and WebP version sizes, see the compression percentage, status and the conversion method used.
Note: if you only use Page Load as a conversion method, you will see only converted images in this grid. If you want to see images that are to be converted, run the following command — bin/magento magefan:webp:scan — or enable the Page Load & Cron conversion method.
Step 5: Delete WebP images
While you're still here in the Images panel, you can delete all or specific WebP copies. Just tick a corresponding image and choose Delete from the Actions dropdown. The images will then be converted to WebP by the conversion method set in settings.
Alternatively, you can go back to the Stores > Configuration > Magefan Extensions > WebP Images to Clear WebP Cache (it removes all WebP images).
Step 6: Test WebP images on frontend
Once you finish don't forget to Save the configuration and go test WebP images on the storefront.
WebP Generation Takes Too Long
Depending on the number of images the conversion can take some time. To reduce the "pressure" on your system, just choose the Cron generation mode or convert images manually using the CLI command.
In the second case, you can also generate images in batches, inside a specific folder. Just add a parameter to the WebP generation CLI command:
bin/magento magefan:webp:convert --path media/wysiwyg/foldername
bin/magento magefan:webp:convert --path static/foldername
Based on all the information you've just read, WebP generation in Magento could be entirely automatic.
However, if you already have some images converted and just want to upload WebP to your admin, there's a way. But note that this option is more time-consuming. You would have to manually convert and upload WebP images to Magento.
