HTML Images Responsive image using picture element

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

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


Got any HTML Question?