Use of the Picture Element allows the browser to select a single optimum image to download and display from among a list which may be composed of different filetypes and sizes. The wide support available for the picture element allows us to easily construct browser agnostic responsive image display pages
The specific example presented here is a web comic book which is fairly image intensive. The example uses the picture element to provide a selection from among three popular filetypes, those being the AVIF, WEBP, and JPG image formats. Each of these filetypes is presented in a range of five dimensions, thus giving the browser a choice from among fifteen separate images. The browser will select the first entry in the images list that satisfies its determinations of acceptability.
This screen shows the Picture Element <picture> code for one of the demo example images. In our demo each picture element is followed by a blank line separator as shown here.
Inside the picture element is a list of source elements each of which reflects a possible choice of an image for the browser to select. The source element is a void element, which is to say that it does not have a closing tag, there is no </source> tag. Instead the source element acts more to provide a link to a resource identified by the srcset attribute’s content, an image filename.
In our example each source element also has two additional attributes. One attribute is labeled media and its content represents a media query for the viewport dimensions most suited for the srcset specified image. The second attribute is labeled type and its content represents the MIME type of the srcset image. If a browser does not support a particular MIME type, that source item will be ignored. For example, at this time the Microsoft Edge browser does not support the AVIF MIME type and that browser simply ignores the AVIF file choices.
The last entry in the picture element’s content is an img element nominally designated as a fallback element if none of the listed source images is acceptable. Besides the src attribute pointer to the image file this img element has an alt attribute for alternate text for the image and a tabindex attribute which allows a user to easily navigate between images using the TAB key.
As for the magic numbers that were chosen for sizes, initially I made 3 image sizes for width breakpoints. That worked well enough to prompt the addition of two more srcset sizes and a readjustment of the breakpoints and sizes to get more granularity. These values are based upon the Bootstrap breakpoint choices.
- breakpoint names X- Small Small Medium Large X- Large XX- Large
- breakpoints <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
- container 100% 540px 720px 960px 1140px 1320px
- image sizes 576px 768px 992px 1200px 1400px
But the Chrome Debug screen of the loaded HTML shows some differences between the source code for the img element shown above and what the browser gets which is shown here.
When the browser scans the list of sources and selects one it thinks best it will assign that srcset value to the variable this.currentSrc as shown in this Debug capture.
Note that this image is the one the browser chose from the offered list, it is the one the browser thinks best. Given that the image has a fixed dimension to cover a range of viewport sizes it is likely the image might not be a perfect fit and some adjustment could be of benefit. The example demo uses JavaScript to scale the browser chosen image to the viewport dimensions and these values, that is the image dimensions scaled to the viewport dimensions, are saved as shown here. There are some other uses we get from the JavaScript
On this desktop computer the Chrome Debugger says the demo comic, 42 images, consumes 2.5MB of resources with 56 requests and 2.1MB transferred, and finishes in 1.22 s. You can view the demo comic at Hyenas2. Keep an eye on my GitHub repos for a drop of the codebase for the app that generated the comic. And you can find more comics on my comics page.
As always comments, criticisms, and suggestions are welcome