HTML <picture> Tag

The HTML <img> tag allows web developers to specify image resources with flexibility. The <source> and <img> tags are part of the photo tag. The property value is configured to load the image better. The <img> tag is equivalent to the <video> and <audio> tags. After adding the various sources the first source that meets the priorities will be used.

The last child element of the image declaration block uses the img element. If none of the source tags match or if the browser does not support the element, the <img> element is used to provide backward compatibility.

The HTML element <picture> consists of zero or more <source> elements and one img element, for the purpose of providing separate copies of an image for different display/device conditions. Each child <source> element will be taken into account by the browser as it selects the most appropriate match. If the browser does not support the picture element, the URL of the src attribute of the img element is chosen if no match is found. The selected image is shown in the area where the img element would normally reside.

The user agent evaluates each source srcset media, and type attributes to determine which URL to load. It then chooses a compatible image that best suits the display device's current layout and capabilities.

The <img> element serves two purposes:

• It gives details on the display, size and other characteristics of the image.
• In the event that none of the available <source> components is able to provide a useful image, it provides a fallback.

Common use cases for <picture>:

• Directing the art of adjusting or cropping photographs to meet various media needs.
• To supply substitute image formats in situations where certain formats are not supported.
• By loading the most appropriate image for the viewer's display, you can reduce bandwidth usage and speed up page load times.

Supported Browsers