The picture element - and bandwidth

I had an interesting conversation with +dan entous in the office yesterday about targetting devices in the future. When you see something like this (http://nmsdvid.com/snippets/), then it is clear that we should not target specific devices - yes, nothing new here - I think we had already established that we should be creating breakpoints for the content, rather than for the device.

However, targeting device-width (http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml) is not a one-stop-fix for everything, you can detect a small screen device with retina, and provide media queries for sure... but you can't detect a small screen device with retina, a flaky 3G connection and bad latency...

I then (out of personal interest), decided to look at how I'd tackle an issue such as a carousel. We've all used carousels in the past, you specify a few images, and away we go. The problem is that the image being served on your desktop and the image being served on your phone are the same image, if that is a 300kb image, then you are costing your mobile users unnecessary bandwidth... which I'm sure we'll agree is not good.

<picture> will handle some of these issues - (http://www.w3.org/community/respimg/) - and in my current mindset I would be going the yepnope.js route - if no javascript, deliver one image - if javascript, deliver the carousel.js and +Scott Jehl picturefill - (https://github.com/scottjehl/picturefill) to allow use of the <picture> element. I'd then create the large/medium/small images (or whatever is required).

EDIT - As +Jelmer Borst points out below, +Matt Wilcox (http://adaptive-images.com/) does solve the size issue too - which could be used instead of the picturefill polyfill I mention

All good (I think), but it still doesn't solve the issue of bandwidth / latency, if your iPhone is on a wi-fi connection, or a bad 3G connection on the train, then there is a difference in what should be delivered (or at least, the user should be able to select what fallback to do). I then saw Mat Marquis (@wilto) answering questions here - http://www.webmonkey.com/2012/11/preview-the-proposed-html-picture-element - so I asked:

"_I can see the real value in the use cases listed, but isn't the real problem more to do with bandwidth and latency, rather than deciding which image to call based on the device dimensions?_"

Fortunately, it seems that people are looking at this very issue, and Scott Gilbertson pointed me to these conversations:

http://www.webmonkey.com/2012/10/mobile-browser-bandwidth/
http://www.quirksmode.org/blog/archives/2012/11/principles_of_m.html
http://www.quirksmode.org/blog/archives/2012/10/measuring_conne_1.html

It makes for really interesting reading. It's going to be an interesting time ahead! Personally I think that bandwidth/latency is the biggest issue right now when it comes to #rwd
Shared publiclyView activity