iPad Cover Presentation Tests

There are all sorts of blogs stating that the "cover is no-longer the book" with ePubs. That state hasn't arrived yet. The retro-look iPad wood-grain bookshelf with rows of books maintains the importance of the cover. And so it should (just drop the Ikea furniture). These covers are generated from the ePub. If it is all tagged inside the ePub in accordance with the Apple requirements it shows. If not, it doesn't. Other blogs have covered this issue. Here's a link to Mike Cane's iPad test blog which yells about it.

So far all the books we have seen on "the shelf", have been normal form factor. We generated a few covers with different sizes and aspect ratios to see what would happen, and of course to make sure they display.

We created print resolution covers at 300dpi as follows (excuse the CSS style measurement units). These were imported into IGP:FLIP and converted into max 600px width or max 800px height using the standard IGP:FLIP Media Manager cover processing options (these can be changed of course). The books had a title page and metadata only.

Portrait

1. 6in x 9in
2. 5.5in x 8.5in
3. A4 (210mm x 297mm)
4. Letter (8.5in x 11in)

Square

1. 6in x 6in (152mm x 152mm)

Landscape

1. 9in x 6in
2. A4 (297mm x 210mm)

And here is the Apple/Ikea fusion result:

 
So that was a success. All covers load and present very nicely. They are also nicely anti-aliased which of course we would expect from Apple. So we can confidently go ahead and make distinctive covers with any aspect ratio should the mood take us.

(Please excuse the other books without covers, but this is an iPad under stress)

Comments

[david stong]

Thanks for your work on this. A Sigil tutorial recommended 590px X 750px with the implication that it could ONLY be that proportion. Then in iPad, that cover is different from many of the others. I've also found that covers can be added easily in iTunes; in the 'get info' dialog there's an 'Artwork' tab.

[Richard Pipe]

David, Thanks for the comment. ePub cover size has always been a pain, let alone aspect ratio. ADE does a bad job with cover thumbs of differing sizes and shapes. It was necessary to see what happened with different sizes and shapes. As practitioners we have to have this stuff in our toolkit.

The Sigil tutorial: I have a feeling these figures come from an image that fits the original Sony 505 eInk visible screen space. This has a visual pixel area of 584px x 754px. However the days of making a one size cover as screen real estate increases and colour arrives are over. Our preference is to make a larger cover and use CSS to size it for the display area. It then depends on the quality of the device image resize rendering. On this note Apple say "Do not explicitly set image dimensions in the metadata. Instead it is preferred to down sample the images for a size more appropriate to the iPad screen." The test covers above certainly rendered very well with excellent anti-aliasing.

I think this calls for a set of test cases with a wide range of cover XY sizes to see how they come through on the Bookshelf and in the book cover page. Just to establish some limits. I think we will do inputs with 250px, 450px, 850px, 1650px and 2250px on the long sides. I think iPad will shine, ADE will remain what it is.

We have some other CSS resize image tests planned as well.

[jam]

Thanks for doing this fantastic work. It is such a help!

I am getting good results using the Sigil editor to make epub files, but the cover images don't show up on the iPad in iBooks.

In the text, speaking about covers, you said, "If it is all tagged inside the ePub in accordance with the Apple requirements it shows."

I have not been able to find Apple's markup requirements yet. Do you have a link to those or a code snippet for the cover art? I'd really appreciate it!

Thanks in advance.

- jam.

[Michael Goff]

I just tried Google Sigil 0.2.0 and was easily able to set a cover image which showed up beautifully in iTunes, the iBooks bookshelf, and opposite to the TOC when iBooks is in landscape mode. I simply added a png to the Images folder, right clicked on it, and selected Add Semantics -> Cover Image.

[Charles King]

>I just tried Google Sigil

Sigil is not, and never has been, a Google project. It is written independently by Strahinja Markovic and merely uses Google's server as a host for its open source code.

[Framk Lowney]

I found that making the height 1.5 times greater than the width produced the largest and best looking book cover for the iPad in any orientation/mode. So, 600 X 900 or 590 X 885 work equally well.

[software testing training]

David - where did you find the Sigil tutorial? I've been looking for a good one but haven't found a good one.

[thehetre]

Create manga in epub for iBooks - How is correct image size?

I trying to create an epub document for Doreamon to display on iPod by iBooks. I'm using Sigil editor and set image size in each page is 590x 750px (follow tutorial code.google.com/p/sigil/wiki/BasicTutorial).

But it automatic general one blank page after my wanted page: Screen on iBooks: - My page: http://dl.dropbox.com/u/6552771/img/sigilimgsizea.PNG - Blank page: http://dl.dropbox.com/u/6552771/img/sigilimgsizeb.PNG

So, what's is correct size for full view image in iBooks? Please help.

[Scott Hooper]

Hi
I believe I've filled all the requirements for a proper cover icon in iBooks, but no dice. Is there a place from which I can download one of your sample books (with only cover art and metadata) to examine the code in Sigil?
Thanks