HTML picture tag is used to give flexibility to the developer to define different images for different screen sizes. The picture tag uses a source tag to give screen sizes with image specification to show.
We can use multiple images to show for different screen sizes.
Syntax
|
1 2 3 4 5 6 7 |
<picture> <source media="put screen size1 here" srcset="put url of the image1 here"> <source media="put screen size2 here" srcset="put url of the image2 here"> <source media="put screen size2 here" srcset="put url of the image3 here"> ....... </picture> |
|
1 2 3 4 5 6 |
<picture> <source media="(max-width: 650px)" srcset="../images/nature.jpg"> <source media="(max-width: 850px)" srcset="../images/nature1.jpg"> <source media="(max-width: 1000px)" srcset="../images/nature2.jpg"> <img src="../images/nature3.jpg" alt="nature image" width="200" height="200"/> </picture> |
Output
Picture element is no longer be developed as a separate specification. See W3C Specification for this tag.
See W3C Development for this tag.