WebP is the hip new image format on the scene. It offers unrivalled image compression at superior visual quality. But, in my opinion, it is deficient compared to JPG in one significant aspect. It doesn’t have a progressive mode.
Progressive mode is useful because it can quickly load a low resolution preview of an image, and then gradually improve its quality.
WebP, by contrast, just loads up the full image line by line. That’s can be annoying on a slow connection.
What if we could change that? Here’s a quick-and-dirty hack.
This is a 5472×3080 image which has been compressed down to “zero” quality on WebP and resized to 640×360. It is less than 5KB.
The original image is 400 KB as a WebP and 1.6MB as a JPG.
We’re going old-skool. Basic HTML + CSS.
<img width=5472 height=3080 alt="Close up of a Raspberry Pi circuit board." style="background-image: url('Small.webp');" src="Big.webp" />
This sets the background of the image to the low-resolution, low quality version. As the high-resolution image loads, it gradually replaces the image in the background.
There are a few more refinements we could make to this:
<img width=5472 height=3080 alt="Close up of a Raspberry Pi circuit board." style="background-color: #0f0; background-image: url('Small.webp');" loading="lazy" src="Big.webp" />
This sets the
background-color to the dominant colour of the image. That way, even before the background image has loaded, you get something to fill the gap. Because we’ve set
loading="lazy" the massive image won’t be downloaded until the
img scrolls into view.
We can even go a step further. Let’s reduce the image down to a thumbnail of 160×90. That takes us down to a ludicrously small 564 Bytes.
Which makes it small enough to stick directly in the HTML once we encode it in Base64:
Of course, you don’t have to go down to quite this extreme level – choose some settings which make sense for you and your media.
- Scale the image down
- Reduce its quality
- Set it as the background to the
I wasn’t involved with the development of WebP – but it seems bizarre to me that it doesn’t contain a “thumbnail mode”. On that ½ MB photo, adding a couple of KB doesn’t seem like a huge overhead.
Similarly, the experimental AVIF also lacks progressive / thumbnail support.
Anyone know what the reason is?