Because we are all slaves to SEO and also we want a fast website, right?
There is a docker-compose.yml
file which you can use to run your tests.
-
Allows you to use
webp
format when it is supported by user client and is also available on the storage. -
Allows you to resize images on the fly.
-
you must visit one of these urls:
http://localhost:80/1.jpg
http://localhost:80/2.jpg
http://localhost:80/3.png
if there is a webp file and also if your browser supports it, then you are served with a webp file otherwise the original image is served, therefore you can play with it like deleting the original file or deleting the webp file.
-
First you must visit the
Minio
console dashboard athttp://localhost:8900
(user:root
, password:password
) and create a bucket, after creating that go ahead and change its setting from private to public so you can access its content. now go ahead and upload some images to this bucket fromlocal_storage
folder and like before you can play with having only some of those files. if you uploaded sample images you vist these links assuming you named your bucketimage
:http://localhost:81/image/1.jpg
http://localhost:81/image/2.jpg
http://localhost:81/image/3.png
-
I assumed that every
webp
file is beside the original file with a suffix of.webp
likeabcd.png
andabcd.png.webp
. -
There are 2 modes, port
80
for serving images on local storage and port81
which assumes taht you are implementing some kind of proxy service foramazon S3
or other S3 compatible storages likeMinio
(which I used for this project) or something else like a user-facing public CDN 🤯. -
This is my best guess for how CDN providers are enabling you to just flip a switch and have webp images on your website (obviously they handle converting and then storing the webp themselves).
I have a simple way, here you go. (converts jpg jpeg png files in local_storage
folder)
docker build -t webp-convertor .
docker run --rm -v $(pwd)/local_storage:/usr/share/images webp-convertor
you are more than welcome to any contribution
the time I spent on this project was sponsored by my employer at the time: Vandar