HTML Picture Tags - Mobile friendly Images

Why is the picture element use in HTML

The <img> element contains the alt attribute incase the images fail to load , a text is displayed

The <picture> element has backup images incase a picture fails to load

Let's see an example

Only the first image is loaded - if loadable

The source element is used when you need to link or access multiple files, it is also used for HTML videos and audio elements

If both image fails to load there is no mini fail to load icon or no alt text

For this reason most website use the picture element to display images

The picture element has another great advantage

But this is part of CSS styling. The media attribute is used to choose which image or element to be displayed depending on the size of the viewport or screen

More will be discussed under CSS styling

The only problem with this is that some browsers don't support this HTML element, so it's better to stick with the simple <img> tag