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 > 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.
When a Mobile width is set, two extra mobile copies are created for high-resolution phone screens: one at 2× and one at 3× the mobile width. For example, a Mobile width of 480 produces 480, 960 and 1440 pixel mobile images. The browser picks the copy that matches the screen's pixel density, so sharp phones get a crisp image without loading the desktop version.
Images are never enlarged: if the original is narrower than a copy's width, that copy keeps the original size.
After upgrading the extension, click Generate again. It creates only the copies that are missing (for example, the 2× and 3× mobile copies) and skips images that are already resized, so you don't need to click Cleanup first.
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.