Thoughts

"The trouble with having an open mind, of course, is that people will insist on coming along and trying to put things in it."
Terry Pratchet, Diggers

Using the HTML picture tag for swapping images

LinkedIn Pinterest

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*.

Rizal Farok | BlueSky Perth Custom Web + App Development
Rizal Farok
1 month ago
design UI/UX CSS/HTML

Recent thoughts