Add more blur to image previews

[nolanlawson]

Adds more blur to the preview image so that it's clear that it's in a "loading" state, since otherwise it can be hard to tell.

Before: https://gfycat.com/VainCostlyDungenesscrab (throttled to 3G)

After: https://gfycat.com/AthleticSkeletalAlleycat (throttled to 3G)

I think it's debatable whether the entire preview system is an improvement over the browser's built-in loading of images, but personally I find it a bit jarring when an image loads from top-to-bottom, and plus not all images even have a progressive view (it depends how the JPEG is encoded, and PNGs don't have them at all). So I think the blurred approach is nice for consistency.

Fixes #4060

[Gargron]

Could you overflow: hidden so the borders would be sharp?

[nolanlawson]

Ahhh nice catch.

[nolanlawson]

Hmmm oddly overflow: hidden does not result in sharp edges. border: 1px solid transparent was suggested as a workaround, but in desktop Chrome at least, that doesn't work either. I think we would need to add a container first and set its overflow to hidden. 😕

[nolanlawson]

I've experimented with this and I don't think I can find a blur that I find satisfying. 10px causes the image to look inset a bit, and adding overflow: hidden even to the parent just makes this inset more obvious:

(Notice the weird "frame" around the preview image.)

I can't find a solution I'm happy with, so I'm going to abandon for now. Maybe a better solution would be to add opacity: 0.75 or a loading spinner or something like that?