[Re-open] Possible easy solution for webp format

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

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

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.

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

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

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

Full path is usually

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

1 Like

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

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

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

Thanks

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

1 Like