Using the HTML picture tag for swapping images

LinkedIn Twitter Facebook

The <picture> tag is probably the easiest way to have an image "respond" to the screen size - displaying an image in its original dimension, but swap to an alternate or smaller dimension when in mobile, etc. example ..

View image

Using the HTML picture tag for swapping images | BlueSky Perth Custom Web + App Development


<picture>
<source srcset="img-640.jpg" media="(max-width:767px)">
<img src="img-1280.jpg" alt="" />
</picture>

But I just found out you can apparently use it to also swap images based on an OS's color scheme - dark vs light. I have personally not tried this trick yet, but this is a pretty cool tip!

via Mattia Astorino

PS. do take note of the <picture> browser compatibility before you use it for your client's websites - make sure their target or most visited audience uses a browser that supports the tag *coughs IE*.