Skip to content

Instantly share code, notes, and snippets.

@vasilisvg
Created July 16, 2012 18:32
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vasilisvg/3124198 to your computer and use it in GitHub Desktop.
Save vasilisvg/3124198 to your computer and use it in GitHub Desktop.
Acceptable Retina Images

#Retina images Sharpness is relative. We can only observe if something is really sharp if we can see it next to something that's sharper. Lots of people are looking for solutions for the problem that images look blurry on retina displays. All solutions I've seen so far give the advice to send an image that's twice as wide and twice as high to these new screens. Before you start sending these images, be sure to understand that these files will be four times the size of the smaller version. People with a high end device and a low end connection—everybody in the train in The Netherlands—will hate you.

##Image types I'm generalizing here, but there are two types of images: (1) graphics like logos and (2) photos. Quadroupled images might be justified for the first kind, for logos, icons, things like that. You could also try to find a solution in clever SVG files—with media queries in them, why not? These kinds of images are usually not the problem, they're not huge. The problem lies in photos, they get enormous when you increase their size.

##One and a half When the iPad with a retina display was released somebody showed an old iPad to people and told them it was a new one. Everybody was impressed with the incredible sharpness of the screen. And when I finaly laid my hands on a retina iPad I was a bit disappointed, yes, it was sharp but not as dramatic as I thought it would be. Only when I compared it to an old one next to it I clearly saw the difference.

Last night I was wondering if we really need to quadrouple images in size to get a tolerable result. Yes, a quadroupled image will definitely result in the sharpest possible solution but what if I increased the width and height both by one and a half, wouldn't that result in acceptable sharpness? File size is only doubled in this case, that's quite a difference. I created a simple test-page where you can look at it for yourself. You can see that bigger images do look better, but the question I'm asking is not "what's best?", but "when do they look good enough?" When there's no reference, when there's no sharper image next to it this solution might actually be what you're looking for. An even smaller picture could work too, I haven't really tested that.

##When I think that most photos on most web pages should not be optimized for retina screens at all, they are illustrative or even decorative: a slightly blurry illustration could very well be good enough. Some exceptional sites, like Flickr, 500px or personal portfolios might consider serving quadroupled images, on sites like that the image is the content and important content should be enhanced if possible. There are sites with pictures somewhere in between these two extremes, they might be well served by this Dutch Polder solution.

Choosing what kind of image you serve is a conflict between visual performance and speedy performance. Both should be considered before choosing the right solution, some sites need more speed, for other sites good looks are more important. Choose wisely.

##Warning Be sure to only serve one-and-a-half-images to retina displays! On old displays these pictures will actually look more blurry: every third pixel must be removed somehow, you can imagine that this will probably not result in a sharper image.

@radex
Copy link

radex commented Jul 21, 2012

Well, I'm from Poland, so I don't think are better over here. And yet, to my best knowledge, 3G networks here aren't that bad. (at least where I live, in a 200k city)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment