Responsive image using picture element

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