These blurry images look like they are composed of a couple of gradients.

Wouldn't it be possible to generate a tiny SVG or some CSS that reproduces these gradients?

In that case, basically no decoding step is needed and integration is as easy as setting a CSS style on a div or including an SVG. If the image dimensions are set from the start, the browser can even continue layouting the page before actually drawing the gradients. Letting the browser decode the gradients should also be much faster.

Is there a library that does that?