DEV Community

Discussion on: 3 attributes your images must have!

Collapse
 
jordanfinners profile image
Jordan Finneran

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

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

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