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.
<!DOCTYPE html>
<html>
<head>
<title>HTML picture Tag</title>
</head>
<body>
<picture>
<source media="(min-width: 700px)"
srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190825000042/geeks-221.png">
<source media="(min-width: 450px)"
srcset=
"https://media.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
alt="GFG"
style="width:auto;">
</picture>
</body>
</html>
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