Tuesday, April 20, 2010

Images in iPad eBooks, thanks to InDesign

There's some talk on Twitter about what InDesign does to images when you export an ePub so I thought it would make sense to give a quick synopsis in more than 140 characters!

When you choose Export to ePub in InDesign, you get the choice of checking "Formatted" for images. What does that mean?
Formatted images with InDesign during Export to ePub

InDesign Placed ImageIf you check "Formatted", InDesign looks at the images in your document and takes into account their current physical size on the page, and any cropping, shearing, or other effects that you have applied. It then exports the image at 72dpi.

This image originally measured 3264 x 2448 pixels. I both resized and cropped it until, as you can see, it measured 4" x 3" on the page in InDesign.

 images infoBut the original size of the image doesn't matter, because if I check "Formatted", no matter its original size, InDesign will export it with a size of 288 x 216 pixels. (288 = 72 x 4", 216 = 72 x 3")

If you don't check Formatted, InDesign exports the images at the same size they had originally, in this case 3264 x 2448 pixels, and forgets about shearing or cropping. The one thing InDesign does do is change the resolution of the image to 72dpi, though, this is largely irrelevant.

Why is it irrelevant? I'm not going to get into a big discussion about resolution here (though perhaps one day I will), but I will tell you that InDesign can change the resolution to anything it wants, but the only factors that determine the output size of an image are its size in pixels and the resolution of the output device.

So, if the 288 x 216 pixel image is output on the iPad, which has a screen resolution of 132 dpi, it will measure 1.63" x 2.18". (288/132= 2.18", 216/132=1.63", and I admit, I checked it with a tape measure and it really does measure that.)

IMG_0093

The physical size of that same image on a Mac, say in an eBook on Adobe Digital Editions would depend on the output resolution of the screen. It used to be that all Mac screens were 72dpi, but that's not the case anymore; for example, mine is around 98dpi. So, on my screen, the image measures 2.9" x 2.2".

images formatted ade

Ah, you say, they look just the same! That's partly because I can only show them at a single resolution here—both of those images measure 288 x 216—and partly because everything else is in proportion and so they look very similar.

It probably makes more sense to decide on the size of an image by taking into account the full area possible. As I mentioned in Anatomy of an iBooks page, the usable area on a (vertical) iBooks page is about 560 pixels x 760 pixels. So, an image that measures 288 pixels wide will take up about half a page.

Please ask questions. It helps to know what's confusing. I'm feeling my way a bit as well.

And yes, that's our calf, Julieta. She's about a month old in this picture. We're getting about 3 quarts of milk every day and she takes the rest. She deserves a post of her own.

And to my non-American readers, I'm sorry about this "inches" business. I'd be curious to hear if you measure screen resolution in dpi, or not. I seem to remember using dpi even in Barcelona, where no-one cares the slightest bit about what an inch is, but it's been a while. 

12 comments:

  1. John Gruber at Daring Fireball posted a link to Apple’s Mac OS X Resolution Independence Guidelines, which make for an interesting read after contemplating the resolution of the iPad versus the Mac (and versus the upcoming high-res iPhone)

    ReplyDelete
  2. Thanks for this info Liz! I am endeavoring to create an artwork catalog/portfolio for the iPad... your website is great. Thank you!

    ReplyDelete
  3. Has anyone created a comprehensive list of what CSS tags/attributes are supported on the iPad? PLease let us know. Thanks.

    ReplyDelete
  4. @Rick. Working on it, coming soon :)

    ReplyDelete
  5. I empathize with your description of testing iBooks on the iPad. One conclusion I've reluctantly come to is that images in epubs on the iPad cannot be scaled, because the reader ignores width and height properties on img elements. Is that consistent with your testing?

    ReplyDelete
  6. @Rick: I am (slowly) working my way through the 8,200+ official 3WC CSS tests on the iPad. The summary so far: 259 passing tests and 113 failing. My write-up is posted at http://files.me.com/david.mundie/r5mkhu

    ReplyDelete
  7. @mundie Wow, this looks really valuable. Thanks!

    ReplyDelete
  8. I bet that reading such eBooks on your iPad is really amazing. I heard that you can flip through pages, almost like reading a traditional book..

    ReplyDelete
  9. @Liz, I gave up after 1,228 tests. Just got bored. Final score: 827 passed, 341 failed. I've documented the whole exercise at:

    http://web.me.com/david.mundie/Linden_Log/Blog/Entries/2010/5/6_CSS_Tests_on_iPad.html

    ReplyDelete
  10. I have posted the results of my own efforts to scale graphics for iBooks at the URL below. What works for me is to wrap graphics in table cells.

    http://web.me.com/david.mundie/Linden_Log/Blog/Entries/2010/5/16_Scaling_Graphics_in_iBooks.html

    ReplyDelete
  11. Great article! I'm working on making my books ebooks for the iPAD. Thank you.

    Jan

    ReplyDelete
  12. Have you had any of your images get split, with one part on one ipad page and the other part on the next ipad page? I've been trying all kinds of things to stop this with no luck so far. I've even got the epub document to pass the epub test (at long last) but this one issue just doesn't look good on the final ibook.

    ReplyDelete

More of my books