The <picture> tag
Linguistically, there's not much difference between the words "image" and "picture." In the HTML world, it's a completely different ball game. The <picture>
element allows developers to specify multiple image sources so that the browser can choose the one that better fits the current view or device. To define which image is the most suitable in this or that case, we use a media
attribute. It sets image dimensions that are more proper for a specific screen or device.
One more difference between <img>
and <picture>
tags is that the <picture>
element requires a closing tag and is actually a "parent" for the <img>
tag.