Why Webp images don't appear on the frontend?

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

      • 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 ...
      • 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. 
      • 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, ...
      • 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 ...
      • 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 ...
      • Announcements

      • Already done in Q3'22

        Extensions updates Advanced Reports now, when a website works with multi currencies while filtering reports by the store views, the data in the report is converted to the site base currency; now, the Product Performance report displays up-to-date customer
      • What to expect in Q3'22

        New features and improvements Improved Layered Navigation integration with Live Search. Elastic Search improved Relevance Rules functionality. Product Feed an option to add configurable options to product URL; possibility to use Quantity attribute as
      • Already Done in Q2'22

        Brand-new extensions Google Page Speed Optimizer Powered by SpeedSize™ is a synergy of Amasty Google Page Speed Optimizer and SpeedSize, which will help you greatly increase the site performance due to code structure compression and neuroscience media
      • What to expect in Q2'22

        Amasty always strives to deliver new functionality in accordance with the most popular customers’ requests and e-commerce trends. In this article, we'll share our plans on new extensions, improvements, fixes, and other releases the team intends to be
      • March'22 results

        New Solutions In March, the team presented two new suites that combine features of top Amasty extensions and are attractive price-wise: Must-Haves Suite. Don't know how to grow your business or what to start with? Get our must-have set of features for