Skip to content

Instantly share code, notes, and snippets.

@vasilisvg
Created July 16, 2012 18:32
Show Gist options
  • 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.

@vasilisvg
Copy link
Author

Or 1.314, whatever is acceptable. I just picked a random number (-:

@radex
Copy link

radex commented Jul 21, 2012

"Before you start sending these images, be sure to understand that these files will be four times the size of the smaller version"

Unless you use .bmp to save your images, you couldn't be more wrong.

If it's JPEG, often times it won't be even twice as big. It depends on the image, but the fact that you're quadrupling pixel density means you can use stronger compression and it won't be noticed.

I didn't test how it looks with PNG, but I'm pretty sure it's not that bad.

@vasilisvg
Copy link
Author

You could well be right. But still I believe that you should consider performance and acceptable quality, and not just always use an image that's twice the size.

@radex
Copy link

radex commented Jul 21, 2012

Sure. It might depend on particular case (whether it's a photo or some computer graphics that's JPEG). And in case of PNG images quality suffers much more when you stretch it.

But it just seems to me that often times the image size difference is small enough that it just doesn't matter and it's not worth it to trade quality for a few saved bytes.

Especially that mobile internet gets faster and cheaper and soon enough high-DPI displays won't be only mobile's domain. There's no doubt that in the next few years there will be more and more notebook/desktop computers with 2x displays (like the new MBP) — and on "real" computers quality is more noticeable (smaller DPI) and network performance is far better.

@vasilisvg
Copy link
Author

Those mobile high speeds with unlimited bandwidth are non-existent in The Netherlands. And unfortunately things are not improving, they're actually getting worse. I do agree with you that we need reliable, fast connections, but we're definitely not there yet.

@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