HTML5 <picture> Tag
Topic: HTML5 Tags ReferencePrev|Next
Description
The <picture> element is used for art direction in responsive designs.
The <picture> element contains zero or more <source> elements and one <img> element to show different versions of an image depending on the device screen sizes.
The following table summarizes the usages context and the version history of this tag.
| Placement: | Inline |
|---|---|
| Content: | Zero or more <source> elements, followed by one <img> element |
| Start/End Tag: | Start tag: required, End tag: required |
| Version: | New in HTML5 |
Syntax
The basic syntax of the <picture> tag is given with:
<picture>
<img src="URL" alt="text">
</picture>
<img src="URL" alt="text">
</picture>
The example below shows the <picture> tag in action.
Example
Try this code »<picture>
<source media="(min-width: 1024px)" srcset="images/banner-large.png">
<source media="(max-width: 768px)" srcset="images/banner-small.png">
<img src="images/banner.png" alt="Banner">
</picture>Tag-Specific Attributes
The <picture> tag doesn't have any specific attribute.
Global Attributes
Like all other HTML tags, the <picture> tag supports the global attributes in HTML5.
Event Attributes
The <picture> tag also supports the event attributes in HTML5.
Browser Compatibility
The <picture> tag is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: HTML Images.
