Search This Blog

Tuesday, October 15, 2013

Hack: How to Fix Blank Pages After Large Images in E-Ink Kindles

When doing an image-heavy ebook where a single image constitutes a whole page, such as in a children's book, I always format primarily for Kindle Fire DX with images being 1200 px wide. My reasoning is that most kids are looking at ebooks on newer generation Kindle Fires and not e-ink Kindles. 

However, if you have a 1200 px x 2000 px image (approx double the size of Kindle Fire's screen but an image size that still looks large and clear on Kindle Fire DX), you will see blank pages inserted after each image when previewing on an e-Ink Kindle. Frustrating!

But wait, what about adding an amzn-mobi stylesheet with the CSS like this?

img {
     page-break-after: avoid !important;
     page-break-inside: avoid !important;
     max-width: 522px !important;

Unfortunately older generation Kindles ignore all of this CSS, especially max-width. 

But there is a solution! All you need to do is create a second set of images sized to a maximum height of 600 px and put a hisrc tag in the image attribute. 

What this does is assigns hisrc images to e-Ink Kindles and regular imgs to Kindle Fires. Doing so may seem counterintuitive since hisrc is meant for hi-res images, but it's a hack that does work for mobi files. Plus, you don't even need to add image sizes. 

Your img tag would look something like this: 

<img src="images/a.jpg" hisrc="images/aa.jpg"  alt="" />

Of course you will still need to add all of the resized images to your opf file, so it can be time-consuming, but this fix does work and will end all of the questions from your clients like "Why are there blank pages showing up when I preview my ebook on my super old black-and-white Kindle from 2007????"

Note: epub will not accept hisrc images and will throw a bunch of errors at your if you run the epub through the Epub Validator. So, always keep two working copies of the epub, one with hisrc and one without. Or better yet, two git branches. 

No comments:

Post a Comment