Generate responsive images
The responsive images feature allows you to generate resized images for desktop and mobile versions of your site. This helps reduce page weight and improve loading speed across different devices.
Steps to generate responsive images
1. Configure image patterns
In the Magento admin, go to:
Stores > Configuration > Mirasvit Extensions > Google PageSpeed Optimizer > Image optimization > Responsive images.
Add entries to the configuration table with the following fields:
| Field | Description |
|---|---|
| File name | The pattern of image file names that should be resized (for example: banner, product, or .jpg). |
| Desktop width | The width (in pixels) of the resized image for desktop devices. If empty, the original image will be used. |
| Mobile width | The width (in pixels) of the resized image for mobile devices. If empty, no resized image will be generated for mobile. |
2. Save configuration
After entering your image patterns, click Save config.
This step is required — if you click Generate before saving, no responsive images will be created.
3. Generate responsive images
Once your configuration is saved, click the Generate button.
Responsive images will be created automatically in the same directory as the original image (e.g., pub/media).
These resized versions will automatically replace the originals in all frontend locations where the original image is displayed.
Before making any changes to the Responsive images configuration, click the Cleanup button. This removes all previously generated resized images to prevent inconsistencies.
4. Flush cache
After the generation process is complete, clear your Magento cache to make sure the new images appear on the storefront:
bin/magento cache:flush
5. WebP generation
WebP versions of responsive images are generated automatically by Magento’s cron process. If the original image is already replaced by a WebP version, the responsive image will appear on the frontend only after its corresponding WebP version has been generated.
Make sure your Magento cron jobs are properly configured and running.