Does anyone else also feel... uneasy, bothered, it's hard to express the feeling, by LQIPs?
Primarily those that are blurry, my brain wants to figure out what the picture is, even before I recognize it's an LQIP, which is straining and frustrating because... well it's blurry or super degraded.
Is it really better than just having a placeholder square with maybe the most prominent color? Or just a good old progressive image?
> Is it really better than just having a placeholder square with maybe the most prominent color? Or just a good old progressive image?
The Hugo static site generator provides a `.Colors` method[0] for doing this. It produces what one 2018 article[1] referred to as a GIP (Gradient Image Placeholder).
Is there any reason the tech is optimal to 32x32? 48x48 might be interesting also. Maybe the decoder can directly render to 48x48 or 64x64, so the size remains the same, and no upscaling is needed?
interesting! 147 bytes for 128x128 pixels are ~0.096 bpp (bits/pixel).
Everything above 153x153 pixels is too small (!) to count as LQIP (lighthouse).
The "normal" way would be to use a 0.05+ bpp WEBP-image as LQIP,
which has ~600 bytes, but looks MUCH better and is widely supported:
https://show.quicky.club/results/cb/1f/a5/ddbacee070083ac5f7...
@dmit - please check your HTML (w3c validator is unhappy): https://nigeltao.github.io/blog/2026/wasm-handsum-example/ This is just invalid: '... width="128px" height="128px" ...'*Hi, author here. Thanks for the "check your HTML" bug report.
Does anyone else also feel... uneasy, bothered, it's hard to express the feeling, by LQIPs?
Primarily those that are blurry, my brain wants to figure out what the picture is, even before I recognize it's an LQIP, which is straining and frustrating because... well it's blurry or super degraded.
Is it really better than just having a placeholder square with maybe the most prominent color? Or just a good old progressive image?
> Is it really better than just having a placeholder square with maybe the most prominent color? Or just a good old progressive image?
The Hugo static site generator provides a `.Colors` method[0] for doing this. It produces what one 2018 article[1] referred to as a GIP (Gradient Image Placeholder).
[0]: https://gohugo.io/methods/resource/colors/#article
[1]: https://calendar.perfplanet.com/2018/gradient-image-placehol...
It would be nice if the low quality image also provided a headstart for the full quality image.
Shameless plug, SQZ does just that, you can check it out at https://github.com/MarcioPais/SQZ
Also for some discussion on more technical aspects and sample images, check out the thread over at the Encode Forum: https://encode.su/threads/4183-SQZ-Low-complexity-scalable-l...
Does progressive jpgs do the same thing?
Is there any reason the tech is optimal to 32x32? 48x48 might be interesting also. Maybe the decoder can directly render to 48x48 or 64x64, so the size remains the same, and no upscaling is needed?
Handsum is intrinsically 16x16. Decoding to 32x32 is a two step process:
1. Decode to 16x16. This is done by the Handsum library.
2. Upscale 2x. This is done by the caller of the Handsum library (or, for the Wasm demo, by the HTML renderer).
If you want 48x48 or 64x64, just raise the 2x, in step 2, to 3x or 4x.