feat(artwork): adds small blurred placeholder image

[dzucconi]

Closes: GRO-484

So initially I thought LCP would be triggered if we loaded a small (like 20x20) image blown up to fill out the container. This turns out not to be the case in my testing. We have to use an image that's at least 1px larger than the primary image. We can just compress this a huge amount and use a CSS blur. These tend to be around 2kb (as compared to ~50-100kb for the fullsize images). Once this happens these do get picked up as the LCP. Combined with a preload tag this should always win and improve our LCP. Feels a bit hacky but adding a blurred placeholder seems like an actual UX improvement. Granted there's way better ways to implement this than this. Let's let this hang out in draft then merge on Monday and see if the Calibre scores for LCP move at all.

Here's what navigating through a gallery looks like with my network throttling on Fast 3G:

[damassi]

LGTM 👍

One q I have that you may have alluded to (and forgive my ignorance here) is: I've noticed on certain sites in the past that large images like this often "progressively" download (right term?) and I'm wondering why we don't go that route? It seems like a codec / encoding thing but not too sure.

[dzucconi]

Google has a bit on why they don't support progressive in WebP here: https://developers.google.com/speed/webp/faq#does_webp_support_progressive_or_interlaced_display

There's some very interesting threads here:
w3c/largest-contentful-paint#68
w3c/largest-contentful-paint#71

One of the other things I'm thinking might be good to add to Gemini is supporting blurhash: https://blurha.sh/ + https://github.com/Gargron/blurhash
cc @jonallured

[damassi]

Alternatively, WebP offers incremental decoding, where all available incoming bytes of the bitstream are used to try and produce a displayable sample row as soon as possible. This both saves memory, CPU and re-paint effort on the client while providing visual cues about the download status. The incremental decoding feature is available through the Advanced Decoding API.

Interesting