Use of the 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 Picture Element 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 , , and 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. AVIF WEBP JPG This screen shows the Picture Element code for one of the demo example images. In our demo each picture element is followed by a blank line separator as shown here. <picture> Inside the picture element is a list of elements each of which reflects a possible choice of an image for the browser to select. The source element is a 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 attribute’s content, an image filename. source void srcset In our example each source element also has two additional attributes. One attribute is labeled and its content represents a media query for the viewport dimensions most suited for the specified image. The second attribute is labeled and its content represents the of the image. If a browser does not support a particular MIME type, that item will be ignored. For example, at this time the browser does not support the AVIF MIME type and that browser simply ignores the AVIF file choices. media srcset type MIME type srcset source Microsoft Edge The last entry in the picture element’s content is an element nominally designated as a fallback element if none of the listed source images is acceptable. Besides the attribute pointer to the image file this img element has an attribute for alternate text for the image and a attribute which allows a user to easily navigate between images using the key. img src alt tabindex TAB 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 as shown in this Debug capture. this.currentSrc 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 . Keep an eye on for a drop of the codebase for the app that generated the comic. And you can find more comics on . Hyenas2 my GitHub repos my comics page As always comments, criticisms, and suggestions are welcome

Fictitious Works Disclaimer Notice: If You Have to Use One, Use This One

IMAP Email Server on AWS

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Too Long; Didn't Read

Make resilience your competitive advantage

How to Get the Fastest Browser Image Loads

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Recollections of My Life: Part 3

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

Recollections of My Life: Part 3

3 Simple Ways to Optimize Your Images and Improve Core Web Vitals

5 Tips to Improve the Core Web Vitals of WordPress Websites

7 Ways to Achieve a Faster Core Web Vitals Score

8 Ways to Improve the CLS Score in Google’s Core Web Vitals

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps