Does WebP work with Varnish?

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 required to adjust the Varnish configuration. Please contact your hosting provider on this matter or follow the steps below:

      1. Open the Varnish configuration file. Usually, it is placed here:
/usr/varnish/default.vcl
      2. Find the vcl_hash subroutine and paste this code to it:
# Amasty Google Page Speed Optimizer device detection and cache separation mechanism
    if (req.http.cookie !~ "X-Magento-Vary=") {
        call device_detect;

        if (req.http.X-Amasty-Accept-Webp && req.http.X-Amasty-Device) {
            hash_data(req.http.X-Amasty-Accept-Webp);
            hash_data(req.http.X-Amasty-Device);
        }
    }
      3. Add a new subroutine using this code:
sub device_detect {
    unset req.http.X-Amasty-Accept-Webp;
    unset req.http.X-Amasty-Device;

    if (req.http.Accept ~ "image\/webp" ||
        req.http.User-Agent ~ "(?i)(\biPhone.*Mobile|\biPod|\biPad|\bMacintosh).*Version\/14" ||
        req.http.User-Agent ~ "(?i)Edge|Firefox|Chrome|Opera"
    ) {
        set req.http.X-Amasty-Accept-Webp = "true";
    }

    if (req.http.User-Agent ~ "(?i)Mobile") {
        set req.http.X-Amasty-Device = "mobile";
    } elsif (req.http.User-Agent ~ "(?i)Tablet") {
        set req.http.X-Amasty-Device = "tablet";
    } else {
        set req.http.X-Amasty-Device = "desktop";
    }
}

      Now restart Varnish and enjoy WebP images on your website.

      • Related Articles

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

      • 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 your extension work with Magento Cloud?

              Our Google Page Speed Optimizer extension is fully compatible with Magento CE and EE edition including Cloud instances. The only thing is that the image optimization functionality will be missing. The extension uses the 3rd party tools for ...

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

      • What is the difference between Lazy Load and Google Page Speed Optimizer extensions?

              There are two landing pages created for marketing purposes: Lazy Load and Google Page Speed Optimizer. However, both landing pages represent the same extension.       Regardless of the landing page, there are three optimizer versions that we ...

      • Announcements

      • Already Done in Q2'22

        Extensions updates Blog Pro NEW a feature of changing the blog’s fonts; NEW post matching when switching between storeviews/languages; NEW live search for blog; NEW an option of adding the blog’s summary below the blog title on the main blog page; NEW read

      • 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

      • February'22 results

              Time to check the results of February! It's been a tough end to the month, but let's digress a bit and check out what the team has done.       Extensions updates. Besides technical fixes, February was rich in new features and improvements:  Jet

      • January'22 results

              Can't help but start with the biggest news of the past month: Amasty switched to Product Subscriptions. It means that all extensions can now be acquired by subscription only. The initially purchased code of the module is still available in the customer