DEV Community

loading...

Discussion on: 3 attributes your images must have!

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