HTML Picture Element
The <picture> element serves different images for different screens.
Inside <picture>, each <source> offers an image for a given condition and a final <img> is the fallback. The browser picks the first source that matches.
Responsive image
<!DOCTYPE html>
<html>
<body>
<picture>
<source media="(max-width:600px)" srcset="small.jpg">
<img src="large.jpg" alt="A scene">
</picture>
</body>
</html>
