Example
Code
<picture>
<source media="(min-width: 600px)" srcset="large_image.jpg">
<source media="(min-width: 450px)" srcset="small_image.jpg">
<img src="default_image.jpg" style="width:auto;">
</picture>
Usage
To display different images under different screen width, you must include all images using the source tag in a picture tag as shown in the above example.
Result
- On screens with screen width >600px, it shows large_image.jpg
- On screens with screen width >450px, it shows small_image.jpg
- On screens with other screen width, it shows default_image.jpg
