Amasty Resolution Center

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:
https://example.com/media/amasty/webp/wysiwyg/image_png.webp
    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?


      • Related Articles

      • 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 ...
      • Does WebP work with Varnish?

              WebP images are compatible with the Varnish cache. The compatibility was introduced to the module in version 2.1.2. Make sure that you have the latest version of the extension installed.       To make WebP images load on the website, it is ...
      • Does WebP work with Safari?

              The Google Page Speed Optimizer extension relies on the User Agent functionality to detect the visitor's device. If the browser supports WebP images, the site will pull the WebP copies of the original images.       In case the visitor's browser ...
      • How could I check if the optimized images are visible on the frontend?

              Once the image optimization was done, please, open the frontend and with the help of developer tools click on the image. It should be displayed in webp format: 
      • How to optimize JS with the Google Page Speed Optimizer extension?

              To optimize JS with the Google Page Speed Optimizer extension, please follow the next steps:       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 ...
      • Announcements

      • Q1'22 Roadmap

              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
      • Q4'21 results

              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
      • November results

              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
      • October results

              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