<figure> <img alt='Example of image.' class='lazyload' data-sizes='(min-width: 64em) 603px, (min-width: 48em) 768px, (min-width: 24em) 640px, 320px' data-srcset='/photos/nature8.jpg 1536w, /photos/nature6.jpg 1440w, /photos/nature12.jpg 1280w, /photos/nature7.jpg 768w, /photos/nature11.jpg 640w, /photos/nature9.jpg 603w, /photos/nature10.jpg 320w' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='> <noscript> <img sizes='(min-width: 64em) 603px, (min-width: 48em) 768px, (min-width: 24em) 640px, 320px' src='/photos/nature10.jpg' srcset='/photos/nature8.jpg 1536w, /photos/nature6.jpg 1440w, /photos/nature12.jpg 1280w, /photos/nature7.jpg 768w, /photos/nature11.jpg 640w, /photos/nature9.jpg 603w, /photos/nature10.jpg 320w'> </noscript> <figcaption> A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href='#'> Casey Black </a> </figcaption> </figure>
When looking at the above example we see the following attributes: class, data-sizes, data-scrset, src and alt.
Most of the images on the website are loaded with lazyload. This means we have a src attribute of a 1px gif image which is the same for all images. This means the DOM is loaded very fast. With the Lazyload JS we check if the image is in the viewport of the user. If that is the case we replace the 1px image with the right image.
No js fallback
You can see there is a large repetition of code inside the
data-srcset is the equilevant of the
srcset attribute, it is rewritten to work with lazyload. This attribute contains a grocery list of resources that the browser can pick from, and the w descriptors tell the browser each resource’s physical dimensions.
data-sizes is the equilevant of
sizes. It is comprised of value pairs, where the first (optional) value is a media condition (a media query without the media type) and the second value is a CSS length.
The browser goes over the media conditions and looks for the first one that matches the current environment (in most cases, “current environment” == current viewport). The second value of the pair (or the first one if the media condition is missing), is set as the pair’s “effective size”, and it describes the estimated display dimensions of the image.
This is the hint the developer has to give the browser in order for it to know which resource to pick.
The effective size of the matching pair is used by the browser, along with the screen’s DPR (and possibly other factors) to figure out which resource would be the best to download and display.