Using background images to show low-resolution previews placeholder for big images

DanielJune 4, 2021January 10, 2023

Let's say we have a big nice picture we want to load. It has a few MB, we really want in on our page but it will slow down the loading time.

One cool little CSS trick we can do is to set a low res SVG background image for it as a preview. Like this:

<img src="very-big-flower-img-here.jpg" alt="just a flower"
     style="background-size: cover; 
        background-image: url(data:image/gif;base64, long_low_res_data_here);">

img {
    background-size: cover;
}

For the user the experience will look like this:

Given that the SVG data is inline this will not an extra request to the page.

Also, it's a good idea to have the low res SVG at the same size as the high res one to give the browser a clear indication of the need space and avoid any CLS - Cumulative Layout Shift.

Or course this can be combined with multiple other things like lazy loading, image decoding, or srcset to improve the performance even more.