HTML <picture> Tag
Description
The <picture>
HTML element is a container for storing several <source>
elements that support the <img>
element. This allows you to specify different images based on screen size, pixel density, image format and other parameters. Here are a few areas of application for the <picture>
tag:
1. for retina screens, you can display a larger image;
2. display drawings of different sizes for mobile and desktop devices;
3. display images of different proportions, taking into account the orientation of the device;
4. display the image in vector format SVG, and for browsers that do not support it, show PNG.
Properties
- Permitted Parents
- Any element that allows embedded content
- Content
- Zero or more
<source>
elements, followed by one<img>
element, optionally intermixed with script-supporting elements - Start/End Tags
- Start tag: required, End tag: required
Example
<picture>
<source srcset="images/color.svg">
<img src="images/color.png" width="256" height="256" alt="Color">
</picture>
Attributes
None
Global Attributes
The <tr>
tag also supports the Global Attributes in HTML5
Event Attributes
None
Browser Support
Desktop | |||||
X | 13 | 38 | 38 | 25 | 9.1 |
Tablets / Mobile | |||||
![]() |
|||||
38 | 38 | 38 | 25 | 9.3 | Yes |
Last updated by CSSPortal on: 6th December 2019
HTML Tags
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- blockquote
- body
- br
- button
- canvas
- caption
- cite
- code
- col
- colgroup
- comment
- datalist
- dd
- del
- details
- dfn
- dialog
- div
- dl
- doctype
- dt
- em
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- head
- header
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- keygen
- label
- legend
- li
- link
- map
- mark
- menu
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- progress
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- small
- source
- span
- strong
- style
- sub
- summary
- sup
- table
- tbody
- td
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- u
- ul
- var
- video
- wbr