Responsive Images Community Group logo

Demos Simple crop

Nymphenburg Castle in Munich during sunset

Rotate/resize the window the image change. Large images incur unnecessary download and processing time, slowing the experience for users. To solve this problem, the picture element allows you to provide multiple sources of the same image at different resolutions so the browser can pick the image of the correct size based on the viewport size.

HTML

<picture> <source media="print" srcset="landscape_print.jpg"> <source media="(max-width: 480px)" srcset="landscape_small.jpg"> <source media="(max-width: 640px)" srcset="landscape_medium.jpg"> <source media="(max-width: 1024px)" srcset="landscape_large.jpg"> <img src="landscape_large.jpg" alt="Nymphenburg Castle in Munich during sunset"> </picture>

Credits

Author: Anselm Hannemann / @helloanselm