Configuration

Once the extension is installed successfully, make sure WebP Support and AVIF Support is enabled from PHP configuration.

Now from your Magento admin, go to Stores > Configuration to configure the extension for use.

Configuration

  • WebP Image Convert - Enable the extension from here.

General Settings

  • Product Page Image Type - Select WebP or AVIF image type to show the main product image and product gallery in that format. If AVIF configuration is disabled, it will consider WebP by default.

  • Limit Number of Images - Set the number of images to be optimized at a time using cron or manually.

Scan Media

  • Enable Cron Image Scan - Enable image scanning using the cron job from here.

  • Scan Schedule - Set the frequency to scan new images from the media directory.

  • Included Directories - Add directories to be considered for image optimization. The default directory is pub/media.

  • Excluded Directories - Add directories to be ignored for image optimization. It is recommended to exclude directories with optimized images to avoid duplicate optimization.

  • Reset Errors on Scan - The images that were not scanned before due to errors will be rescanned if this field is set to Yes.

Optimization by Cron

  • Enable Cron Image Optimization - Enable image optimization using the cron job from here.

  • Optimization Schedule - Set the frequency to optimize new images from the media directory.

  • Server Load Limit - Set value to pause optimization when server load is above this value. This is recommended for production sites to avoid site slowdown.

Performance

  1. WebP Conversion Configuration

  • Enable WebP Conversion - Enable WebP Image conversion form here.

  • WebP Quality - Set the quality of WebP images from 0 to 100.

  1. AVIF Conversion Configuration

  • Enable AVIF Conversion - Enable AVIF Image conversion form here.

  • AVIF Quality - Set the quality of AVIF images from 0 to 100.

  1. Responsive Images

  • Enable Responsive Images - Enable responsive images from here.

  • Image Breakpoints - Set breakpoints to create responsive images.

  • Responsive Images Blacklist - Add image names using comma to exclude from responsive optimization.

NOTE - Responsive images are only applied for CMS pages.

Last updated