Reset password:

Retina Displays are Tricky For Publishers

We now have print quality screens and, as such, we also have print quality measurements. The pixel perfect layouts of the past are now working against us.

Written by on July 4, 2012

As we all know, Apple's Retina displays are now in all their devices. It's in the iPhone, in the iPad, and now also in laptops with the Retina display version of the MacBook Pro. This is very exciting for me as a user, but as a publisher it's a bit problematic.

A while back I tweeted I had no plans for updating the graphics on my site to support Retina displays, but as more devices feature high-res screens I might not have a choice anymore.

For the people who already have a Retina display, the result is downright ugly. Just look at the text vs image quality in this screenshots. Compare the text in the article with the text in the graph. That's a big difference.

There are three very big problems with Retina displays for publishers:

  1. Technical
  2. Speed
  3. Cost

Technical implementation

The technical implementation is complicated, and you can find a ton of articles about it. Here is one by Scott Hanselman. I won't go into the details of the technical side of it (see the link), but the problem is that Retina displays work by doubling the pixel density. If you define a box being 100px, it is actually displayed at 200px.

This is incredibly annoying and it's the wrong way to solve the problem. It's like building a car with horses in front of it. Please let us, as publishers, define if something should be upscaled or not.

If I'm going to support Retina displays, I want to do it natively and not as an upscaled version of the old way of doing things. In the old days we lived by the pixel, but in the Retina world that 'model' no longer makes sense. Instead, with Retina displays it makes much more sense to render things like we did with print - using centimeters or inches.

As long as we are confined to pixels, we have this nightmare of having to figure out what kind of text size 14px is on different devices with different screens. It made sense back when everyone had 14" screens, but in today's world with 7", 9.4", 10", 13", 15", 17", 24", 30", and 60" screens, pixels make no sense whatsoever. And combined with Retina displays, where the pixel are suddenly doubled but not in relation to the screen size, it's just a mess.

It's great that we are solving the problem with low screen resolution, but the way we are solving it technically is a workaround in the wrong direction.

In print, everything makes sense. You know that 5 cm is exactly 5 cm no matter how big a paper it is printed on. It doesn't matter what the ppi is, it will be exactly 5 cm. If we could then combine the print way of doing things, with a responsive design using media queries, then we have a real winner.

Wait-a-minute, you say, using centimeters and inches online is crap because it makes things blurry, and you are right...if you look at it on old screens. But that was because the displays of the past were 72ppi and as such you had to make your graphics pixel perfect.

