[Re-open] Possible easy solution for webp format

Community Support
1

Hi
I am trying to add .webp support on my Nginx fpm VPS. I found this helpful link Possible easy solution for webp format - #2 by djav1985

But don’t understand the last step.

create new nginx template just copy the one you want to use for wp, and for other sites just copy the template for that site so they don’t get overwritten in updates. add:

location ~* ^.+.(jpeg|png|jpg) {
try_files $uri$webp_suffix $uri =404;
}

add it above the first location the position matters for some reason. also add a vary header

Could someone please explain exactly what I should do?

Thank you

Update: I did create a copy of wordpress.tpl and wordpress.stpl to wordpress.webp.tpl and wordpress.webp.stpl
Then put the code above into the files.

Change the template for website on CP from Wordpress to Wordpress.webp

Restart nginx and the site still serve .jpeg file, not webp
The plugin Short Pixcel already generaled the .webp file

@djav1985 Could you please help?

Thanks

2

I didn’t use shortpixel for webp, but it might help you get the idea.

I’ve used WebP Converter for media

  1. I’ve made a duplicate template from wordpress tpl and stpl, with a new name, using command
    cp wordpress.tpl wordpresswebp.tpl and cp wordpress.stpl wordpresswebp.stpl

which can be found in /usr/local/hestia/data/templates/web/nginx/php-fpm

  1. Edit newly made templates, by inserting their code under the line
    include %home%/%user%/conf/web/%domain%/nginx.hsts.conf*; 
# BEGIN WebP Converter
    set $ext_avif ".avif";
    if ($http_accept !~* "image/avif") {
        set $ext_avif "";
    }

    set $ext_webp ".webp";
    if ($http_accept !~* "image/webp") {
        set $ext_webp "";
    }

    location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif)$ {
        add_header Vary Accept;
        add_header Cache-Control "private" always;
        expires 365d;
        try_files
            /wp-content/uploads-webpc/$path.$ext$ext_avif
            /wp-content/uploads-webpc/$path.$ext$ext_webp
            $uri =404;
    }
    # END WebP Converter
  1. then, removed jpg, jpeg and png from location /
location / {
        try_files $uri $uri/ /index.php?$args;
        location ~* ^.+\.(ogg|ogv|svg|svgz|swf|eot|otf|woff|woff2|mov|mp3|mp4|webm|flv|ttf|rss|atom|gif|webp|ico|bmp|mid|midi|wav|rtf|css|js|jar)$ {
            expires 365d;
            fastcgi_hide_header "Set-Cookie";
        }

Save your work, go to web domains in HestiaCP, select a domain, and then from the dropdown menu, select rebuild all, and hit the arrow.

Done, works like a charm. And takes a LOT of time to read all the documentation to figure this, if you have no clue what you’re doing.

1 Like
3

Thank you. I have some premium lifetime credit for Short Pixel so I am trying to use it on my sites.

I am getting help from Short Pixel author and will post here after the problem is solved.

4

I got it working with Shortpixel plugin

The last step: Add the code below into the config file of your domain at /home/yourusername/conf/web/yourdomain.com/nginx.ssl.conf

location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "<<FULL PATH OF WP-CONTENT PARENT>>";
    root $root;
    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 =404;
}

Remember change the path into code above <<FULL PATH OF WP-CONTENT PARENT>> to your website root path, ex: /home/yourusername/web/yourdomain.com/public_html/

Source: Configure NGINX to transparently serve WebP files when supported - ShortPixel Knowledge Base

5

Don’t modify /home/yourusername/conf/web/yourdomain.com/nginx.ssl.conf directly use templates!

1 Like
6

But as you see from the code above. I have set the path to the root path of the website. It’s unique for each website.

If put it in the template so I have created a template for each website? 100 templates for 100 websites

Is there a better way to do it?

Thanks

7

Full path is usually

/home/%user%/web/%domain%/public_html/

1 Like
8

https://docs.hestiacp.com/admin_docs/web.html#how-do-web-templates-work

9

/home/%user%/web/%domain%/public_html/ Amazing

Can I modify the file /etc/nginx/nginx.conf ? Does it get overwritten when Hestiacp upgrades?

Thanks

10

We don’t overwrite /etc/nginx/nginx.conf

1 Like
11

@webmasteroffers if you read the red box on the shortpixel article it says:

After everything is configured, your WebP or AVIF files will show up with the same URL and extension. Your browser will display image.jpg, but the image will actually be a WebP/AVIF file.

I noticed the speed improvement even though the browser still shows me the PNG or JPG files. But in reality, is actually using the WebP file.