What would a server config look like for nginx or apache rules to serve images dynamically?

[landwire]

Could yo provide us with an example config for nginx and apache?
Thanks!

[ainsleyclark]

Hi @landwire.

Thanks for your question, can I ask what the reason would be to serve them dynamically is? By using the <picture> element the browser does the hard work for you.

Regardless, below is an example for serving .webp files dynamically using nginx. I'm sure you can adapt it to use avif files as well.

Configure nginx

• Create the file /etc/nginx/conf.d/webp.conf and paste the following contents into it, save.

## Chrome/65 accept : image/webp,image/apng,image/*,*/*;q=0.8
## Firefox/58 accept: */*
## iPhone5s   accept: */*

map $http_accept $img_suffix {
  "~*webp"  ".webp";
  "~*jxr"   ".jxr";
}

## https://github.com/cdowdy/Nginx-Content-Negotiation/blob/master/nginx.conf
map $msie $cache_control {
  "1"     "private";
}

map $msie $vary_header {
  default "Accept";
  "1"     "";
}

• Ensure that the default nginx config file is including the webp.conf you have just created. nano /etc/nginx/nginx.conf.
  Under the http directive there should be something similar too include /etc/nginx/conf.d/*.conf;

• Add the following to your config file under sites-available.

location ~* \.(?:jpg|jpeg|gif|png|ico|cur|webp|jxr)$ {
  expires 1M;
  add_header Vary $vary_header;
  add_header Cache-Control $cache_control;
  add_header Cache-Control "public";
  ## Comment to enable the access-accept.log scraper:
  access_log off;
  try_files $uri$img_suffix $uri =404;
}

• Reload & nginx sudo nginx -t && sudo service nginx reload.

Test

• Run with native curl user agent - should see jpg/png or original image being returned.

curl -I -L https://www.your-blog.com/wp-content/uploads/2018/02/image.png

• Run with Webp accept header - should see webp being returned.

curl -I -L -H "accept:image/webp,image/apng,image/*,*/*;q=0.8" https://www.your-blog.com/wp-content/uploads/2018/02/image.png

[ghost]

Hi @ainsleyclark,
thank you for the example. I have an existing setup where I generate my own markup for lazy loading and calculating different srcsets.
I will give it a shot in the next few days. I am on apache, so I will try to come up with some .htaccess rules.

[ghost]

If anyone was successful with Apache it would be great, if you could share your code here. I have not had the time yet to pursue this further.

[myedgy]

@sascha-bleech do you have apache rules?

[landwire]

No.Von unterwegs geschicktOn 3. Dec 2022, at 19:39, myedgy ***@***.***> wrote: @sascha-bleech do you have apache rules? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>

[ainsleyclark]

As Squidge has a helper picture command, I will close this. I think in the future this can be done in PHP. Detect if the browser accepts WebP, and serve the webp file, if not, serve the original.
I will be open to PR's for this.