The "Magic Number" (600x860) Not Working

[Paddlin]

Hey everyone,

So I'm designing a book to go up on the iBooks store and I want to put one image that fills the page (as best it can) at the beginning of every chapter. Everywhere I look online cites 600x860 pixels as the so-called "magic number" to fill the screen with the image, but the images I place in at that size seem too small.

Here's my process, for what it's worth. I'm making the images in Photoshop, placing them in their own "chapters" in InDesign, and converting from .indd to .epub. I've also seen various references online telling me to add "style="max-width: 100%" to the img tag in the XHTML document, but that doesn't seem to do anything either.

Any ideas?

[Jellby]

Originally Posted by Paddlin

So I'm designing a book to go up on the iBooks store and I want to put one image that fills the page (as best it can) at the beginning of every chapter. Everywhere I look online cites 600x860 pixels as the so-called "magic number" to fill the screen with the image, but the images I place in at that size seem too small.

600x800 is a common pixel size of ebook reader screen, that's probably why you see that size mentioned. If I'm not mistaken, the iPad has a larger screen, so you'd see an image smaller than the screen.

I've also seen various references online telling me to add "style="max-width: 100%" to the img tag in the XHTML document, but that doesn't seem to do anything either.

Of course, "max-width" is the maximum width, but it says nothing about the minimum. For your device, 600 pixels is less than 100%, so the image is not affected by max-width.

You can either creating a larger image (say 1200x1600) and using "max-width: 100%", or keeping the smaller one and using "width: 100%", this would stretch the image up to fill the whole width (for whatever "width" actually means for the iPad, i.e., it might leave some margins).

[wannabee]

This might be helpful

[jharker]

The above links are helpful; here are some more.

First, to control the image size in iBooks you actually need to wrap your img in a div tag and apply the desired size to the div tag. See Liz Castro's post on controlling image size.

Second, the true size of the image is not so important -- more important is the aspect ratio. You need to create an image where the aspect ratio of the image matches the page so closely that when the image is fully scaled, there is no room left over for text (thus forcing a page break). I go into this in a little more detail in my blog posts on the magic ratio for images and on the precise dimensions of an iBooks page (which are 557x800px in portrait mode and 378x569px in landscape mode).

I'm not sure why you think your 600x860 image looks small on the screen -- by default, I'm pretty sure that iBooks should reduce it to fit the screen. But in any case, you should probably have code in there to explicitly specify how big you want the image.

Hope this helps!

[JSWolf]

However, the real solution is to ignore iBooks and make a proper ePub that works with txtr or Bluefire.

[Fabe]

Originally Posted by Paddlin

Everywhere I look online cites 600x860 pixels as the so-called "magic number" to fill the screen with the image, but the images I place in at that size seem too small.

Solution: Double Up. Make the image 1200 X1600 in Photoshop. Save @ 72dpi and Quality <200. This will fill up an iPad page beautifully. - Fabe

[wannabee]

Am I missing something here? I suppose if you are putting a book in the iBookstore only then there's every chance it will be read by an iPad. But designing for iPad only can't be a good way to go if your book is to be compatible with the largest audience possible.

[Adjust]

Originally Posted by wannabee

Am I missing something here? I suppose if you are putting a book in the iBookstore only then there's every chance it will be read by an iPad. But designing for iPad only can't be a good way to go if your book is to be compatible with the largest audience possible.

It's the easiest option.

Look at it this way: All other readers follow the IDPF specs, which means what you created for one, you can be pretty confident will display the same of the others. Except for the iPad

Apple thumbs its nose at the community, and does what it wants.
So that means if you made an epub which will work on the iPad then it will work on all others.

[Fabe]

Originally Posted by wannabee

... designing for iPad only can't be a good way to go if your book is to be compatible with the largest audience possible.

The only way to design for the largest audience (I am interpreting this to mean the most e-reading machines) is to make you work a generic as possible. Not all machines work the same way.

[JSWolf]

Originally Posted by Adjust

It's the easiest option.

Look at it this way: All other readers follow the IDPF specs, which means what you created for one, you can be pretty confident will display the same of the others. Except for the iPad

Apple thumbs its nose at the community, and does what it wants.
So that means if you made an epub which will work on the iPad then it will work on all others.

NO! Please do not call iBooks the iPad. The iPad has apps such as txtr and Bluefire that work better then iBooks. So please do not say it's the fault of the iPad. It's the fault of one lousy app. iBooks is not wonderful. But txtr and Bluefire are using ADE. So yes, they do work better then iBooks.

[wannabee]

I'll try not to hijack Paddlin's thread. I can put a 2400 x 1200 image in an epub and iBooks will resize it fine. ADE will display it because I have 20" screen but I suspect that other readers wont. Am I wrong because all my books look great on the iPad? EDIT <--- I mean iBooks

[Adjust]

Originally Posted by JSWolf

NO! Please do not call iBooks the iPad.

Correct, sorry a bad habit of mine, come from talking to non techies about it...

I meant iBooks, which 90% of people owning iPads use.

[Adjust]

Originally Posted by wannabee

I'll try not to hijack Paddlin's thread. I can put a 2400 x 1200 image in an epub and iBooks will resize it fine. ADE will display it because I have 20" screen but I suspect that other readers wont. Am I wrong because all my books look great on the iPad? EDIT <--- I mean iBooks

What's the filesize on that badboy...compared with a 860x600 @120DPI

And if you don't have you image set to 100% does it still come in correctly?

[wannabee]

Originally Posted by Adjust

What's the filesize on that badboy...compared with a 860x600 @120DPI

And if you don't have you image set to 100% does it still come in correctly?

I didn't actually make the whole ePub book with images that size so I can't give you any file sizes. I realised that some of the images were 3 or 4000 pixels when they opened in ADE and they took up the whole screen.

And, yes, no coding required for them to display on the iBooks screen at correct size. They just worked.

The book I'm working on right now has all images set to 390 wide and they all take up the full width of a page when ipad held horizontal and about 80% when held vertical.

The reason I made them 390 is that when I made them over 400 the IT guy's Android phone display an icon with a ? instead of the image. I'm guessing that they will display OK on other readers but I noticed the graphics loose a lot of clarity when converted in Callibre to Mobi.

[Valloric]

Originally Posted by Adjust

Look at it this way: All other readers follow the IDPF specs

On what planet is this supposed to be true?

There is not a single epub Reading System out there without absolutely major deviations from the IDPF standards. iBooks is worse than most, true, but it's ridiculous to say the others follow the specs.