Retina images in iBooks on iPad

I've been promising this post for several weeks and I think I finally have a definitive recommendation. But let me start at the beginning. The goal is to include beautiful high-res images in ebooks that take advantage of the Retina display, making sure to follow Apple's rules and not completely bloat the book, especially on lower-res displays.

So, I went to James Duncan Davidson who has done some pioneering work serving Retina images on websites. First, he found an issue with WebKit and Retina images. Then he showed it was possible, and what a difference it makes. Then, he speculated about need for progressive JPEG. And recently he figured out how to serve Retina images to Retina displays without bogging down slower screens. All very helpful.

At least for websites. Of course ebooks have different issues. First and foremost, since they are self-contained, it doesn't make sense to serve different images in different situations, unless you're creating completely different EPUB files, which is a hassle of its own.

Second, on the iPad 3, which has a resolution of 2048 x 1536, we have the added problem that iBooks doesn't allow images larger than 2 megapixels, and 2048 x 1536 is 3,145,728, precisely 1,145,728 pixels too many.

So how do we get Retina quality images in an ebook in iBooks?

First, following the guidelines in my last post on maximizing the iPad screen real estate, as well as providing lots of zoomability, I'm going to use a viewport that measures 2400 x 1860. And I'm going to create images at that size as well.

To get around the 2 megapixel limit, I worked out a technique based on an idea on Dan Amos' Book Creator website: “chop your 3.1 million pixel image into smaller images with each no larger than 2 million pixels. Then just line them up on the page.” First, I created an image that measured 2400 x 1860 (using the selection tool with a fixed ratio of 2400 x 1860 to select the desired area of my photo, then Save to Web at exactly 2400 x 1860).

I calculated that at 2400 pixels wide, a 2 megapixel image could have a maximum height of 833 pixels (2M÷2400). But that's an annoying number, so I opted for slices measuring 2400 x 800 pixels high. I set horizontal guides at 800px and 1600px and after activating the Slice tool (jumbled in with Crop), I clicked the Slides from Guides option in the toolbar. Then, I switched to the Slice Select Tool and double clicked each slice to name it. Finally, I chose Save for Web, Photoshop exported the three slices for me, with my chosen names (top, middle, and bottom).

In the HTML, I positioned each image right after the next with no spaces:

<div><a id="image" href="#pag001"><img id="item1" class="item" src="molt/top.jpg" alt="image" style="width: 2400px; height: 800px; z-index:-1" /><img id="item2" class="item" src="molt/middle.jpg" alt="image" style="width: 2400px; height: 800px;z-index:-1 " /><img id="item3" class="item" src="molt/bottom.jpg" alt="image" style="width: 2400px; height: 260px;z-index:-1 " /></a></div>

And in the CSS, I set the images to display as if they were block elements (one on top of the next):

img {display: block}

And the images display fine, and everything looks beautiful



And if I place a 900 x 698 pixel image on the right side page, flipped so that the same bits are next to each other, you can really see the difference:



Especially if you zoom in:



But here's the thing. If I place a 1600 x 1240 px image on the right hand page (again, flipped so I can compare the caterpillar heads with each other), I can't tell the difference. Maybe you can. And perhaps that makes sense, I'm not sure. A 1600 x 1240 image (which is less than 2 megapixels) is only 206ppi and not officiall Retina quality, compared with the 264ppi permitted by the iPad 3, but it's pretty darn good.



Even if you zoom in:



So, given that

1) Slicing high-res images is a pain (and sometimes reveals white dividing lines on iPhone and old iPad)
2) My high-res caterpillar takes up 2Mb, compared to the 1Mb for the 1600 x 1240px image.
3) The difference in quality is minimal.
4) The difference is even less noticeable on iPhones and older iPads.

I don't think going for extra high-resolution images that take full advantage of the new iPad's Retina screen is worth the trouble.

But I'd love to hear if you've found differently.

Finally, this is a fixed layout example, but I would say this goes double for flowing books, in which it would be even harder to position three images together reliably.

Want these posts emailed to your inbox? Would you like to see the example files that I used? Receive a discount on my books? And earn my eternal gratitude? Be sure and subscribe!