5% |
10% |
15% |
20% |
25% |
30% |
35% |
40% |
45% |
50% |
55% |
60% |
65% |
70% |
75% |
80% |
85% |
90% |
95% |
5% |
10% |
15% |
20% |
25% |
30% |
35% |
40% |
45% |
50% |
55% |
60% |
65% |
70% |
75% |
80% |
85% |
90% |
95% |
I have been thinking about providing double-resolution images on the web for optimal iPad display. Unfortunately, with great resolution comes great bandwidth! If you are serving an image that is twice as big, that's four times as many pixels. Bandwidth hasn't kept up with Moore's Law.
Apple uses high compression to keep their 1080p videos from being not much more bandwidth-hungry than the 720p versions.
Why not see if this applies to still images as well? Will our eyes tolerate higher compression on a retina display?
This page, designed for viewing on a new iPad, should allow you to experiment with some test images and different image compression settings. (The percentage numbers correspond to the fraction passed as NSImageCompressionFactor to Apple's -[NSBitmapImageRep representationUsingType:properties:] routine, if anybody wonders.)
Here are a few pictures of my own and from Flickr that ought to be a good variety for testing. Here are some aspects you could compare:
After playing with this, I hope you'll agree that you can get away with higher compression when you are serving a double-size, retina image. You don't want to compress so much that the 8-pixel-block artifacts are noticeable, but it seems like you can get away with a file that is maybe only a tiny bit bigger than the normal-size one, by using higher compression.
(In fact, you may find it interesting to try out this page on a non-retina display. Your browser will scale down a double-size image to fit its intended area. It may be comparable to the normal-size image, even if the double-size image is highly compressed. So maybe you can get away with providing a single, highly-compressed, double-size image, rather than trying to provide both a normal and double image! Try testing this with the images here by choosing a compression factor where the file size of the double-size image is about the same as its normal-size counterpart. By the way, the double-size image is a progressive JPEG in honor of Duncan Davidson's research.)
Unfortunately there is no perfect technical solution — yet — for responsively providing retina images to the new iPads, but normal-resolution images to everybody else. Nevertheless, this should be an interesting toolkit to experiment with.
Share and enjoy!
— Dan
You can download a mirror of the original page, with graphics, from http://www.karelia.com/retina/retina.zip