What’s the big deal about retina display?

The trend is the real game changer here. Over the last two years we have all seen diversification of form factors (the size) of screens. There have been a few devices that have demanded consideration of pixels per inch (like web-over-tv) but for the most part, the rule of thumb of considering a screen from 72 to 100 pixels per inch was good enough for design work. Now with higher density displays like the iPad3 and macBook Pro w/ Retina, we are now seeing a trend where the screen size is staying the same but the density of the number of pixels in an inch is increasing.

Some of “Apple’s magic” will automatically multiply the size of your images so that they appear the same size on the screen but this process of up-scaling an image leads to problems like blur, alias jags and obvious distortions in images. One solution might be to include larger images at the right resolution but this can cause older lower resolution devices to now lug those giant files across the pipe to have to downsize them to make them viewable, which leads to a poor user experience on non-high density devices. Another solution would be to include media queries in the css files which detect the density and load an appropriate image. The benefit on user experience is that clients receive images suited for their device; however developers will find this requires additional work for each image. Also, image assets now need a standard and high resolution version. The last option would be to include the new HTML image-set tag which is not yet supported across browsers.

We will continue to see more devices with higher density screens. Designers and developers will need to improve methodologies in working with varying screen sizes, resolutions and pixel densities. Right now, the solution may be to have high and low density images prepared by your designer, but we will almost certainly see a server component created that allows storage of print-quality images which generates web-hd (high density) and web-ld (low-density) formats on-the-fly.

The big deal is that for the last 10 years, the design and processing of images for the web has been conceptually static. The trend towards higher density screens means technologists, designers and developers need to consider and plan for the size and density ranges customers may be viewing their images at if they want to control the quality.

Let me know what you think.


Kimler is a twenty year veteran of technology. He is a Studio lead at The Chronicle of Higher Education / philanthropy.com where he leads projects providing reusable innovations and front-end interactive code. He enjoys javascript, html, css, php, objective-c and a number of other programming languages.

Tagged with: , ,
Posted in Code