4 ms·
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,
by alin23 5y ago
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 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 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-attributes https://plim.readthedocs.io/en/latest/syntax.html#tag-attrib...) which I use on Lunar’s website (https://lunar.fyi 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 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 "," }}
<img
alt="background"
srcset="{{ $srcset }}">
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.
- DenseComet 5y agoUnless you're running something that's mostly images, I'm a fan of pregenerating variants of images for static sites since storage has become so cheap. However, I think the best way of doing that is to actually generate the variants as part of the build step, the way that Next or Gatsby can. Hugo also seems to have some support for image processing [1] so it may be possible to put something together using only Hugo. It increases build time, but a build cache should fix that. [1] https://gohugo.io/content-management/image-processing/ https://gohugo.io/content-management/image-processing/