<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.
Example 1 - <img> tag only (Always display)
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
Example 2 - <img> and <source> tag