Last night a group of tweeps, including Steve Streza, collaborated with me to track down a limit in WebKit on the iPad when working with large JPEG files. After reverse engineering the limits and then later being pointed to the documentation about the limits, somebody suggested using a progressive JPEG file based on the observation that the large iPad hero image Apple uses is a progressive JPEG. I’ve not used progressive JPEGs in years, but following that suggestion, I gave it a shot. Lo and behold, it’s indeed the ticket to large JPEG joy on the iPad Retina display.
Want to see it in action? Open this page on a brand new iPad with a Retina display. Go ahead, I’ll wait here. You back? Good. Here’s a 900 pixel wide image of PostSecret creator Frank Warren I made at TED2012 in Long Beach a few weeks ago. Now, are you ready for this? And are you on your new iPad with a Retina display? OK. Rotate to landscape orientation and tap the image and wait for just a second or three or maybe a bit longer for the high res image to load from Amazon S3. It’s 432K and I have no idea what this will look like on cell networks that munge images to shrink ’em, so you might want do this on WiFi. Just saying…
What do you think? Tap back and forth a few times. Pretty amazing isn’t it? At least it is if you are indeed looking at this on a Retina display. For those of you who are… this… this right here is the future. It’s so good that you can see the pixels along the edges of the projections on either side of the stage—yeah, those jaggies aren’t from this file, they’re part of the stage. The grain in the black and white projection behind the main screen on the back of the stage? That’s grain from the projected photograph. And check out the hand written text on the slide displayed on the main screen.
If you’re not viewing this on a Retina display, well, without zooming you’ll see a very minor difference caused by the interaction of the different levels of sharpening applied to each image and the graphics scaler. Sometimes, the browser scaler does a better job than the scale on export and sharpening I used to create the 900 pixel wide image. Sometimes not. Furthermore, if you zoom into the page using your browser—as suggested by several readers—you’ll be able to see the benefit of having the higher resolution. But, it’s still not nearly the same experience as looking at it on a Retina display.
For the first time, I’m looking at a photograph I’ve made on a screen that has the same sort of visceral appeal as a print. Or maybe a transparency laying on a lightbox. Ok, maybe not quite that good, but it’s pretty incredible. In fact, I really shouldn’t be comparing it to a print or a transparency at all. Really, it’s its own very unique experience.
I love it. I really do.
Now, before you go reprocessing all your photos—and keep in mind that you can’t export progressive JPEG out of Lightroom or Aperture, so this isn’t an easy undertaking—please understand that this is just sorting out how to push a high DPI image to an iPad Retina display. Doing this well for more than a one-off example is going to take a lot more work, not the least of which is sorting out how to decide when to push a progressive JPEG at what size for the right client and bandwidth combinations. And, before any standards for doing this show up, everything is going to be duct tape and bailing wire. More on this in the next post.