DEV Community

loading...

Discussion on: 3 attributes your images must have!

Collapse
z2lai profile image
z2lai • Edited

The lazy loading feature is the best attribute ever for images. A simple responsive image solution is to combine loading="lazy" with CSS media queries to set display: none on image elements based on screen size. This allows you to tell the end user client you whether or not the image should be requested (for <img> tags) based on screen size. The standard way of doing this would be to use the srcset attribute or the <picture> tag but I found this solution to be much simpler and just as effective.

As for the decoding attribute, am I right to assume that it doesn't do much if we set loading="lazy"? Since everything else would already be loaded in this case, it won't matter whether the image is decoded synchronously or asynchronously right?

Collapse
jordanfinners profile image
Jordan Finneran Author

I'd still add the decoding attribute for browsers that don't support loading=lazy and you might still get performance improvements for large images.

I think a nicer way to do your responsive image solution would be to set the images as sources inside a picture element like this example as then you don't have to have all the media queries in your styles, they can be in the picture html. It's also then using the inbuild browser functions.

Collapse
z2lai profile image
z2lai

Please correct me if I'm wrong, but the limitation with using the <picture> element is that you can only tell it what image to use, you can't tell it to not load any images at all. One hack would be to tell it to load a 1kb image (using some data URI) if you you're not intending to display the image on smaller screen sizes. But that is still a hack/workaround rather than intended functionality.

You make a good point about the limitation of loading="lazy" not being supported for all browsers though.

Thread Thread
jordanfinners profile image
Jordan Finneran Author

If you are setting display none on the picture if you don't want to see it then it won't load the image, which allows you to do everything you need

Thread Thread
z2lai profile image
z2lai

When I mean load, I mean that the client sends a network request to download the image from the server. display: none hides the image after the client has already downloaded the image, which isn't good for mobile-design as it wastes bandwidth if users are on data instead of Wifi.

Thread Thread
jordanfinners profile image
Jordan Finneran Author

Most browsers will see the image isn't displayed and not load the image, especially with the attributes mentioned. Is my understanding.

Forem Open with the Forem app