We can combine the srcset and sizes approach with the addition of width and height HTML attributes on our img, so we get the added benefit of improving performance and preventing layout jank too?

(The specific dimensions we provide in our width and height aren’t important as long as they represent the required aspect ratio, since all images in our srcset should share a common aspect ratio anyway.)

My understanding is that this update is coming soon in Firefox and Chrome (if not already released).

AFAIK there’s no similar solution at present for the Art Direction use case.

Thank you for replying. When would you give your approval to use img and only img? Or do I misunderstand and that is still fine from your point of view?

image-set() has been prefixed in Chrome for eight years

What’s the holdup on the support for image-set()?! The @media solution works (I’m using it on a high-volume site) but it’s clunky and verbose.

We ended up with a Sass mixin for it. The basic idea is checking for @support for image-set() and falling back to media queries.

I try to make the point many times in the article that automation is vitally important here. I would never advocate that you author this by hand every time. Personally, I hardly ever do that. I’m always looking for ways to abstract and automate it. Quote from the article:

I’d highly recommend automating and abstracting as much of this away as possible.

But I also advocate for understanding how it works. This article is about understanding how it works and having a reference to check against when you need to check the syntax and understand what is happening.

I think it’s worth knowing all this syntax so that we can build our own abstractions, or check in on the abstractions we’re using to make sure they are doing things correctly.

I like the guidelines from Jen Meiert for example. Then you can still use img. Of course! When it makes sense. Why are perspectives like this missing? I think this guide here is fine but it’s not complete if all it says is use more HTML.

If ultimate payload differences are insignificant, just use img.

If payload differences are moderate or if no tooling is available, use img@srcet.

If payload differences are large and tooling is available, use picture and source along with alternative image formats (like WebP) to achieve maximum performance.