If your web application takes more than 3 seconds to load, you will soon get a call from the the latency police to explain yourself. Users expect snappy applications otherwise they will move on to the next website with better user experience. For businesses, you can not overstate the importance of fast applications as this could be the difference between success and failure. One of the reasons most web pages take a long time to load is the amount of requests made by the browser and the size of the files that need to be pre-loaded. Reducing the amount of requests, is at the core of improving user experience.
Recently in my day job, I was assigned a task of creating a prototype to demonstrate responsive images. Fishing rod in hand I headed off fishing for some new techniques. There is no shortage of server and client side techniques but I settled for PictureFill.
What is PictureFill?
How does it work?
Implementation – Some code please!
Head off to the Github code repository and download the code files. The code is very well documented and includes examples. I will nonetheless give a quick run down on the html markup.
PictureFill HTML markup
<picture data-picture data-alt="big pebbles"> <source data-src="img/pebbles_small.jpg"> <source data-src="img/pebbles_medium.jpg" data-media="(min-width: 400px)"> <source data-src="img/pebbles_large.jpg" data-media="(min-width: 800px)"> <source data-src="img/pebbles_extralarge.jpg" data-media="(min-width: 1000px)"> <!-- Fallback if no JS --> <noscript> <img src="img/small.jpg" alt="big pebbles"> </noscript> </picture>
In the snippet above, I use the
picture element to nest all the various image sources using, well the
source element. Note that I also specify the screen resolutions using media queries passed as values for the
data-media attribute. The beauty here is the ability to cater for as many screen resolutions as you want.
Well as usually, IE demands special treatment. Using IE conditional comments we can provide a one-size-for-all image for IE8 and below as Media Queries are not supported here. For example if I wanted to serve the medium image to IE8 and below, I can nest the following inside the picture element:
<!–[if (lt IE 9) & (!IEMobile)]>
If you are understandably apprehensive about using the
picture element as it’s still in draft status with the w3c, you can replace the
source tags with the
picture instances with
div. My take on standards is that; they do not really mean that much if the browsers do not implement the module in question. After all users are not concerned about whether the your code is legal or not. That’s not to say that we should totally disregard semantics and standards. Word is that a few browsers have began implementing the picture/source model.
To many this might seem a very involved workaround to a problem that does not yet have a standardized solution, but until a fix comes along, this is a semantic workaround for the purist. As I mentioned earlier, there is no shortage of polyfills and workarounds in the web dev community, but this by far gets my vote.