I'm not able to serve jpeg or png images to webp on my Ubuntu server.
The request:
Request URL: https://staging.myserver.com/images/mainfoto.jpg
Request Method: GET
And the response is:
accept-ranges: bytes
content-length: 304152
content-type: image/jpeg
date: Mon, 07 Oct 2019 17:33:14 GMT
etag: "5d9a2b60-4a418"
last-modified: Sun, 06 Oct 2019 17:58:56 GMT
server: nginx/1.14.0 (Ubuntu)
status: 200
vary: Accept
In sudo nano /etc/nginx/nginx.conf
http {
...
include /etc/nginx/mime.types; #I checked the webp is included
...
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
...
}
And then in my sudo nano /etc/nginx/sites-available/staging.myserver.com
# Checking if there's a WebP version for the requested image ..
location ~* ^.+\.(jpe?g|png)$ {
add_header Vary Accept;
# and if so, serving it
try_files $1$webp_suffix $uri =404;
}
And finished with:
sudo nginx -t
sudo systemctl reload nginx
And deleted browser cache with a hard reload
Any ideas what I could do?
Full server config file here:
server {
server_name staging.myserver.com;
root /var/www/myserver-staging/current/public;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
index index.html index.htm index.php;
charset utf-8;
location / {
try_files $uri $uri/ /index.php?$query_string;
auth_basic "Staff Only";
auth_basic_user_file "/var/www/myserver/.htpasswd";
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
error_page 404 /index.php;
location ~ \.php$ {
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
include fastcgi_params;
}
# Checking if there's a WebP version for the requested image ..
location ~* ^.+\.(jpe?g|png)$ {
add_header Vary Accept;
# and if so, serving it
try_files $1$webp_suffix $uri =404;
}
location ~ /\.(?!well-known).* {
deny all;
}
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/staging.myserver.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/staging.myserver.com/privkey.pem; # managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}
server {
if ($host = staging.myserver.com) {
return 301 https://$host$request_uri;
} # managed by Certbot
server_name staging.myserver.com;
listen 80;
return 404; # managed by Certbot
}
mainfoto.jpg.webp
exist?mainfoto.jpg.webp
, however, you referred tomainfoto.webp
. Note the missing.jpg
part in between. Your code above captures the file path, including the file extension, in this case.jpg
. It then searches for a file with traling.webp
. Ensure the file the code searches for does indeed exist. Edit: Scratch this, I've read your code wrong. Your current code only captures the file extentions, and searches for a file with traling.webp
, which, in case of this example, leads tojpg.webp
.try_files $uri$webp_suffix $uri =404;
and nowmainfoto.jpg.webp
works. However, my original goal is to get frommainfoto.jpg
tomainfoto.webp
. How would I do this then?