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 from 700px to 1300px, it displays green.jpg.
If the screen size is between from 1301px to 1500px, it displays blue.jpg.
If the screen size is not withing the given options, it displays red.jpg.
You can adjust the screen size(press ctrl + scroll up/down) to see the difference