Why Webp images don't appear 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:
If 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:
Keep in mind that the extension won't replace images loaded on the website either via <source> or style="background-image: URL('image_url')" tags with their WebP copies. The extension only supports images introduced with the <img src=""> tag. To resolve this issue, contact the module vendor on whether it is possible to change how images are being loaded.
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?
As the festive season is over, we are back to work and ready to share our plans for the first quarter of 2022. New feature plans. This quarter, we consider working on the following features and improvements: Free Gift - automatic free
We are glad to see you in the new year and hope you enjoyed the holiday season! As 2021 ended, let's summarize the key updates of its fourth quarter. Extension updates. Jet Theme - customizable header; - an option to share the
The Amasty team is already looking forward to the winter holidays, and we hope you feel this pre-Christmas vibe too! Meanwhile, let's summarize the results of November. New features. This month was rich in new features. Let's check the most
The first month of Q3 is over, so let's review what the Amasty team has managed to accomplish so far. Extension Updates. Another portion of new features was delivered by the team in October: Jet Theme - 4-column layout display option
Use Cases forum announcement
Greetings everyone! We are excited to introduce our new forum - Use Cases, where Amasty customers could share their experience of using modules on their websites. Our clients often inquire about some real websites where Amasty products are in use. We