The Humble `img` Element And Core Web Vitals

Celý článek

Addy Osmani on images in HTML:

The humble <img> element has gained some superpowers over the years. Given how central it is to image optimization on the web, let’s catch up on what it can do and how it can help improve user experience and the Core Web Vitals.

Addy does a good job of translating stuff like this into Instagram posts, so I’ll embed that here:

I’d say this stuff is required knowledge for any HTML developer¹. Images affect a site’s performance. Images affect a site’s accessibility. Images affect a site’s UX. Images effect a site’s SEO. That’s not stuff you can sluff off. There is a lot of stuff to know, but that’s the job.

I’m still really curious about this decoding="async" stuff. I’ve read some things that suggest it’s best to have this on all images (though Addy doesn’t suggest this, but doesn’t provide guidance either). I don’t yet understand how best to use this attribute, but if it does turn out that it’s “all the time,” I think we should push browsers to make that behavior the default so we don’t have to bother with the attribute.

I also see Addy suggests loading the hero image as early as possible, but no further trickery. I’m curious if this trick we covered about just not loading the hero at all (until interaction) in an effort to trick CWV into higher numbers will end up being a good practice, or bad.

1. I don’t hear the term “HTML developer” thrown around much, but I like it. For example, people regularly use “React developer” to describe those who do React development. If you write code that ends up as the DOM, you’re an HTML developer. You’re responsible for the experience that HTML delivers. ⮑

Direct Link to Article — Permalink

The post The Humble `img` Element And Core Web Vitals appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.