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. 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.
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 it start conversion. So, it skips images that already have been converted to WebP.
5. Enter the files or folder you want to avoid during conversion in the Skip Media Folders or Skip Static Folder field.
6. Clean WebP Cache in case you want to remove all existing WebP image copies, e.g. after changing the Quality value.
7. 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).
<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">
8. 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.
<div style="width: 1000px; height: 1000px; background-image: https://mydomain.com/media/wysiwyg/balenciaga1.jpg"></div>
Once you finish don't forget to Save the configuration.