Applicable to:
- Plesk for Linux
Question
How to configure nginx to serve .webp images instead of jpg/png images when the website is running on nginx only?
Answer
In this example, we have a WebP copy of a jpg/png image with .webp extension next to the original file, for example:
- example.jpg
- example.jpg.webp
-
Connect to the Plesk server via SSH.
-
Create the file
/etc/nginx/conf.d/webp.conf:# touch /etc/nginx/conf.d/webp.conf
-
Open the
webp.conffile in a text editor (for example, vi editor) and paste the following content in it:CONFIG_TEXT: map $http_accept $webp_extension { default ""; "~*webp" ".webp"; }
-
Save the changes and close the file.
-
Restart the nginx service to apply the changes:
# service nginx restart
-
Log in to Plesk and go to Domains > example.com > Apache & nginx settings.
-
Add the following to the additional nginx directives field:
CONFIG_TEXT: location ~* ^.+\.(jpe?g|png) {
add_header Cache-Control "public, no-transform";
add_header Vary "Accept-Encoding";
if ( !-f $document_root$uri$webp_extension ) {
add_header X_WebP_SP_Miss $document_root$uri$webp_extension;
}
try_files $uri$webp_extension $uri =404;
} - Make sure Serve static files directly by nginx checkbox is disabled.
-
Apply the changes.
Comments
1 comment
The following part must be used for testing purposes only:
==========================
if ( !-f $document_root$uri$webp_extension ) {
add_header X_WebP_SP_Miss $document_root$uri$webp_extension;
}
==========================
It provides full path to the requested image, e.g.,
X_WebP_SP_Miss: /var/www/vhosts/example.org/httpdocs/img/image.png.webp
which is not safe on production environment. Must be commented out as soon as all images have webp version.
Please sign in to leave a comment.