📝 CSS-Tricks 249: Decoding async, tree rings, and flexbox gap

View this newsletter on the web.

[Robin]: I thought I knew everything when it comes to responsive images, but this article by Addy Osmani sure proved me wrong. He writes about how images impact performance and how that ties into Google’s Core Web Vitals but goes step by step, from a humble img tag, all the way and up to the pretty complex HTML that he ends the article with.

One good reminder from Addy is that for hero images we can often save a bit of time if we preload our images in the <head>, like this:

<head> <link rel="preload" as="image" href="donut.jpg"> </head>

But you can also defer the decoding of this image, which I had no idea was even a thing browsers could do:

Browsers need to decode the images they download in order to turn them into pixels on your screen. However, how browsers handle deferring images can vary. At the time of writing, Chrome and Safari present images and text together – synchronously – if possible. This looks correct visually, but images have to be decoded, which can mean text isn’t shown until this work is done. The decoding attribute on <img> allows you to signal a preference between synchronous and asynchronous image decoding.

So! What does this mean? Well, you can write something like this…

<img src="donut.jpg" loading="lazy" decoding="async">

…which gives the browser permission to show content before the image has finished the loading and decoding process. That’s a pretty neat trick, if you ask me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s