<picture> tag in HTML
The <picture> tag is used to provide native support for responsive images in HTML5.
When used together with <img> tag and <source> tag it acts as an image that will be loaded differently depending on the devices it's displayed on.
In the below example, it displays the images depending on the screen size
If the screen size is between 700px to 1300px, it displays green.jpg.
If the screen size is between 1301px to 1500px, it displays blue.jpg.
If the screen size is not with in the given options, it displays red.jpg.
You can adjust the screen size(press ctrl + scroll up/down) to see the difference
In the below example we have added a little bit of javascript code for displaying the screen size, for understanding purpose.
Example 3 - Using JavaScript Note : Press ctrl + mouse weel up/down to see the image change
We used the above example just for your understanding purpose only, so don't worry about javascript code for now.