We now have print quality screens and, as such, we also have print quality measurements. The pixel perfect layout is now working against us (it's a limitation of the poor quality of the past). We need to move away from it. Let us set our design free by giving us the means to define our graphics and pictures at a consistent size across devices - in centimeters and inches.

Speed

The next problem is speed. Retina displays have four times the pixels, meaning every picture has to be four times as big.

This is a bit of a problem because we all know how disastrous an effect a slow loading web page has on conversions. A few examples:

  • For every 100ms increase in load time of Amazon.com decreased sales by 1% (Kohavi and Longbotham 2007).
  • Google discovered that a change from loading a 10-result page in 0.4 seconds to a 30-result page loading in 0.9 seconds decreased traffic and ad revenues by 20% (Linden 2006).
  • Google found that an extra 500ms in loading time resulted in 20% drop in traffic.
  • Yahoo found that a 400ms slower page would see 5-9% more people leave before the page finished loading.

Arguably these studies are all more than 5 years old, but I haven't seen any indication that things have changed. In fact, one might say that because of slow mobile connections, speed is even more important today than what it was in 2007.

What kind of speed difference are we looking at? Well, I compared six of my articles with and without Retina optimized graphics and photos.

The average size of a Plus article today is around 5 to 6 megabytes, because I use many illustrations to tell my stories. Meaning with Retina optimized graphics, the average size will be around 14 megabytes...per article!

Imagine having to download that on your iPad over a 3G connection? It would take about 4 minutes. That is a long time to wait. With 4G things do get a lot better, because then it only takes 1 minute and 40 seconds.

It's not exactly speedy.

I can do a number thing to fix this. I can optimize the pictures to much greater degree than in the past, because imperfections in the picture quality, which were clearly visible on low-res screens, cannot be seen at high-res.

Secondly, since browsers render the page before they load the images, people can start reading the article before it has finished loaded. I just have to make sure I don't have anything in place that prevent it - like javascript calls at the end of the page that aren't loading asynchronously.

If we instead compare some of the other sites out there, we see the same pattern:

The New York Times, using Retina optimized photos, will be 4MB just for the front page. Pinterest is even worse. Using Retina optimized graphics, the front page is 10MB in size!

Cost

The cost is of course a much bigger problem. It can have an impact on you in two different ways.

First is the cost of lost traffic. Remember the study showing Yahoo lost 5% of it's traffic when the page loaded 400ms slower? Here we are talking about a page loading several seconds (even minutes) slower.

I don't know exactly how bad this would be, but I'm not sure I want to test it. It's scary!

Then we have cost in bandwidth. For small sites you might say that it doesn't matter because your hosting provider offers you unlimited bandwidth. But if you are a big publisher, or worse a startup, you are probably hosting your image files in the cloud - and thus, you pay per gigabyte.

I am hosting this site on a Rackspace cloud server, and my bandwidth cost is fairly low - around $18 per month. With Retina optimized graphics the cost would instead be $62 per month. It's not going to break the bank, but still.

But if you are a big publisher like the New York Times, we are talking about a huge increase in bandwidth costs. Worse yet is when you are a startup like Pinterest ...or what about Flickr? Imagine Flickr's bandwidth cost when they start to use Retina optimized photos by default. The standard size of a Flickr image will increase from around 375kb to 1.4mb.

That's a lot of bandwidth just to show one image.

Another thing is the storage cost. For big publishers, you will need a lot of space to store images four times their current size.

Of course, there is also the cost to my readers. For instance, with AT&T you have a monthly limit of 5GB, and AT&T claims that 1GB is the same as 5,700 web pages.

Well, not if you are on this site ...and especially not using Retina optimized graphics. If I optimized all my articles, you would reach 1GB after just 73 articles.

The ISPs simply aren't ready for Retina displays yet. We don't have the speed, nor the bandwidth to use it freely.

The future is in high-resolution

I absolutely love the idea of the high-resolution world of Retina display. I used to work with marketing people, and they didn't like digital because it was low resolution. I have stopped counting how many times I have heard graphic designers claiming it was better to print something out (in 300 dpi) than to look at it on a screen in 72 dpi.

And they where right. In the past, digital screen quality sucked compared to print. But now, with Retina quality displays, digital and print is the same thing. There is no longer any graphic reason to stay with print. That means we can move faster into the digital world, and it means we can optimize our workflows because we no longer need a printer for proofing.

It's brilliant!

The problem is just that the implementation of Retina displays sucks. I don't like pixel doubling. I want the real thing so that I can create the best of the best. For instance, all the graphics (except the first screenshot) in this article are in Retina quality. Each picture is 1404 pixels wide!

This site is already optimized for Retina displays. I just don't use it yet :)

The pictures look extremely nice on a retina display, but it was not so fun making them. The tools we have are still defined by pixels, so I had to create a picture four times the size than what it was displayed at.

Here is what that looked like:

On the left, you see the size I made the graph in, and on the right you see the size of the graph inside this article. It's not a very usable way to work.

Give me centimeters or inches. Pixels don't work in a high-resolution multisize screen environment. I want to be able to create the graphics in the same size it is displayed at - regardless of the ppi it is outputted in later.

I suspect this will come at some point in the future, but the problem is that because Apple is now pixel doubling everything on the web by default, it's probably going to take a long time before we get the real thing. We are forced into a backward compatibility mode.

And in time we will also all have 4G. But until then, with 3G connections limited to 5GB per month, Retina optimized web sites is not possible.

As a publisher I'm stuck between the need to give people Retina quality graphics (and thus a better reading experience), and the need to keep the site as fast as possible - especially on smartphones and tablets.

For now, I'm opting for speed, but as smartphone and tablet usage increase (it's already at 40% on this site), I soon might be forced to update the graphics and thus make the site slower.

...oh and if you happened to read this article in an RSS reader, the huge Retina sized pictures probably messed up the page.

Share on

Thomas Baekdal

Thomas Baekdal

Founder of Baekdal, author, writer, strategic consultant, and new media advocate.

Follow    

Baekdal PLUS: Premium content that helps you make the right decisions, take the right actions, and focus on what really matters.

There is always more...