Contents
Intro
Images
Background Images
Summary
Intro
They say a picture tells a thousand words. It certainly cos...
For further actions, you may consider blocking this person and/or reporting abuse
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 setdisplay: noneon 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 thesrcsetattribute 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?
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.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.
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
When I mean load, I mean that the client sends a network request to download the image from the server.
display: nonehides 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.Most browsers will see the image isn't displayed and not load the image, especially with the attributes mentioned. Is my understanding.
My opinion is using an image as a background is OK, if the purpose is purely decorative, like a pattern. Even then, there might be a way to convert the image into SVG or use a CSS pattern, which would reduce bandwidth, depending on the image. I guess if using an image as a background is absolutely necessary, it's probably possible to include a caption to explain what the image is about.
I find that using alt tags is really helpful also when testing a site, and seeing an image didn't get uploaded. The alt tag helps me know which image it is, rather than hunting down a random image out of hundreds.
And I did not know lazy loading was an attribute for images, but now I will try it out!
Add also width and height so that your images don't become lines in first load until your css determined their size.
This is old school shtuf
Yesss, I'm hoping folk are already sizing their images 🙈
Old School is often the best! :D
Thank you for the informative post! Bookmarked, and I have a free hour tomorrow that I'll spend making my portfolio images better.
Bookmarked 😀
good to know
Very useful 🙏