Question WebP support with NGINX

[P_heck]

Plesk version 12.5.30 Update #47

I would like to enable WebP support on my hosted Wordpress sites using the Optimus plugin. To do so, it is required to force NGINX to send the right headers.

Unfortanately, the first solution described in the support document of Optimus couldn't be used due to incompatibility with the used Nexusthemes Template framework. So I tried to configure the 2nd solution, to tell NGINX to produce the header.

Unfortunately, I can't add the below directives to the custom NGINX configuration in Plesk Panel as it always complains about it.

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}

# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
    add_header Vary Accept;
    try_files $uri$webp_ext $uri =404;
}

Anyone has any idea, how I can enable WebP support within a Plesk NGINX based installation?

Cheers Peter

 

[UFHH01]

Hi P_heck,

# http config block map $http_accept $webp_ext { default ""; "~*webp" ".webp"; }

This additional nginx directive has to be placed at "/etc/nginx/nginx.conf"
Just place the code right ABOVE the existent :

.....
PLACE_YOUR_ADDITIONAL_HTTP-BLOCK-CODE_HERE

        include /etc/nginx/conf.d/*.conf;
    }

... inside the whole block " http {" and the closing " }" - bracket at the end of the nginx.conf.



Your additional code

# server config block location ~* ^/wp-content/.+\.(png|jpg)$ { add_header Vary Accept; try_files $uri$webp_ext $uri =404; }

can be placed over the Plesk Control Panel, inside the domain - specific "Home > Subscriptions > example.com > Websites & Domains > Apache & nginx Settings > Additional nginx directives" - box - just make sure, that you don't already have an additional defined location as "
^/wp-content/.+\.(png|jpg)$", to avoid error messages, depending to double entries.

 

[trialotto]

@P_heck, Peter,

Nginx as provided with Plesk is already able to support WebP, see /etc/nginx/mime.types (line 25).

In order to have Nginx serve webp directly (read: serve as a static file), you will have to do two things (go to " [ domain ] > Apache & nginx settings (click)" and):

1) add the following to the textbox "Additional nginx directives" (go to the domain in question):

# Media: images, icons
location ~* \.(jpeg|jpg|gif|png|ico|cur|gz|svg|svgz|webp)$ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}

2) under "Nginx settings", make sure that the checkbox "serve static files directly by Nginx" is checked and remove the file extensions (as added in step 1) from the textbox.


That is all, Nginx will (directly) serve webp files.

However, I do understand that you have some issues with some framework (that I do not know) and with Optimus support documents (which are rubbish by the way).

Actually, the support documents describe a (mapping) method to deliver png and jpg files as webp files, with associated header.

That is really strange and that is an understatement: those png /jpg files are not equal to webp files, so there is no reason to deliver them "as being webp files".

In fact, you will probably mess up proper functioning of many modern browser, when implementing the advice of those support documents.


In summary, do not implement the "png/jpg to webp rewrite", just convert files to webp format (whenever this is required).

Hope the above helps and explains a bit.

Regards......

 

[krzk]

@P_heck, Peter,

Nginx as provided with Plesk is already able to support WebP, see /etc/nginx/mime.types (line 25).

In order to have Nginx serve webp directly (read: serve as a static file), you will have to do two things (go to " [ domain ] > Apache & nginx settings (click)" and):

1) add the following to the textbox "Additional nginx directives" (go to the domain in question):

# Media: images, icons
location ~* \.(jpeg|jpg|gif|png|ico|cur|gz|svg|svgz|webp)$ {
expires 1M;
access_log off;
add_header Cache-Control "public";
}

2) under "Nginx settings", make sure that the checkbox "serve static files directly by Nginx" is checked and remove the file extensions (as added in step 1) from the textbox.


That is all, Nginx will (directly) serve webp files.

However, I do understand that you have some issues with some framework (that I do not know) and with Optimus support documents (which are rubbish by the way).

Actually, the support documents describe a (mapping) method to deliver png and jpg files as webp files, with associated header.

That is really strange and that is an understatement: those png /jpg files are not equal to webp files, so there is no reason to deliver them "as being webp files".

In fact, you will probably mess up proper functioning of many modern browser, when implementing the advice of those support documents.


In summary, do not implement the "png/jpg to webp rewrite", just convert files to webp format (whenever this is required).

Hope the above helps and explains a bit.

Regards......

I did exactly what you said, but it still doesn't work. I've been looking for a working solution and still haven't found a way to configure WebP with nginx.
I configured WP Fastest Cache plugin to serve WebP images but I'm still getting the "Serve images in next-gen formats" in Google Speed Insights.
I've contacted the plugin's support team but they advised to disable nginx completely and use Apache only which doesn't seem to be best solution, since some people say they managed to configure Plesk to serve WebP images when available. Also I've found out it's not possible to disable nginx for only one subscription.

Btw, I wasn't able to leave the "file extensions" textbox empty so I just deleted the "(jpeg|jpg|gif|png|ico|cur|gz|svg|svgz|webp)" from there.

Could anyone help me with this issue please?