Everybody loves pretty pictures. Retina display can make your pictures pop. But for everything there is a cost. What does retina cost you?
As I covered in my earlier post on Device Independent Pixel Formula For Mobile Devices, the term retina display is just a buzzword Apple created to refer to any device that was 300 DPI or greater. It is not exclusive to Apple devices. There are already many smartphones that have achieved that standard. Heck, LG is working on a 400 DPI device. This means that a lot of mobile devices out there that can benefit from you updating your design to take advantage of the high DPI capabilities.
Retina Display: The Benefits
Font rendering is much smoother than your standard computer screen. It made a huge jump closer to print quality rendering. You can even switch your default font rendering from Helvetica to the slightly improved Helvetica Neue font and text will be seem more readable.
By creating an image at twice the display size you are packing more detail into a smaller space. Images will appear crisper, and beautiful.
Retina Display: The Costs
Your page load time will increase. By serving a larger image you are serving a higher file size to the user who will spend more of their bandwidth to download the file. On a mobile device this will be quite noticeable.
You will now need two versions of every file you would like to optimize. This will increase your disk usage and thus fill up the server faster, requiring a new server sooner.
Presently, the CSS media queries that are useful in responsive web design make it very simple to target background images that you would like to optimize. That’s all well and good, but what about images that are part of your content such as your logo? There is no good solution. What can you do:
- Pro: Easy to automate.
- Con: Modern web browsers will have already started to download the first image before you can detect if it is a retina quality device and replaced it.
- Server side detection:
- Pro: Only load one image.
- Con: Many large websites serve their static content through Content Delivery Networks (CDN). A CDN is a network of servers located across the globe that will serve the file from the closest server to a user. These servers are dumb and do not do server-side processing. Additionally, if a user saves the website on one device and transfers it to another they may see the wrong type of image.
- Just serve retina:
- Pro: No fuss
- Con: Wasted bandwidth, higher load time, and the higher quality images will actually seem worse on low DPI devices.
- Empty src element and CSS generated content:
- Pro: Only loads one image, works in WebKit browsers (Chrome, Safari, iOS browsers, most Android browsers, BlackBerry browsers), and Opera. This covers most mobile users
- Con: Does not work in Firefox nor IE, desktop or mobile versions (this is actually by design in Firefox). It fundamentally goes against everything web designers have advocated for years, and cannot be done inline so it requires extra configuration that is very clumsy.