View Full Version : Image placement in ePubs

05-11-2011, 02:52 PM
Noob here:

I am trying to find a common practice on how to publish images in epubs. Specifically, should an image have a page break before it and after it, therefore giving it a page to itself, or should it flow with the text.

One of the first projects I've done had it where the images flowed. However, I got images and caption text separated by page. Also, I have come across half an image on one page and half on the other.

Any input would be appreciated....Also, if you want to take a look at the epub I mentioned above, it is available free: Delaware During the Civil War. (

Please feel free to dissect and comment. Thank you.

05-11-2011, 03:16 PM
It depends on the book and the effect you are trying to create. It also depends on the intended reader and the images itself. Not all readers have the same size and resolution. Also the font size plays a big role, especially when you want to flow the text around the images.

For example, in the retail epubs of Narnia illustrated by Pauline Baynes the images are between the text. However, sometimes you can see that the text was mend to flow around it. When the images are big, a separate page would be better.

Keep in mind, that because of the flowing character, if you want a separate page for each image you could end up with a few lines on a page and the rest of the page blank, than image and then the rest.

There is no real common practice, at least not for me.

05-11-2011, 03:42 PM
I prefer images just as a new paragraph (no text wrapped around them), and let the reading software insert soft page breaks if needed, if that makes a page just a few lines long, bad luck (at least until we get page floats).

If you want to keep an image and its caption in the same page (provided they actually fit), you can put both inside a <div> with "page-break-inside: avoid".

05-11-2011, 03:46 PM
The images are being taken off of a PDF of the original book. Oddly enough, the original book placed images on separate pages...even if it interrupted the flow of a paragraph. Personally, I am a fan of separate pages for pictures, so I may just be doing that to keep it as close to the original.

As for a <div> with "page-break-inside: avoid", I haven't tried it, but plan on doing so with the next conversion.

Thank you.