Participant

Answered

Best Dimensions for Fixed Layout Epub3 for Multiple Devices (2018)

Forum|Forum|7 years ago
May 14, 2018
3 replies
6591 views

Hi to all

I've been researching so that I can turn my hardcover picture books (which I create with InDesign) into epub3, but the more I research, the less sure I am. So turning to the experts for guidance.

I want to turn my first book into a fixed layout epub3. Ideally, I would like for it to be used on multiple devices, but for now, I'm most concerned about the rendering on Apple devices: tablets, phones & macs (all 3 if possible).

My question is what are the best dimensions for my epub -- sounds simple, but ...

1) There are different screen sizes to take into consideration -- should I create alternate layouts that represent the various aspect ratios of different devices?

2) How do I determine the actual number of pixels for height & width? My books are 8.5 inches wide by 11 inches high (final trim size) - but (if I've understood correctly) 2550 pixels x 3300 pixels would be way over Apple's 4M pixel limit.

3) Upon export, what resolution would I choose? (Afraid of Apple's Retina Display showing a pixelated image) Would a low res (say 72 dpi) look grainy? I think Apple suggested 150 dpi in 2016.

Any guidance would be greatly appreciated!

This topic has been closed for replies.

Correct answer BobLevine

DO NOT bother with alternate layouts. They serve no purpose with EPUB.

If you want to use 2048x1536, go for it. I don’t think it’s going to make much difference but the files will be larger. Might help on the iPad Pro.

J

Jill BarlettiAuthor

Participant

BobLevine - Thank you for continuing to share your expertise.

Three points remain unclear to me:

1) The 1024 x 768 covers the 4:3 aspect ratio -- I read (somewhere?!) that Apple prefers the actual epub dimensions be 2x greater than the screen dimensions. Should I create the page layout as 2048 x 1536 pixels then?

2) Do you think it's necessary (or a good idea) to create alternate layouts for, say 16:9 aspect ratio? I understand that iBooks (when reading) will scale the file to the appropriate device -- I read about adding a script to detect screen size.

(At this point, I want to create an epub3 that works on most Apple devices -- I'll worry about other brands later ...)

3) Upon exporting the epub, do you recommend a resolution of 150ppi?

rayek.elfin

Legend

Just to amend @BobLevine 's answer:

[1] In InDesign you select either the iPad 1024x768 or iPad 2048x1536 document preset.

You must decide whether to opt for portrait or landscape. It depends on your original book and the way the images are handled/designed

ps Turn off the standard text frame in the document preset window! See [6]

These iPad preset have an aspect ratio of 4 by 3. When viewed on any device full screen with a different aspect ratio (just about any other screen and device EXCEPT iPads) black borders will be displayed on the left and right.

This cannot be solved, unless you prepare specific version for each screen and device. Also, an iPad version will be very hard to read on a smaller device like an Apple phone, unless you again prepare a special version for those platforms.

[2] DO NOT turn on spreads. Turn this off in the document preset. FXL epub files do not support these very well, and it only leads to confusion. If you do need to convert a picture book that makes use of spreads in the original printed version, select landscape in [1], because you will need to convert those spreads to singular landscape versions in the FXL epub version.

[3] preferably work with a 2048x1536 version, but do realize that images will take up 4 times the memory compared to a 1024x768 version. If you have a lot of animations, moving images, and many pages, it may be a better idea to go with 1024x768 for improved performance as well as vastly reduced memory/file sizes. But it really depends on the scope of the book.

[3] think and work with pixels when designing a FLX epub. (PPI is a useless unit for screen design) If your choice at [1] was 2048x1536, full screen images should be prepared at that exact resolution. But again, it depends on the artwork: if the original artwork is made in a painterly style, a lower resolution may actually be just as nice looking. Fluffy clouds can be imported as a dramatically lower resolution, for example.

In fact, every and each asset should be treated individually, and resolution and file format decided by its use in the book:

- is it a fuzzy background image? JPG and a 1024x768 resolution will suffice.

- is it an animated item that flies across the screen? A transparent PNG file it is. At what speed? If it moves at a modicum fast pace across the screen a lower resolution will suffice, because our eyes can't resolve it very well. It is a waste of space to prepare this asset at a resolution that fits the 2048x1536 px screen.

