How to optimize images using Google Page Speed Optimizer extension?
Check out our video guide on how to optimize images using the Google Page Speed Optimizer module:
Additionally, kindly follow the steps below for a step-by-step guide on image optimization.
In order to optimize images using Google Page Speed Optimizer extension, first, you need to create WebP copies and make sure they are displayed on the frontend. Please follow the steps below to create WebP copies of the images.
Step 1. In Amasty → Image Optimizer → Image Folder Optimization Settings, click on Add New Pattern:
Step 2. Set the title for the pattern and select image folders from the dropdown.
The optimization process works recursively, meaning it will include all subfolders within the selected directory. For optimal performance, we advise selecting only the necessary subfolders rather than their parent directory, especially if the parent folder contains a large number of images. We recommend creating one pattern per logical image folder group; for instance, one pattern for the subfolders within the main catalog directory. If a single group contains many subfolders, please consider creating multiple patterns, each containing 4 to 6 subfolders, to ensure efficient processing and avoid errors.
If the Catalog media URL format option on the Configuration > General > Web page is set to Unique hash per image variant (Legacy mode), it is recommended to only optimize the catalog/product/cache folder. Magento uses cached (resized) versions of product images instead of original images on the frontend.
Do not select the entire amasty directory for image optimization. To optimize images used by Amasty extensions, select only the specific module folders that contain the required images, such as amasty/shopby or amasty/brands, and exclude the amoptimizer_dump, amoptmobile, amopttablet, avif, and webp directories to avoid optimization issues.
Step 3. Check the Create Image for Mobile/Tablet options and select the Resize Algorithm (Resize by default):
Step 4. To make sure the optimization works, select the image optimization tools and choose the quality value for Jpegoptim:
Step 5. Finally, you may choose to create an image dump — a folder to save the original, non-optimized images:
After saving the optimization pattern, it's required to manually start the process. We recommend doing so from the Terminal with the help of the command you may find in the pattern settings (make sure to change the pattern ID to the actual ID value):
Since v.3.7.0 of the module, it is also possible to optimize a specific image by running the following command:
bin/magento amasty:optimizer:optimize-img -i 2 wysiwyg/image.jpgwhere -i is the ID of the pattern, wysiwyg/image.jpg is the image path.
Please note that the last command is available only as a part of an active support or product subscription for Pro and Premium versions of the module. You can find the amasty/module-optimizer-subscription-functionality package for installation in composer suggest.
Once done, the images should be converted to webp. If the images are still in their original formats, please, refer to the following article: Why are Webp images not appearing on the frontend?