Another simple css-only solution as the article mentions is gradients. Like

  background: linear-gradient(
    to right,
    #51463e 0%,
    #28241f 100%
  );

Tool: https://tools.w3clubs.com/gip/

cool, but the fact that you can now do this with CSS is part of the reason that a new browser engine is so unlikely - one of 100000 things that css can do now and need to be supported :(

Maybe we should have kept CSS simple and JS optional. Maybe we took a few wrong turns...

Years ago before you could do anything this fancy with CSS I experimented with generating 3x2 pixel images server side and then presenting them as base64 encoded pngs in a "scoped" block of CSS to ensure they loaded before the src images. Coincidentally this was the same 3x2 layout as OP did here with CSS. I abandoned it because a 3x2 image scaled up looked terrible, and went with average color instead. This solution looks a lot better visually.

I still do the average color thing today since it's easy to calculate and store server side (I resize the uploaded image to 1x1 px and just record the result as a hex code in the DB).

This works significantly better than I would have expected. I was just exploring extremely simple png strings as an alternative to the hash libraries requiring decoding. I had also explored two color css gradient, based on pregenerated major/minor colors, but too course to be useful (for a fast scrolling gallery). I’ll give this a test drive!

Why is the page so sluggish on mobile?

I read the title as “Minimal CSS — only blurry image placeholders” first by mistake. ;)

broken on iOS (iPad)

It's a cool solution, and I like that it's CSS only. But the generated placeholders are way too blurry/lossy for my personal preferences.

My attempt at the four color approach:

https://0x0.st/820Q.html

Man, it's wild how much you can do with CSS calculations. How long before someone makes a CSS-only Game Boy emulator?