image formats
Picture element
An HTML element that serves different image formats and crops to different browsers and screen sizes.
What is Picture element?
The HTML picture element is a container that wraps an img element with multiple source elements to serve optimal image formats and crops based on browser capabilities and viewport size. It solves two problems that a plain img element cannot handle: format fallback (serving AVIF to supporting browsers while falling back to JPEG for others) and art direction (serving different crops at different screen sizes).
Importance of Picture element
Without the picture element, your images load as JPEG files regardless of browser capabilities, missing potential file size savings of 25–50% from modern formats. The picture element enables you to adopt AVIF and WebP formats immediately while maintaining compatibility with older browsers, directly improving your site's loading speed and Core Web Vitals scores.
Picture element in Practice
A typical implementation starts with a source element for AVIF (type="image/avif"), followed by WebP (type="image/webp"), then the fallback img with a JPEG file. When a Chrome user visits your site, they receive the AVIF version at roughly 40% smaller file size than the JPEG. Safari users get the WebP version at about 25% smaller, while older browsers still load the JPEG without breaking.
Picture element Best Practices
- → Always include width and height attributes on the img element to prevent layout shift.
- → Order source elements from most compressed format (AVIF) to least compressed (WebP).
- → Add loading="lazy" to the img element for images below the fold.
- → Use media queries in source elements for art direction across different viewport sizes.
Example of Picture element
Related Terms
Frequently Asked Questions
What is the HTML picture element used for?
The HTML picture element is used to serve different image formats and crops to different browsers and screen sizes automatically. It enables format fallback (serving AVIF or WebP to supporting browsers while falling back to JPEG) and art direction (serving different image crops for mobile vs desktop). The browser selects the first source element whose conditions it can satisfy.
What is the difference between picture element and srcset?
The picture element gives explicit commands about which image source to use based on specific conditions, while srcset provides suggestions that let the browser choose. Use picture element for format fallbacks and art direction (serving different crops at different screen sizes). Use srcset for resolution switching when serving the same image at different sizes for different screen densities.
How does the picture element work with AVIF and WebP formats?
The picture element enables progressive format enhancement by listing source elements in order of preference—typically AVIF first, then WebP, then JPEG as the fallback. Browsers that support AVIF will load the AVIF version (40–50% smaller than JPEG), WebP-capable browsers get the WebP version (25–35% smaller), and all other browsers receive the JPEG. This happens automatically without breaking compatibility with older browsers.