Barry Pollard avatar Barry Pollard

What does the image decoding attribute actually do?

Screenshot of “What does the image decoding attribute actually do?”

https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/

So use it on your <img> elements if you want. It's maybe good that image components for libraries use this, or that platforms like WordPress set it by default but if you haven't used it on your site (like I haven't on this blog), then don't expect it to magically speed up your images to a noticeable degree. Other attributes like loading=lazy (on offscreen images only please!), and fetchpriority=high (on important images only!) will have a much larger impact. As will ensuring your images are not so big that decoding times become a problem. So prioritise those first before worrying about this micro-optimisation.

  5. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?