Tuesday, October 2, 2012

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:

big vs 900 x 698

Especially if you zoom in:

big vs 900x 698 closeup

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.

2400x1860 vs 1600x1240

Even if you zoom in:

1600 closeup

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!


  1. Great findings, Liz. Perhaps high resolution versions for regular photos aren't really needed, but what about large maps and other images with tiny - but important – details?

  2. Maps could definitely benefit, but the tiling approach would mean that if you wanted to zoom in and look at it in more detail you could only zoom 1 of the tiles? Which isn't such a good experience. I wonder if newer revisions of iBooks will relax this restriction.

  3. Is it possible to create an epub where the images appear in the book as thumbnails but then is clickable to a nice hi res image as you describe above?

  4. Hi everyone. I've been working on embedding high-resolution maps, and I'm actually opting for the tiled image approach, setting my viewport dimensions to the combined image size. I've found that Pixelmator has a wonderful slicing tool, and yields very nicely compressed JPEGs at Apple's recommended 85% quality.

    Christo, the tiling approach works fine as-is in fixed layout books, since the two-page spread is two Web pages. In fixed layout, you cannot select a single image and view it by itself; all you can do is zoom into the pages as a whole.

    In flowing books, I've found a similar experience if you link to an XHTML page that is included non-linearly. iBooks treats that single page as a fixed-layout! So I'm implementing a "click to view map" experience.

  5. If your ePub is targeted on the iPad, embed a PDF inside it, create an image thumbnail, and link the PDF to it, especially if you have vector maps. This just makes more sense on the iPad. Now of course this may not work on other platforms.


More of my books