HTML <picture> Tag

The HTML <picture> tag provides flexibility for defining image resources, ideal for responsive designs and art direction. It includes multiple <source> tags for different media queries and an <img> tag as a fallback to ensure compatibility with browsers that don't support the <picture> element or if no <source> tags match.

The <picture> tag works similarly to <video> and <audio> by using the first matching source based on the specified conditions.

Note: The <picture> tag in HTML supports both Global Attributes and Event Attributes, enhancing its functionality and interactivity.

Syntax:

<picture>
 Image and source tag
<picture>

Example: Responsive Design with <picture> Tag

In this example we are using the <picture> tag with multiple <source> elements for responsive design, providing different image sources based on viewport width, and includes inline CSS for styling.

Output:

The HTML <picture> tag is a powerful tool for responsive web design, enabling developers to specify multiple image sources and load the most suitable one based on media queries. By using the <picture> tag along with <source> and <img> elements, you can ensure that images are displayed optimally across different devices and screen sizes. The support for Global and Event Attributes further enhances its functionality and interactivity.

Supported Browsers:

• Google Chrome: Version 38 and later
• Firefox: Version 33 and later
• Microsoft Edge: Version 13 and later
• Opera: Version 25 and later
• Safari: Version 9 and later