How LetterBoxd Creates Pixelated Skeleton Images

I recently took a look at Letterboxd and noticed that they use a pixelated skeleton image for their movie posters. Once the high-resolution image is loaded, it replaces the pixelated one.

I thought it was a cool effect and wanted to see how they did it.

After a little bit of poking around, I noticed that they make use of a couple of "backdrop" images. The top layer is an extremely small (48x27 pixel) image that is stretched to fill the entire container. The bottom layer is the full resolution image.

Tiny:

Full size - yup, it's a big one:

Since the top layer is so small, it's very fast to load. This gives the user something to look at, and prevents any content layout shifting. Once the full resolution image is loaded, it is displayed on top of the small image.

So here's what we are looking at:

Copycopy code to clipboard
1<!-- container div that sets the dimensions -->
2<div class="z-10 relative w-[500px] h-[281px]">
3  <!-- tiny image loaded on bottom but visible -->
4  <img
5    src="https://a.ltrbxd.com/resized/sm/upload/9u/5h/ey/it/there-will-be-blood-48-48-27-27-crop.png?v=6f56c21c8d"
6    class="absolute w-full h-full"
7  />
8  <!-- big image on top but hidden -->
9  <img
10    src="https://a.ltrbxd.com/resized/sm/upload/9u/5h/ey/it/there-will-be-blood-1920-1920-1080-1080-crop-000000.jpg"
11    class="absolute w-full h-full opacity-0"
12  />
13</div>

So we've got our two images, with the big one on top. They are both stretching to fill the container.

Here's what the tiny image looks like now:

Not great, right? It's blurry on top of being pixelated. That's where the image-rendering CSS property comes in.

Copycopy code to clipboard
1#tinyBackdrop {
2  image-rendering: pixelated;
3}

That's more like it! Now we just need to transition from the pixelated image to the full resolution image. We can do this by setting the opacity of the full image to 0 initially, and 1 once it's been loaded.

Copycopy code to clipboard
1<div class="z-10 relative w-[500px] h-[281px]">
2  <!-- ... -->
3  <img
4    src="https://a.ltrbxd.com/resized/sm/upload/9u/5h/ey/it/there-will-be-blood-1920-1920-1080-1080-crop-000000.jpg"
5    class="absolute w-full h-full opacity-0 transition-all duration-500 delay-500"
6    onload="this.style.opacity = 1"
7  />
8  <!-- don't use the "this" hack - it's just for the example -->
9</div>

End result:

Not bad! It's a cool effect that feels fun and keeps users engaged.