cancel
Showing results for 
Search instead for 
Did you mean: 

Conditionally serve webp images with NGINX and Magento 2

Conditionally serve webp images with NGINX and Magento 2

Hello,

Im in trouble understanding how to serve images on Magento 2 with NGINX. Everything works correctly until there is no JPG file on Magento media cache and its needed to generate with

location @media { try_files $uri $uri/ /get.php$is_args$args; }

When i added this #webp block to nginx config then it no longer process below that #images block and if i remove #webp block again media cache will be generated with @Media like it should by default.

My goal is serve webp images ( generated with separate script to original jpg/png location, only difference file extension) and when there is no picture on media cache folder then it will be generated like Magento does by default

Question is how to combine these two #webp and #images...

location /media/ { 

     #webp
        location ~* ^(/media/.+)\.(png|jpe?g)$ {
               set $base $1;
               set $webp_uri $base$webp_suffix;
               set $webp_old_uri $base.$2$webp_suffix;
               set $root "/var/www/magento/htdocs/pub/";
               root $root;
               expires 60s;
               add_header Cache-Control "public";
               add_header Vary Accept;
                if ( !-f $root$webp_uri ) {
                       add_header X_WebP_SP_Miss $root$webp_uri;
                 }
               try_files $webp_uri $webp_old_uri $uri $uri/ @media ;
       }       


     # images css js (default magento block)
        location ~* \.(jpg|jpeg|png|webp|gif|svg|js|css|ico|txt)$ {
              expires max;
              add_header Cache-Control "public";
              try_files $uri $uri/ @media;
        }


     ## fonts
    
        location ~* \.(swf|eot|ttf|otf|woff|woff2)$ {
             expires max;
             add_header Cache-Control "public";
             try_files $uri $uri/ @media;
       }

       try_files $uri $uri/ @media;


  }

      location @static { rewrite /static/(version\d*/)?(.*)$ /static.php?resource=$2 last; }
      location @media { try_files $uri $uri/ /get.php$is_args$args; }
4 REPLIES 4

Re: Conditionally serve webp images with NGINX and Magento 2

Hi,

Did you find a solution for this? I am also trying something similar.

Re: Conditionally serve webp images with NGINX and Magento 2

Hi

 

Actually not, still really need it but i have exhausted all ideas. 

Hit me up when you find solution

Re: Conditionally serve webp images with NGINX and Magento 2

Hello @ufo56@tenekes,

 

Trust you all are doing well,

 

Instead of solving these complicated codes checkout the WebP Image Support Extension for Magento 2 Stores.

 

 Magento 2 WebP Image Support Extension is capable of supporting the image type of default Magento with the help of Google's WebP file format images.

 

In this trending world with developing technologies the classic file formats of an image are .jpg and .png were developed before many years. In replacement of this Google has developed a new generation file format namely WebP for images. More powerful and productive image quality even after the compression of the image. With the help of WebP image format the images that are huge in size can be compressed and uploaded to the website which will help in the speed loading of the website.

Magento 2 WebP Image Support Extension by MageComp offers the Magento 2 store owner to effortlessly upload WebP images from the backend. Featured module equally helps in boosting the performance of the store and improves the user experience. Any quality images whether it is a low-quality image or high-quality image intensified support is added of WebP for the product pages. Category image pages achieve advanced support and also persistent upload support for the CMS pages and Static Blocks. Featured TinyMCE Wysiwyg Editor for more quick and powerful support.

What are the benefits of MageComp’s Magento 2 WebP Image Support?
  • Personalize support for CMS page, Product page image and Category page.
  • The WebP Image Support is equally compatible with multiple browsers.
  • Achieve better SEO ranking.
  • It helps to boost your website loading speed.
  • The standard format used is WebP defined by google.

Hope this helps you,

Problem solved? Hit the Kudos button and "Accept it as Solution"

 

 

 

Re: Conditionally serve webp images with NGINX and Magento 2

Hello,

@ufo56@tenekes,

Like someone else had indicated, you don't have to touch the NGINX vhost. You can use a Magento OSE Module provided by a 3rd party. In this way, you can use Apache or NGINX. << Snipped >>

 

Good luck!