When I first saw this product announced, I immediately wanted to replace my manual solution with it. I’ve been putting it off because other work had to be done, but now that I read this, I think I’ll stick with my current workflow for now.
What I’ve been doing is first resize an image to multiple specific sizes using Vips (https://www.libvips.org/API/current/using-cli.html)
for size in 8120 5260 3840 2560 1920 1200 992 768 576 320
vipsthumbnail $img --vips-progress --linear \
--size=$size --vips-concurrency=(sysctl -n hw.ncpu) -o $size'_%s.png' \
--eprofile='/System/Library/ColorSync/Profiles/sRGB Profile.icc' \
--delete --rotate
end
Optimize them using ImageOptim (
https://imageoptim.com/mac)
imageoptim (dirname $img)
Then use some kind of template to add a srcset on my websites.
This one is using Plim (https://plim.readthedocs.io/en/latest/syntax.html#tag-attrib...) which I use on Lunar’s website (https://lunar.fyi)
img alt="background" srcset=${
','.join(f'/static/img/stars/{width}_stars.png {width}w'
for width in [8120, 5260, 3840, 2560, 1920, 1280, 1024, 768, 640, 320])
}
This one is using Hugo which I use on
https://alinpanaitiu.com {{ $paths := (
apply
[8120, 5260, 3840, 2560, 1920, 1200, 992, 768, 576, 320, 64]
"printf" "/images/%d_stars.png %dw" ) }}
{{ $srcset := delimit $paths "," }}
Having a CDN in front which could do this for me is what I’ve been dreaming of, so I can simply have an
images folder with the unaltered images instead of all those variants. But what I want isn’t always what I need.
Maybe what I need is something like a reverse proxy that can generate the variant on the fly when it is requested by the browser through the srcset.