The picture element allows us to display different pictures for
different devices or screen sizes.
The < picture> element contains a number of < source>
elements, each referring to different image sources. This way the
browser can choose the image that best fits the current view and/or device.
Resize the browser to see different versions of the picture loading at
different viewport sizes. The browser looks for the first source element
where the media query matches the user's current viewport width, and
fetches the image specified in the srcset attribute.
Each < source> element have attributes describing when their
image is the most suitable.
< picture>
< source media="(min-width: 650px)" srcset="picture1.jpg">
< source media="(min-width: 465px)" srcset="picture2.jpg">
< img src="picture3.jpg">
< /picture>
The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support
the picture element, or if none of the source tags matched.
