Why are Webp images not appearing on the frontend?
There are several reasons why WebP images might not be pulled correctly on your website.
1. As the first step, make sure that WebP copies of the images were created. To check this, you can open any storefront image in a new tab and modify its URL the following way:
https://example.com/media/amasty/webp/wysiwyg/image_png.webpIf you get a 404 error, it means a WebP copy of the image wasn't created. Make sure to add optimization patterns in Content → Image Folder Optimization Settings and configure them to create WebP copies; run the image optimization process:
2. If WebP copies are present on the server, it might be that the module is not configured to replace original images. Navigate to Stores → Configuration → Amasty Extensions → Image Optimizer and make sure to enable the Use User Agent for Loading Images and Replace With WebP and Image Resolutions options.
3. The images on your website might be loading in a non-standard way. To check that, hover the mouse over the image on the frontend, right-click it, and click the Inspect button. In the opened Developer Console, you will see the way the image is loaded.
By default, the extension supports images introduced with the <img src=""> tag or style="background-image: URL('image_url')" added by Magento Page Builder. If the images are loaded with a different tag, please add this tag to Image Optimizer > Replace Images > Support Third-party Image Attributes field:
Since version 3.3.0, the extension also supports images introduced with the <source> tag within <picture> and images with the <srcset> tag within <img>. Kindly note that the compatibility is available for Pro and Premium module versions and as a part of an active product subscription or support subscription.
4. Varnish cache is used in the environment. Even though the extension is compatible with the Varnish cache, additional Varnish configuration is required to make WebP images upload on the website. Refer to the next article for the guide on how to make Webp images work with Varnish: Does WebP work with Varnish?
Related Articles
How to optimize images using Google Page Speed Optimizer extension?
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 → ...What PageSpeed Insights metrics does Google Page Speed Optimizer cover?
The Google Page Speed Optimizer extension is designed to optimize images and code, which can help to improve certain PageSpeed Insights metrics and enhance the overall website performance. Our extension guarantees up to 97% rating if the fast server ...Can I create WebP copies for theme images?
At the moment, the extension only allows for optimizing and creating WebP copies for images inside the pub/media/ subfolders. Therefore, the theme images will not be affected by the optimization process.How to optimize JS with the Google Page Speed Optimizer extension?
To optimize JS with the Google Page Speed Optimizer extension, please follow the steps below. Step 1. Transfer Magento to the Production mode. It can be done with the next command from the root Magento folder: php bin/magento deploy:mode:set ...What optimizer settings do I use for images, if I have both the Jet Theme and the Google Page Speed Optimizer module?
The Image Optimizer inside Jet Theme is a Lite version of any optimizer-type modules. So, considering you have the Google Page Speed Optimizer extension, it leads over the optimizer settings inside the Jet Theme. If you have already installed, or are ...
Announcements
⚡ Have you enlarged the functionality of the Amasty extension with your own code? Share your improvements with us!
At Amasty, we understand that some of our clients require customized features to perfectly align the extension with their business needs. If you have developed new functionality within an Amasty module and would like to share it, please submit a ticket