Scribd
Upload
12 views8 pages

Optimize Images with the Picture Element

The picture element in HTML allows for the display of different images based on device or screen size by using multiple source elements. It ensures that the browser selects the most appropriate image for the current view, with a fallback <img> element for unsupported browsers. This element is particularly useful for optimizing bandwidth and ensuring format support.

Uploaded by

Vikram Aadi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views8 pages

Optimize Images with the Picture Element

The picture element in HTML allows for the display of different images based on device or screen size by using multiple source elements. It ensures that the browser selects the most appropriate image for the current view, with a fallback <img> element for unsupported browsers. This element is particularly useful for optimizing bandwidth and ensuring format support.

Uploaded by

Vikram Aadi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

SureshTechs

HTML
Picture Element
Purpose
• The picture element allows us to display different pictures for
different devices or screen sizes.
Different sizes

Desktop
Mobile
<picture>
• The <picture> element contains a number of <source> elements, each
referring to different image sources.
• This way the browser can choose the image that best fits the current
view and/or device.

• <picture>
<source media="(min-width: 650px)" srcset="img_desk.jpg">
<source media="(min-width: 465px)" srcset="img_mob.jpg">
<img src="img_default.jpg">
</picture>
Note
• Always specify an <img> element as the last child element of the
<picture> element.
• The <img> element is used by browsers that do not support the
<picture> element, or if none of the <source> tags matched.
When to use the Picture Element
• 1. Bandwidth
• 2. Format Support
Thank you

You might also like