A weird bug in Mobile Safari means that your iPad might refuse to show you hi-res images on your new Retina Display, instead scaling them down and making them look just as bad as they would if they were low resolution to begin with. Weirdly, this issue only affects JPGs, and then only certain JPGs. What’s going on?
Photographer Duncan Davidson was retina-izing some photographs and realized that they were looking worse than smaller photos. Being a geek, he started digging around to find out why, and came up with this explanation:
Images larger than 1775 pixels wide (or 1180 pixels high) get down-sampled by Webkit. Up to that number and you’re ok. Hit 1776, though, and your pictures are scaled down. PNGs are fine, and so too — oddly — are the retina-ized images on Apple’s site.
The solution, it turns out, is to use progressive JPGs. Remember when we used to use these? A progressive JPG downloads successively higher-res images and displays them. Thus, you get a blocky but complete image, which is then filled in as more data is received. Use a progressive JPG and Webkit will have no problem displaying it.
This is a surprisingly smart solution to the problem of serving images for different-sized displays, but I have a question: does anyone know if these progressive JPGs can stop part way through? That is, can a regular iPad only load the amount of detail it is capable of displaying?
Read more of the technical details, as well as the results of the experiment, over at Duncan’s blog.
