Minimal CSS-only blurry image placeholders • Hacker News Board

Re: Minimal CSS-only blurry image placeholders

#61

Post by ssttoo » Thu, Apr 03, 2025, 4:51 PM UTC

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/

Re: Minimal CSS-only blurry image placeholders

#62

Post by layer8 » Thu, Apr 03, 2025, 4:53 PM UTC

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

Re: Minimal CSS-only blurry image placeholders

#63

Post by molszanski » Thu, Apr 03, 2025, 5:19 PM UTC

Amazing work! Thanks you for sharing!

Re: Minimal CSS-only blurry image placeholders

#64

Post by bufferoverflow » Thu, Apr 03, 2025, 5:27 PM UTC

We need to embrace WebP v2 for this kind of stuff. I took one of their images, resized it to 24x16px, and compressed it with Squoosh at 65% quality. It compresses to just 144 bytes. And it looks way way way better than these CSS gradients.

https://squoosh.app/

Re: Minimal CSS-only blurry image placeholders

#65

Post by thwarted » Thu, Apr 03, 2025, 5:36 PM UTC

No one remembers the lowsrc img attribute.

Re: Minimal CSS-only blurry image placeholders

#66

Post by Lord_Zero » Thu, Apr 03, 2025, 5:42 PM UTC

bufferoverflow wrote: post #64

We need to embrace WebP v2 for this kind of stuff. I took one of their images, resized it to 24x16px, and compressed it with Squoosh at 65% quality. It compresses to just 144 bytes. And it looks way way way better than these CSS gradients. https://squoosh.app/

Cool app but no maintained library to use it in our own apps and scripts.

Re: Minimal CSS-only blurry image placeholders

#67

Post by bmandale » Thu, Apr 03, 2025, 6:00 PM UTC

My attempt at the four color approach:

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

Re: Minimal CSS-only blurry image placeholders

#68

Post by recursive » Thu, Apr 03, 2025, 6:10 PM UTC

superkuh wrote: post #60

recursive wrote: post #21

Earlier quoted context omitted.

The placeholder is inline in the markup. It can be displayed before the image loads. Which is not inline. I have no idea what 99% thing you're talking about.

Look at literally any "newspaper" website. From the smallest local paper to the NYT.

That's a whole separate thing with a different reason for existing.

Re: Minimal CSS-only blurry image placeholders

#69

Post by bufferoverflow » Thu, Apr 03, 2025, 6:44 PM UTC

Lord_Zero wrote: post #66

bufferoverflow wrote: post #64

We need to embrace WebP v2 for this kind of stuff. I took one of their images, resized it to 24x16px, and compressed it with Squoosh at 65% quality. It compresses to just 144 bytes. And it looks way way way better than these CSS gradients. https://squoosh.app/

Cool app but no maintained library to use it in our own apps and scripts.

https://github.com/GoogleChromeLabs/squoosh

Re: Minimal CSS-only blurry image placeholders

#70

Post by Cieric » Thu, Apr 03, 2025, 7:05 PM UTC

Just in case anyone also misses it like I did, dark reader (at least on firefox) appears to apply itself to the final colors causing them to look quite bad and not match the input image at all. I would have discounted this entirely if it wasn't for all the praise I was seeing in the comments here.