A picture tag can be used when
we have a scenario, where we want to display
a different image depending
on certain conditions. Let's see some
situations when we can use the picture tag:
Screen width: Our webpage needs to load
on different screen sizes. When our user
views the webpage on a mobile, we should
show them a smaller image. Whereas when
they view our webpage on a large screen like
a desktop, we should show them a larger image.
This way, we can improve performance and
have a faster page render.
Art direction: A different version of the image can be used for landscape
and portrait mode.
Alternative image file format: Some file formats are not supported by old
browsers, so we could provide image in multiple formats.