Image placement in ePubs

JCarig · 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.

Toxaris · 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.

Jellby · 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".

JCarig · 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.

05-11-2011, 02:52 PM	#1
JCarig Junior Bottle Washer Posts: 13 Karma: 8824 Join Date: May 2011 Location: Newark, DE Device: all	Image placement in ePubs 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.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Making ePubs show cover image on Kobo.	Vanguard3000	ePub	3	01-03-2011 02:11 PM
Placement of D pad	bugeyed	Kobo Reader	18	11-08-2010 01:11 PM
Image sizing for Epubs	purcelljf	ePub	2	08-19-2010 05:01 PM
button placement on the 300 question	oncdoc	Sony Reader	7	09-10-2009 07:22 AM

05-11-2011, 03:16 PM	#2
Toxaris Wizard Posts: 4,520 Karma: 121692313 Join Date: Oct 2009 Location: Heemskerk, NL Device: PRS-T1, Kobo Touch, Kobo Aura	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	#3
Jellby frumious Bandersnatch Posts: 7,515 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	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	#4
JCarig Junior Bottle Washer Posts: 13 Karma: 8824 Join Date: May 2011 Location: Newark, DE Device: all	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.

Advert