Blog

Thoughts on the pixel problem

By Alli Price | 16th March 2012

Since the iPad 3/New iPad was announced, there has been a swirl of questions, which actually boil down to just one – 'how are we going to cater to this?'.

It's a real problem – do I want to, or should I, be serving up images at double the size for pixel-dense displays?

The first thing to ask yourself is, what's the most important thing to your visitors? If it's speed then this throws doubling your images (at least) in file-size right out the window. @brad_frost in his post makes this point: just because we can serve this, and the device fits (has a good enough pixel density) doesn't mean that the user would actually want this. This fits in quite nicely with what Luke Wroblewski outlines in Mobile First, users want what they want, fast – connection speed is a clear constraint and one that applies to the desktop too.

This is the first segment; we can try and cater to them by figuring out things like connection speed and even if we want to, processor power, but there is no perfect, reliable solution (that I'm aware of) for delivering double resolution images quickly to only users on decent connections.

The next segment will be users who want the best experience hands down, to be blown away. These are the people who are excited by the technology and want from the most from anything they view on their device. These people aren't new, they've got iPhones with retina displays and a slew of Android devices with Super AMOLED displays. What's odd is that we've got the first wave of dense display devices, but behind the iPad we might see the big push.

Whilst it's weak, the answer is, as usual, common sense. Only serve up images doubled where they're going to be most effective, improve a user's experience and add value to it.

I don't doubt that detection for connection speed will be improved by someone really smart, but right now it's about striking the balance between fast and impressive. This is by no means a new challenge to us as developers/designers. We choose to optimise images before exporting them from Photoshop, or to use a minified JavaScript file. It's down to us to be smart and deliver smart solutions; the end user won't care about anything except the end result.

Instead of seeing higher density displays as a threat to web, we'll see innovation. We'd rather have the choice to deliver higher res content, than not have the option at all.

The road ahead

I'm a firm believer that resolution independence is the best way to adapt. Let's face it, Apple will no doubt supply a fair slice of the high resolution devices out there, but there's a massive number of resolutions we could cater for.

Resolution independence will let us shrug off the doubling, tripling or quadrupling of our images further down the line. But right now it's not especially easy. I'm putting my stock in SVG + CSS3 as a solution, which is improving but not quite there yet.

Smashing have done an excellent article on resolution independence:
http://coding.smashingmagazine.com/2012/01/16/resolution-independence-wi...
Not only that but @brad_frost has done a post on the different techniques for hi-res:
http://bradfrostweb.com/blog/mobile/hi-res-optimization/

Finally I'd recommend that you check out Scott Jehl's proposed solution for the <picture></picture> element:
http://www.w3.org/community/respimg/2012/03/15/polyfilling-picture-witho...
http://scottjehl.com/picturefill/
https://github.com/scottjehl/picturefill

Exciting times!

Add new comment