The <picture> tag in HTML is a semantic element that is used to define multiple source images for a single content. The <picture> element is used to specify multiple sources for an image, allowing the browser to choose the most appropriate source based on the user’s device and screen size. This allows you to display images that are optimized for different devices, without having to rely on JavaScript or CSS media queries.
Here’s an example of how you might use the <picture> tag:
<picture >
< source srcset="large.jpg" media="(min-width: 800px)">
< source srcset="small.jpg" media="(max-width: 799px)">
< img src="small.jpg" alt="A picture">
</ picture >
In this example, the < source > elements define different sources for the image, based on the screen size of the user’s device. If the screen is at least 800 pixels wide, the browser will choose the large.jpg image, while if the screen is smaller than 800 pixels, it will choose the small.jpg image. The <img> element is used as a fallback for browsers that do not support the <picture> element.
hope you understand the basic concepts and use of Picture Tag in HTML
Source: AO Interaction Channel