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?
brycewray 13 days ago [-]
> 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?
nigeltao 12 days ago [-]
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.
Rendered at 11:51:19 GMT+0000 (Coordinated Universal Time) with Vercel.
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?
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...
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" ...'*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...
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.