ePub Image Test Cases

This is a set of image presentation options for ePad in general and iPad in particular.

We live in a world where the screens range from the tiny to huge, and aspect ratios vary widely. Image handling in digital content should address the widest number of delivery environments. There are a number of recommendations on sizing images for different device screen, but little guidance on how to make images work for all of them.

Static images, made to some X-Y size are inherently device specific, and often  disappointing in different sized reading contexts. The approach we take is to use a simple little XHTML structure and CSS resizing to make the image proportional to the devices screen size. This works well most of the time. Images can be made larger - thinking of a wider range of devices - while performing under control in a document irrespective of screen size.

This works well where devices have excellent dynamic image resizing (antialiasing), and Safari is one of those devices. There are new CSS options available for resizing algorithm and quality.

So here are the pictures.The gray border on the pages is deliberate to show layout extent. Click an image for a larger view.

Image Resizing and Positioning

These first shots show images stacked in the galley, with various CSS resizing applied, and left, center and right alignment. All images are 500px wide and here came the first problem. The first image had CSS adjusted to 100% of the galley width, but it has remained at 500px. See the comments below.

Because the iPad portrait view galley width appears to be 547px or thereabouts, minimum default image preparation should be larger than this. We will be using 750px as the default production width. The "pure" CSS technique using margins left and right set to auto, frustratingly doesn't work on ADE. Therefore a text-align hack has to be used to get the image into the center. While this is allowable CSS, it is not particularly elegant, and doesn't create XHTML/CSS with a lot of future and reuse value.

Galley Floats

This set of images again uses CSS resizing, and floating to allow the text to wrap. This technique works on all devices.

As you can see images can be placed left and right to any scaling. All source images are 500px wide. Safari does a superb job at resizing the images as does Gecko. The ADE image handling with this type of CSS dynamic resizing can show some crude resizing artefacts with contrasty images. 

Here are the layouts in two page mode. The design intention has been preserved. The images retain their proportion with the galley.

Here we can see the inevitable flow artifact where the page is forced to break because of the image block vertical size, but the horizontal layout is preserved. 

And the Problem!

This series of pages uses dynamic galley proportional sizing rather than images placed at fixed size. It is an essential technique for valuable image heavy ePubs.

iPad "bug". Probably a designed-in behaviour; iPad does not appear to make an image larger than its original size. Normally with CSS it is possible to stretch an image pretty much as you like. With these tests, it will resize down, but not up.

Aspect ratio is a practical problem that must be addressed for fixed images. When processing various publisher's content it is interesting to observe that highly illustrated multi-column books tend to use portrait oriented images, while full width galley pages tend to use landscape images. Landscape images are easier to handle as they can never flow out of the page height. Portrait oriented images have to be handled with care. 

Another advantage of the image in the controlling <div> is that captions are part of the structure and can be moved and flowed with the image. This is where an XML foundation for ePub creation beats PDF2EPUB or InDesign2EPUB approaches hands down. The above layouts and sizing are surprisingly easy with XML. These examples were made with IGP:FLIP and you can see a demonstration video here of how this ePub was created.

On the matter of aspect ratios from the measurements I have made, the viewing area of iPad appears to be approximate 1.41, in both vertical and horizontal viewing modes. More or less the same ratio as A4. Keep this in mind when preparing portrait images or the blocks within which they appear.

Image Expanding Crash and Burn

This was meant to be an impressive demonstration of CSS resizing. These are images from screen grabs, not text content.

The image on the left is a full portrait page, the one on the left is a full two page view page.

What was meant to happen was the image on the right should have filled the page, more or less to the same size as the one on the right, demonstrating the aspect ratio factor. Nope! No CSS image sizing up apparently. Maybe I have to try more tests.

  This final image does show the aspect ratio relationship between the pages to some degree when the two pictures are seen in the two page view. Here both images are more or less the same size and aspect ratio.

Comments

[Michael Hackney]

Not sure if my first comment attempt succeeded! Basically, I have not been able to successfully resize an image on my iPad. I have tried all of the css tricks I know. Would you be so kind to share a code snippet? I am trying to convert my fly reel making book to ePub for publishing on iBooks.

cheers,
Michael

[Michael Hackney]

I figured it out! Basically, I use a div to contain the image and caption. Then, add a left and right margin to the div. That causes the image to scale.

[Richard Pipe]

Paul, that's pretty much it. I was preparing a typically long-winded reply. I have put it on my XML blog where I think it is more appropriate. It has some additional ideas and techniques you may find useful or interesting.
http://infogridpacific.typepad.com/publishing_with_xml/2010/05/image-control-xhtml-and-css.html