Demos Art direction
Rotate/resize the window the image change. The iPhone Safari web browser showing the RICG website.
Web developers often need to provide different versions of the same image in order to communicate effectively across the wide range of screen resolutions and pixel densities available on today's devices. If the screen is small and the image is scaled down, its details cannot be seen. Using "art direction" helps overcome this problem.
HTML
<picture>
<source media="(max-width: 30em)" src="img/iphone.jpg">
<source media="(min-width: 30em) and (max-width: 48em)" src="img/">
<source media="(min-width: 48em)" src="img/">
<!-- fallback img if picture is not supported -->
<img src="img/iphone.jpg">
<!-- providing alternate text -->
<p>The iPhone Safari web browser showing the RICG website.</p>
</picture>
Credits
Author: /
Image credits to and .