Retina Display and Websites

   Update: the Sandvox people listened, and came out with a new update recently which gives you the option of building Retina-friendly websites. Just go to the Document Inspector and click on the Appearance tab. Under Scaled Images, click Optimize for Retina Displays. FWIW, I leave the Sharpening slider set two notches to the right of Off and the JPEG Quality slider set  notches to the left of Highest Quality. If there's any doubt, I'm ecstatic about this! Sandvox sites joined the ranks of the Retina-friendly sites as quickly as most of the big boys. Kudos, Sandvox!


   I just got my awesome new MacBook Pro with Retina Display yesterday, and it's going to change many things… not just for me, but for the Internet as a whole. The Retina Display, as you may know by now, has double the pixels in each direction, so that's four times as many pixels (2x2) on the screen. This means that each pixel is too small to see, so images tuned to Retina Display are pretty much indiscernible from reality for the first time in personal computer history.


   Problem is, if you're not yet tuned, your stuff can look really rough. Including every website out there right now. I'm working on a blog post for the Original Green Blog right now, and noticed how rough the images look on the Retina. Here's one of them. If you're looking at this on any other computer, it looks perfectly fine. But on a Retina, where the text and everything else around the picture looks so much smoother and crisper, the image looks downright ragged by comparison.


   So I thought "what if I double the resolution? What will it look like when I view it in a browser? Here's the same picture, except with double the resolution. If you're looking at this with any other computer, you won't see any difference between these two pictures. But if you're on a Retina machine, it's stunningly different. So what are the implications of all this?

   Errrrgh! I just published this to see how it looks, and the image below actually looks a bit worse! Here's why: Sandvox, which is my web publishing software, apparently compresses everything to 72 dpi, which was the old standard until now. The top image didn't need compression, so it left it alone, but when it compressed the bottom image, it did so a bit too vigorously, degrading it.

   I've asked the Sandvox people to fix this, and they're really responsive to their customers, so I expect they'll get it done soon. Once they do, I'll re-blog about all the important implications.

© 2012 The Guild Foundation Press