What Is Element Picture and How!

We used to know img element for over decades and now we are going to have one more friend in our community regarding how we manage images on WEB. picture element is coming for better image manipulation and you would love to hear about how it becomes alive and why.

Responsive Web Design

It is all about responsive since we are having various devices with different displays, it became too hard to make one image responsive and looks consistent. We used to develop mobile only website back then and it was pain for us.

Then some curious folks started a community called Responsive Images Community Group (RICG) which is actively developed and proposed solutions ( ‘picture’ is one of them ) to Working Groups like WHATWG and W3C.

After a period of classism , picture is now in blink and gecko and thanks to the Community Groups and Organizations like RICG and Mozilla.

* Implement the picture element in Blink!

*(picture) Implement picture element

See It Action

picture element comes as a wrapper of img element in the final spec so that we can still fall back to the img and making clearance between the two elements.

If you are using Firefox , you need to set dom.image.picture.enabled true in about:config. And if you are using Google Chrome , enable [Enable experimental Web Platform features. Mac, Windows, Linux, Chrome OS, Android] under the chrome://flags.

Now you are ready to learn and make changes upon how you think to make your images responsive. Lets wrap a markup first.

image

Normally when you call a website, browser will firstly interpret the html and load the necessary resources like images, javascripts and media later. For now we are using viewport meta tag and media queries to make things responsive. But we still need to load a particular image which may sometimes be too large or small for a particular device than we expected.

Using picture element, we no longer need to think and make a single image responsive, instead we can have different images for different breakpoints. Yes the browser will only load the defined version and plus you can have cropped, scaled or whichever kind of images you like.

You can readily see some unfamiliar tags like source and srcset. srcset is also a new tag to imrpove and handle multiple URI for source element. You can read more about it here at WHATWG.

DEMO
SAMPLECODE

[ Refresh the page after you have adjusted your browser width or agent].

You are welcome to make test and practice with the elements as you desire.

Copyright © 2016 - Tin Aung Linn. Powered by Octopress