Responsive Images Community Group logo

Demos Art direction

The iPhone Safari web browser showing the RICG website.

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: 25em)" srcset="iphone.png"> <source media="(max-width: 48em)" srcset="iphone@tablet.png"> <img src="iphone.png" alt="The iPhone Safari web browser showing the RICG website."> </picture>

Credits

Author: Shane Hudson / @shanehudson

Image credits to PotatoesTomatoes.co.uk and Edd Greer.