HTML <picture> Tag

The <picture> element in HTML is a container used to provide multiple sources for an image, allowing the browser to choose the most appropriate one based on factors like screen size, resolution, or format support. It is part of the responsive images feature in HTML5 and is especially useful for optimizing performance and delivering the best visual experience across different devices.

Unlike a standard <img> element, which displays a single image file, <picture> allows developers to define several <source> elements within it. Each <source> element can specify a different image file and media query conditions, enabling scenarios such as loading smaller images for mobile devices, higher-resolution images for retina displays, or modern formats like WebP when supported.

The <picture> element always contains an <img> element as its last child. This <img> serves as a fallback if none of the specified <source> elements match the current device conditions or if the browser does not support the <picture> element. This ensures backward compatibility while providing enhanced functionality for capable browsers.