Last Updated on April 26, 2023 by Roshan Parihar
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.