The picture element offers alternative versions of an image for different screen sizes or devices.
The source element specifies multiple media resources for the picture element. The media attribute is the media query condition, if this is met then the image from the srcset attribute will load. If the media query condition isn't met, then it will load the image from the img tag.
The picture element can be used to display smaller, cropped images on a smaller mobile screen and then the full sized images on a desktop screen when space allows. Loading smaller image file sizes on mobile devices helps to save bandwidth and increase the page load times.
The picture element can also be used to offer alternative image formats for different browser support.
More than one source can be used inside a picture element. Add a third image with a media condition to the picture elements below.