- is it a background that must pan 2 or 3 screens? Better stick with the lower (1024*3)x768 resolution, because [1] it moves, and [2] it will eat memory like no tomorrow at a higher resolution, [3] page loading may slow down too much, and [4] a very high resolution may choke the video texture processing in the video chip.

- is it a static asset or an asset that moves into place, requires transparent parts, and then is the focus of attention? With sharp edged artwork and/or perhaps bitmap text? Prepare your asset as a PNG file, at the exact required resolution relative to the 2048x1536 resolution. For example, suppose you need a character to be placed on top of everything else at 50% on the left side of the screen. 2048/2=1024. Asset must be prepared at 1024x1536px.

...and so on.

Which brings me to:

[4] Never NEVER rely on InDesign's automated image export and optimization. NEVER. InDesign is terrible at this, and will produce image files that are just WAY too unoptimized. In particular PNG images are affected.

Therefore, optimize each asset in an external app such as Color Quantizer (or use the built-in optimization tools in your image editor), and import each asset into InDesign afterwards. Then choose the object export settings for each image asset, and tell InDesign to use the original image when it builds the ePub file. (I create an object style to automate this, and apply the style to each image frame)

The difference may very well be a reduction of ePub file size by a factor of 2 up to 4 times. And you will have full control over the quality of each asset.

[5] when exporting your 2048x1536 iPad preset based FXL epub, always stick to 72ppi during export. 72ppi means InDesign exports your file at the native 2048x1536 resolution.

NEVER NEVER NEVER export at 150ppi or even higher. It will effectively double up the resolution of all image assets.

Then again, if you control asset quality and resolution yourself via the Object Export options as explained in [4], the PPI export setting will have no effect at all, of course, unless there are elements and/or effects that InDesign must convert to raster images.

[6] InDesign converts empty rogue frames (text frames are unaffected by this) to full-sized transparent PNG files. If left alone, these may have a detrimental impact on the performance of your book when it is opened in Apple's readers. Delete these. Turn off the standard text frame in the document preset window!

Hunt down these empty frames in your file and remove them before exporting your file.

[7] After exporting, use a tool like Sigil to check your published file for problems. In particular look for empty PNG files that I mention at [6]: if any are generated (good chance there still are) either try to fix this in InDesign, or if InDesign for some obscure reason still insists on adding one or two, use an image editor to reduce these to 32x32px versions, and replace them. It will not affect the display of the final epub.

Other tips:

[8] While InDesign does not support these while editing an ebook, animated PNG files are still supported, and might be a solution when fully transparent animated assets are required. This will only work if those assets are imported with the Object Export options set to "use original asset".

[9] for more complex animations and interactivity you will need Animate. Produce these assets in Animate, export as an OAM file, and import into your ebook in InDesign.

James Gifford—NitroPress

Legend

Sounds like great information I too am looking into large-format documentary photography fixed layout epub books approximately 400 pages each A low res pdf of the last print book I did was 124 megs Can anyone point me in the right direction on who might host and publish books of this size Any insights as where to start would be helpful

This is a pretty old thread, and much of what's in it, even Rayek's long answer, has evolved.

There are few good intersections between high-resolution, massive-file ebooks and good technical solutions. To be honest, if you wanted to present a portfolio or collection of that scale, I'd use a web page. That allows loading by the page (and, I assume, by the image), and you can do more, structurally and visually, with pure web code than you can with the limited subset in EPUB and the unpredictable behavior of EPUB readers.

But if you're looking for massive/high-res content, manageable file sizes, and DRM control of a "book" — there's no good option that allows all three.

J

Jill BarlettiAuthor

Participant

Thank you, BobLevine for such a prompt reply!

I kind of figured that Apple and the rest wouldn't play nicely together. (Nice article!) My idea was to create an epub3 that renders well on Apple devices (iPad, iPhones & Mac, if possible). If need be, I could create a different version for Android devices.

I understand that fixed means fixed -- I thought that I might insert JS in the file to detect screen size and select the most appropriate layout (if I made alternate layouts in InDesign).