Every card on this site does this. It is just too quick to see.

A video card has a gap in it. The layout arrives, the poster arrives, and the video arrives some time after that, and in between you are looking at either a hole or a spinner. Neither tells you anything about what is coming.

The fix is old and it is called LQIP: a low quality image placeholder. Take one frame of the video, shrink it to almost nothing, blur it, and put it behind the video until the video is ready.

The trade, in bytes

The placeholder here is 32 by 18 pixels. 372 bytes. The video it stands in for is 1,033,928.

That is a factor of about 2,800. The placeholder arrives in the same breath as the HTML, so there is never a moment of nothing: you get the right colours in the right places immediately, and the detail fills in when it can.

Small enough that it could be inlined as a data URI and skip the request entirely, which is what I would do on a page where it was the only image. Here there are eleven of them and they cache.

Why blur rather than pixelate

At 32 pixels wide, unblurred, you can see the pixels and it reads as a broken image. Blurred, the same data reads as a photograph slightly out of focus, which is a thing eyes are used to and do not treat as a fault.

The demo scales it up 105 per cent as well. Blur softens the edges of the element itself, and a hair of overscale hides that against the frame.

What actually swaps

Not the blur fading out. The video fading in, over 300 milliseconds, with the placeholder sitting still underneath it the whole time. Fading the placeholder out means crossing through a moment where neither is fully there, and on a light frame that flashes.

Press simulate below and it will do it twice. The status readout is there because the interesting part is over in a third of a second and you will otherwise miss which half of it you are watching.

One honest note: this demo shipped pointing at a placeholder that had never been committed and a video path that only a dev server would answer. It has been rebuilt here against this site's own copy of the Yarmer Renewables reel, and the placeholder is generated from that reel's poster. Which does mean the 372 bytes is a real measurement rather than a claim.