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.<p>What I’ve been doing is first resize an image to multiple specific sizes using Vips (<a href="https://www.libvips.org/API/current/using-cli.html" rel="nofollow">https://www.libvips.org/API/current/using-cli.html</a>)<p><pre><code> 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
</code></pre>
Optimize them using ImageOptim (<a href="https://imageoptim.com/mac" rel="nofollow">https://imageoptim.com/mac</a>)<p><pre><code> imageoptim (dirname $img)
</code></pre>
Then use some kind of template to add a srcset on my websites.<p>This one is using Plim (<a href="https://plim.readthedocs.io/en/latest/syntax.html#tag-attributes" rel="nofollow">https://plim.readthedocs.io/en/latest/syntax.html#tag-attrib...</a>) which I use on Lunar’s website (<a href="https://lunar.fyi" rel="nofollow">https://lunar.fyi</a>)<p><pre><code> 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])
}
</code></pre>
This one is using Hugo which I use on <a href="https://alinpanaitiu.com" rel="nofollow">https://alinpanaitiu.com</a><p><pre><code> {{ $paths := (
apply
[8120, 5260, 3840, 2560, 1920, 1200, 992, 768, 576, 320, 64]
"printf" "/images/%d_stars.png %dw" ) }}
{{ $srcset := delimit $paths "," }}
<img
alt="background"
srcset="{{ $srcset }}">
</code></pre>
Having a CDN in front which could do this for me is what I’ve been dreaming of, so I can simply have an <i>images</i> folder with the unaltered images instead of all those variants. But what I want isn’t always what I need.<p>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.