Serve webp images on Wordpress, help with the nginx file

Hello,
I’m trying to use one of the Wordpress plugins that allows to serve webp images like this one WebP Converter for Media – Convert WebP and AVIF & Optimize Images – WordPress plugin | WordPress.org or this one GitHub - rosell-dk/webp-express: Wordpress plugin for serving autogenerated WebP images instead of jpeg/png to browsers that supports WebP

Both imply that I modify the nginx file, things that I did but, apparently, not in the right way.

This should be the configuration for nginx:

these lines to very beginning of file if possible):

server {
    # 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

    # ...
}

After making changes, remember to restart the machine: systemctl restart nginx.

While my actual nginx file is

map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 80;
    listen [::]:80;
    server_name 9minuti.com xmpp-upload.9minuti.com;

    access_by_lua_file /usr/share/ssowat/access.lua;

    include /etc/nginx/conf.d/acme-challenge.conf.inc;

    include /etc/nginx/conf.d/9minuti.com.d/*.conf;

    location /yunohost {
        return 301 https://$http_host$request_uri;
    }

# vhost dedicated to XMPP http_upload
server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name xmpp-upload.9minuti.com;
    root /dev/null;

    location /upload/ {
        alias /var/xmpp-upload/9minuti.com/upload/;
        # Pass all requests to metronome, except for GET and HEAD requests.
        limit_except GET HEAD {
          proxy_pass http://localhost:5290;
        }

        include proxy_params;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'HEAD, GET, PUT, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization';
        add_header 'Access-Control-Allow-Credentials' 'true';
        client_max_body_size 105M; # Choose a value a bit higher than the max upload configured in XMPP server
    }

    include /etc/nginx/conf.d/security.conf.inc;

    ssl_certificate /etc/yunohost/certs/9minuti.com/crt.pem;
    ssl_certificate_key /etc/yunohost/certs/9minuti.com/key.pem;




    access_log /var/log/nginx/xmpp-upload.9minuti.com-access.log;
    error_log /var/log/nginx/xmpp-upload.9minuti.com-error.log;
}

    location ^~ '/.well-known/ynh-diagnosis/' {
        alias /tmp/.well-known/ynh-diagnosis/;
    }

    location ^~ '/.well-known/autoconfig/mail/' {
        alias /var/www/.well-known/9minuti.com/autoconfig/mail/;
    }

    access_log /var/log/nginx/9minuti.com-access.log;
    error_log /var/log/nginx/9minuti.com-error.log;
}


server {

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name 9minuti.com;

    include /etc/nginx/conf.d/security.conf.inc;

    ssl_certificate /etc/yunohost/certs/9minuti.com/crt.pem;
    ssl_certificate_key /etc/yunohost/certs/9minuti.com/key.pem;


    location ^~ '/.well-known/autoconfig/mail/' {
        alias /var/www/.well-known/9minuti.com/autoconfig/mail/;
    }

    access_by_lua_file /usr/share/ssowat/access.lua;

    include /etc/nginx/conf.d/9minuti.com.d/*.conf;

    include /etc/nginx/conf.d/yunohost_sso.conf.inc;
    include /etc/nginx/conf.d/yunohost_admin.conf.inc;
    include /etc/nginx/conf.d/yunohost_api.conf.inc;

    access_log /var/log/nginx/9minuti.com-access.log;
    error_log /var/log/nginx/9minuti.com-error.log;
}

Anyone could please help me?
Thank you.

I really think this webp support could improve a lot Wordpress, since this feature allow to save a lot of band, that is very important for people that selfhost.

The conf file is here: wordpress_ynh/nginx.conf at master · YunoHost-Apps/wordpress_ynh · GitHub

On your yunohost it’s located in /etc/nginx/conf.d/domain.tld.d/wordpress.conf

If someone has already configured those plugins on a yunohost instance, we could apply the change on the official configuration. It might be possible to improve cache image on the yunohost conf too.

Thank you for your reply. It would be awesome to include it in the default Wordpress configuration.

In that case I would suggest to use Wepb express plugin, that is completely free.

This is my original wordpress nginx file.

#--MULTISITE--if (!-e $request_filename) {
        #--MULTISITE--rewrite /wp-admin$ $scheme://$host$uri/ permanent;
        #--MULTISITE--rewrite ^/(/[^/]+)?(/wp-.*) /$2 last;
        #--MULTISITE--rewrite ^/(/[^/]+)?(/.*\.php)$ /$2 last;
#--MULTISITE--}


#sub_path_only rewrite ^/$ / permanent;
location / {

       # Path to source
       alias /var/www/wordpress__4/;

       index index.php;
       if (!-e $request_filename)
       {
              rewrite ^(.+)$ /index.php?q=$1 last;
       }

       client_max_body_size 30m;
       location ~ [^/]\.php(/|$) {
           fastcgi_split_path_info ^(.+?\.php)(/.*)$;
           fastcgi_pass unix:/var/run/php/php7.3-fpm-wordpress__4.sock;

           fastcgi_index index.php;
           include fastcgi_params;
           fastcgi_param REMOTE_USER $remote_user;
           fastcgi_param PATH_INFO $fastcgi_path_info;
           fastcgi_param SCRIPT_FILENAME $request_filename;
       }

  # Include SSOWAT user panel.
#  include conf.d/yunohost_panel.conf.inc;
}

and this is the configuration suggested here.

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)

Unfortunately I cannot figure out if I just have to copy and paste it on the top of my original nginx file (it doesn’t work) or what.

Thank you.

I think you should do like that:

#--MULTISITE--if (!-e $request_filename) {
        #--MULTISITE--rewrite /wp-admin$ $scheme://$host$uri/ permanent;
        #--MULTISITE--rewrite ^/(/[^/]+)?(/wp-.*) /$2 last;
        #--MULTISITE--rewrite ^/(/[^/]+)?(/.*\.php)$ /$2 last;
#--MULTISITE--}


#sub_path_only rewrite ^/$ / permanent;
location / {

       # Path to source
       alias /var/www/wordpress__4/;

       index index.php;
       if (!-e $request_filename)
       {
              rewrite ^(.+)$ /index.php?q=$1 last;
       }

       client_max_body_size 30m;
       location ~ [^/]\.php(/|$) {
           fastcgi_split_path_info ^(.+?\.php)(/.*)$;
           fastcgi_pass unix:/var/run/php/php7.3-fpm-wordpress__4.sock;

           fastcgi_index index.php;
           include fastcgi_params;
           fastcgi_param REMOTE_USER $remote_user;
           fastcgi_param PATH_INFO $fastcgi_path_info;
           fastcgi_param SCRIPT_FILENAME $request_filename;
       }
# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)


  # Include SSOWAT user panel.
#  include conf.d/yunohost_panel.conf.inc;
}

Sadly: i don’t think it’s a good idea to add plugin in our default configuration.

Thank you but this configuration doesn’t pass the plugin test.