How to optimize images using Google Page Speed Optimizer extension?

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; make sure to include subfolders, not just parent directories. We recommend doing one pattern for one image folder group (e.g. one pattern = subfolders of the catalog/ folder): 



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.jpg

where -i is the ID of the pattern, wysiwyg/image.jpg is the image path.

Notes
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?