The most effective ways of placing images in an EPUB are outlined in Liz Castro's book EPub Straight to the Point: Creating Ebooks for the Apple IPad and Other Ereaders
at the beginning of Chapter 4 (pp. 173-6 for readers of the print edition). Castro informs us here that 600px x 860px is the perfect size to force a picture to consume an entire page, and she also provides her excellent <div> solution that enables pictures to float.
Unfortunately, if you simply pass this same CSS and xhtml through KindleGen then the image firstly won't float, because the Kindle doesn't do image or sidebar floats, and also it will appear too small because of the way the Kindle interprets Liz Castro's CSS for getting floating images to play nice on all EPUB readers.
In the Kindle your options are limited, but simple to achieve. Images will automatically be aligned left. If you would like them to be centred use the tag <p class="center"> with the CSS p.center {text-align: center;} or to align right <p class="right"> with the CSS p.right {text-align: right;} you might also want to add a margin to this top and bottom or insert <br /> before and after the image to insert some space. But this is basically it.
The Kindle 1 and Kindle 2 have different screen dimensions (Kindle 1= 524px x 640px; Kindle 2 = 520px x 622px) and Joshua Tallent in his book Kindle Formatting: The Complete Guide to Formatting Books for the Amazon Kindle
advises that the Kindle resizes if the dimensions of a picture are different to these. I haven't tried forcing an image to occupy a full screen across Kindle 1 and Kindle 2 and the apps, so not yet sure whether this is possible (will experiment soon - or let me know if you've tested this in comments below).
Tallent also provides tips on the best ppi settings (Kindle supports up to 167 ppi), and don't ignore his suggestion to increase the contrast on photos - because although Kindle Previewer emulates eInk display, contrast seems to be more of an issue on the actual Kindle.
So there we have it. You have two choices - if you are looking for parity of style across your eBooks then scrap the floats from your EPUB (you might have to lose full screen pictures too!), or (more likely) accept that the Kindle will look slightly different. Also take into account eInk when preparing photographs, both formats can be viewed across LCD and eInk so you need to find a middle ground in terms of contrast (unless you are preparing an EPUB exclusively for iBooks).
Finally, in my experience so far I'd say that for most images on the Kindle you'll simply want to centre them and be satisfied with that.
Note: I forgot to mention in this post - in the Kindle your xhtml needs to include <img alt="" class="" height="" src="" width="" /> (insert the actual height and width even if you don't want the image to be different dimensions to the original, otherwise Kindle will stretch it). So your final code might look like this <p class="center"><img alt="Picture" class="figure" height="200px" src="../images/picture.jpg" width="200px" /></p>
at the beginning of Chapter 4 (pp. 173-6 for readers of the print edition). Castro informs us here that 600px x 860px is the perfect size to force a picture to consume an entire page, and she also provides her excellent <div> solution that enables pictures to float.Unfortunately, if you simply pass this same CSS and xhtml through KindleGen then the image firstly won't float, because the Kindle doesn't do image or sidebar floats, and also it will appear too small because of the way the Kindle interprets Liz Castro's CSS for getting floating images to play nice on all EPUB readers.
In the Kindle your options are limited, but simple to achieve. Images will automatically be aligned left. If you would like them to be centred use the tag <p class="center"> with the CSS p.center {text-align: center;} or to align right <p class="right"> with the CSS p.right {text-align: right;} you might also want to add a margin to this top and bottom or insert <br /> before and after the image to insert some space. But this is basically it.
The Kindle 1 and Kindle 2 have different screen dimensions (Kindle 1= 524px x 640px; Kindle 2 = 520px x 622px) and Joshua Tallent in his book Kindle Formatting: The Complete Guide to Formatting Books for the Amazon Kindle
advises that the Kindle resizes if the dimensions of a picture are different to these. I haven't tried forcing an image to occupy a full screen across Kindle 1 and Kindle 2 and the apps, so not yet sure whether this is possible (will experiment soon - or let me know if you've tested this in comments below).Tallent also provides tips on the best ppi settings (Kindle supports up to 167 ppi), and don't ignore his suggestion to increase the contrast on photos - because although Kindle Previewer emulates eInk display, contrast seems to be more of an issue on the actual Kindle.
So there we have it. You have two choices - if you are looking for parity of style across your eBooks then scrap the floats from your EPUB (you might have to lose full screen pictures too!), or (more likely) accept that the Kindle will look slightly different. Also take into account eInk when preparing photographs, both formats can be viewed across LCD and eInk so you need to find a middle ground in terms of contrast (unless you are preparing an EPUB exclusively for iBooks).
Finally, in my experience so far I'd say that for most images on the Kindle you'll simply want to centre them and be satisfied with that.
Note: I forgot to mention in this post - in the Kindle your xhtml needs to include <img alt="" class="" height="" src="" width="" /> (insert the actual height and width even if you don't want the image to be different dimensions to the original, otherwise Kindle will stretch it). So your final code might look like this <p class="center"><img alt="Picture" class="figure" height="200px" src="../images/picture.jpg" width="200px" /></p>
Comments
Post a Comment