Tags
configuration

Image Optimization is one of the first steps you have to take to improve your website performance. And the best way to do that is the new WebP format developed by Google. WebP Images are smaller in size and correspondingly take less time to load. 

In case you want to boost the performance of your store you should consider Magento 2 WebP Images Extension. In this article, you are going to learn how to configure it.

Take the following steps to configure Magento 2 WebP Images extension:

1. Navigate to Stores > Configuration > Magefan Extensions > WebP Images.

2. Enable the extension.

3. Set the Image Quality (1-100). Note: the higher the value you set, the better the quality. However, the size of top-quality images is bigger.

4. Set what data to copy from the original image during the webp conversion in the Image Metadata field.

5. Choose WebP Generation Mode. The options available for you are:

  • Page Load: WebP images are generated during the page load (It generates only missing WebP images).
  • Cron: images are converted to WebP format by cron regularly
  • 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 command.

Note: depending on the number of images the conversion can take some time. You can also use the command bin/magento magefan:webp:convert --path media/wysiwyg/foldername or bin/magento magefan:webp:convert --path static/foldername to generate images inside a specific folder.


If you only want to convert images added lately, you can define the number of days in the Skip Images Created More Than (Days) field.

Note that the extension does not delete the original jpg, png, gif images, it creates a WebP copy. Also, before converting, the extension checks if the WebP version of the image exists, and only then starts the conversion. So, it skips images that already have been converted to WebP.  


6. Enter the files or folder you want to avoid during conversion in the Skip Media Folders or Skip Static Folder field.

7. Clean WebP Cache in case you want to remove all existing WebP image copies, e.g. after changing the Quality value.

Magento 2 WebP Images Extension Configuration

8. Choose whether you want to Convert HTML Picture Tag Images. Please enable this option only if you use picture tags with responsive images (different images for different screen sizes).

Example:

<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>

9. Select  Yes if you want to Convert CSS Background Images. Please enable this option only if you use CSS background images in the HTML tags style attribute.

Example:

<div style="width: 1000px; height: 1000px; background-image: https://mydomain.com/media/wysiwyg/balenciaga1.jpg"></div>

Check the following guide to use WebP images in a CSS background.

10. Convert Images and Sliders inserted via Magento Page Builder.

11. Set the Convert Images in GraphQL Requests option to Yes if you want images to be converted to WebP format during graphQL request.

e.g. if you use PWA storefront or have a third-party application

12. Choose whether to Convert Images in REST API Requests.

Note: the extension will replace original images to 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.

13. Enter the external websites' base URLs in the Convert Images From External Websites field if you use images from other websites and want them to be converted to WebP as well.

Magento 2 WebP Images Configuration

 Once you finish don't forget to Save the configuration and go test WebP images on the storefront.