Comments (6)
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 tooinclude /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
from squidge.
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.
from squidge.
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.
from squidge.
@sascha-bleech do you have apache rules?
from squidge.
from squidge.
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.
from squidge.
Related Issues (9)
- How to use the helper function? HOT 1
- Can't run squidge command HOT 22
- Plugin options are not appearing HOT 3
- How to install avifenc on Ubuntu 20.04 HOT 3
- hello, Squidge always inactive even though I installed the jpegoptim optipng HOT 1
- feature: Keep only the smallest files HOT 3
- documentation: Update Readme (Fix Typos) HOT 2
- `which` command in Windows HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from squidge.