News for hackers. Stuff that matters.
Re:BlurHash: Algorithm to generate compact representation of... by londons_explore on Friday February 21, 2020 @04:50AM (#22382033)
The cost is in the initial render to a canvas. Once on a canvas, there is no advantage to converting it to a blob for display in an IMG tag as far as performance goes.
Re:BlurHash: Algorithm to generate compact representation of... by WorldMaker on Friday February 21, 2020 @01:48PM (#22385615)
That's not what my testing has shown in practice. Memory use drops dramatically in the conversion from canvas to blob when the browser compresses the render buffer to JPG/PNG under the hood. GPU usage seems to drop in the browsers I had under performance tools, but it subtle enough it could be just margin of error (as memory pressure was my bigger issue, that wasn't something I was keeping that good of an eye on).

But yes the biggest performance gains aren't in pure, static IMG tag usage scenarios, the biggest performance gains I saw were in combo with CSS animations, and that was something important to what I was studying. As Blurhases are useful loading states this seems a common use case to me of having a Blurhash shown/involved in things like navigation transitions, and it seems pretty clear browsers have a lot more tricks for optimizing static images involved in CSS Animations than they do for canvas surfaces.

I was looking for a way to better amortize or skip the initial render as well. It should be possible to take the TypedArray `decode` buffer and directly construct a Blob from it, but I couldn't find a MIME Type that matched the Bitmap format Blurhash produces (and Canvas setImageData reads) in the time I've had to poke at the project so far. As I mentioned, memory pressure was a performance concern in my testing, so I'd also be curious about the performance trade-off of paying for an initial canvas render and getting what seems to be a "nearly free" compression to JPG or PNG from the GPU in converting that to blob, versus using a larger bitmap blob but no canvas render step.