Switching to the new WebP format is one of the first steps in speed optimisation. These images are smaller in size and correspondingly take less time to load. But the question is — how do you generate WebP images in Magento?
You have two options — do it automatically with the or convert them elsewhere and upload directly to the admin.
Thus, in this guide, you'll learn everything you need to know to generate WebP in Magento, monitor and manage them for the best experience.
But let's start with the basics.
How WebP Generation Works in Magento?
Before you start the WebP generation, there are a few things you should know about this tool. Magefan WebP Converter:
- Doesn't remove your original PNG and JPG images from your server. It creates copies in WebP format.
- Doesn't load both PNG and WebP files, though you might see both in code on frontend. It loads a corresponding image based on the user's browser.
e.g. If the user comes from a newer browser, we'll load WebP image. If the browser is outdated, the user will see original PNG images. This approach ensures a great experience for all users, without exception.
- Doesn't change the original images' paths. It creates a separate folder for WebP copies and serves them from there.
Configuration
This is the section where you configure how, when and in what quality WebP images are generated. So, go to Stores > Configuration > Magefan Extensions > WebP Images, enable the Magefan WebP Extension and start filling out the options.
Note: all the options are already set up according to the best practices. So, you don't need to do anything once you enable the extension. It will start WebP generation automatically. Change or fill out the following options only if you need to.
Quality score
WebP images use lossy and lossless convertion to guarantee the best quality during the size reduction. But you can control the WebP quality
- Quality (1-100) — define the quality (compression level) of the WebP images. The default value is 85.
You can set a lower value for a smaller file size, but note that the smaller the file size, the worse the quality.
Note: if you don't like WebP quality, clear the WebP cache and change the quality to trigger WebP generation with a new quality value.
- 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.
Generation mode
These options define how WebP generation is processed — automatically or manually.
- WebP Generation Mode — defines how WebP Images will be generated:
- 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.
- Asynchronous WebP Generation (on Page Load) — generates WebP images on page load asynchronoously, only when images is requested with pub/get.php. It means there won't be any delays on the image generation, even the slightest.
Note: regardless of the conversion mode, the extension never converts the same image to WebP twice. So, it skips images already converted to WebP.
Skip images
Magefan WebP Extension for Magento converts all images on your store. But if you want to skip any image or entire folder, that's where you do that.
- Skip Images Created More Than (Days) — allows you to skip images added lately (more than N days before).
- Skip Media Folders and Skip Static Folder — exclude entire image folders from WebP conversion.
Note: if you want to skip some specific <img> tags add the data-webpconverted="1" attribute to the <img> tag.
e.g. <img src="image.jpg" /> —> <img src="image.jpg" data-webpconverted="1" />
WebP cache
WebP cache allows you to regenerate WebP images if you want to change WebP quality. So, first change the Quuality (1-100), then Clear WebP cache and Save the settings. It will delete all old WebP images and generate new ones.
Advanced Conversion Settings
These settings cover custom images within your store or in your APIs.
- Use PICTURE Tag to Show WebP — (enabled by default) allows the extension to fall back onto original PNG and JPG images for browsers that don't support WebP.
- Convert HTML Picture Tag Images — converts images in picture tags (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 — converts images into CSS background (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 — converts images added through the page builder to WebP.
- Convert Images In GraphQL and REST API Requests — convert images to WebP in your third-party application.
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.
- Convert Images From External Websites — converts images from some external websites, e.g. WordPress, if you specify the external websites' base URLs.
Monitor WebP Images
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.
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.
Test WebP Images
Except for the Images panel, you can 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
Upload WebP to Magento Admin
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.
