HTML picture tag

<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)

Try Yourself

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

Example 2 - <img> and <source> tag

Try Yourself

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

Try Yourself

We used the above example just for your understanding purpose only, so don't worry about javascript code for now.