HTML5 <picture> Element

HTML5 introduced the <picture> element, which lets you define more than one image ( desktop or mobile ).

The <picture> element works similar to the <video> and <audio> elements. You set up different sources, and the first source that fits the preferences is the one being used:

Example:

The srcset attribute is required, and defines the source of the image.

The media attribute is optional, and accepts the media queries you find in CSS @media rule.

You should also define an <img> element for browsers that do not support the <picture> element.