Why Retina Optimization Matters for Non-Retina Devices

Est. Reading Time: 3 minutes

Computers now have a wide range of screen widths, and to handle this we utilize responsive web design to serve up content in a variety of layouts depending on the screen size of the viewers computer or mobile device. One of our project managers has written a great article about the ins and outs of responsive web design here.

But, this isn’t the only thing we have to consider. Computers and devices now have a very wide array of screen pixel densities. Traditionally the desktop computer has a screen pixel density of 72 pixels per inch (this is a rough generalization, a lot of monitors actually have 100 or so ppi, but 72 ppi has been the standard pixel density we design for since what seems like the beginning of time). But things are a changing’, and now, with retina and HD devices, the pixels per inch can soar to well over 300. Check the Wiki data out here.

This means that your 72dpi (dpi and ppi can be used interchangeably – “dpi” usually referencing the graphics themselves since it’s a term from print design and “ppi” usually referencing the hardware) graphics can look bad on smaller devices for two reasons:

1) You have a device that has a very high number of pixels per inch, so the device’s browser has to fill in the missing pixels as best it can to bring that 72ppi image up to 300+ppi. A lot of crime scene investigation shows on TV like to show computers with image enhancement programs that pull pixels out of thin air to reveal the suspect crisply in the act, but I assure you, this is not how the world works. Pixelation is unavoidable.

2) Your responsive layout stretches an image wider than 100% of their width at the smaller screen size to fill the width of the mobile screen. If your layout does this, you need to plan in advance and create those images to be larger than what your desktop layout needs, so that when you view your site on mobile, the image does not pixelate. This looks bad on even lower resolution mobile devices.

Virgina Tech’s Footer – Dektop View

Virgina Tech’s Footer – Mobile View

A good example of this can be seen above. In Virginia Tech’s mobile view of the footer, we can see pixelation of some of their graphics because they are stretched beyond their means. If this graphic had been optimized for Retina and created at 2x the size needed for a basic desktop view to accommodate screens with higher pixel densities, the image would have more of pixels to satisfy the needs of the mobile layout (technically since their mobile view stretches the image beyond twice their size and then for high pixel density screens you would need another 2x, really these images should be optimized by adding 2x the pixels from the size they are at the mobile view, and would need to be something like 4x optimized, but you get the point).

To sum things up, giving your graphics the necessary optimization will allow for more flexibilty in layouts and support a wide array of monitors and devices.