Squished images in Kindle: InDesign CSS is the culprit

  • Sumo

I just did some trouble-shooting on an EPUB exported from InDesign, with InDesign writing the CSS. Images appeared fine on iBooks, but were distorted on the Kindle platform.

I dug into the EPUB, and found this CSS for the image:

Screen Shot 2016-02-27 at 1.04.51 PM

I had a hunch (call me crazy) that a Kindle would be clueless trying to figure out how to render an image with these attributes.

So, I quickly tried this:

Screen Shot 2016-02-27 at 1.07.08 PM

And that did it.

What’s the lesson? InDesign creates all kinds of interesting scenarios when writing CSS and HTML. Be prepared to dig into both when problems crop up. Or, develop your own CSS, do complete markup within InDesign with paragraph, object, and character styles, and have many fewer problems (and when you do have problems, you’ll be dealing with your own material).

6 Responses to “Squished images in Kindle: InDesign CSS is the culprit”

  1. Write my own CSS? I’d rather Adobe created code that’s more portable. That’s what we pay them to do.

  2. Chris Jennings says:

    You need to put this in your own CSS file that is loaded when you export to ePub reflowable

    img {width: auto !important;}

  3. Gustavo Martinez says:

    The way I deal with this situation within Indesign is to modify Object>Export>Options>EPUB and HTML>Rasterize Container>Size: Relative to Text Size for inline images. You can add Float Right or Float Left when need it.

  4. Chris Benge says:

    My images were defaulting to a full page height: Kevin’s solution didn’t work for me, but Gustavo’s did — thanks Gustavo! But I feel like I’m following a recipe blind without any understanding of what is going on. Can anyone point me to documentation about the Object Export options which explains what each option does, so that I can understand which option to select in which situation?

  5. Chris Benge says:

    Further to the above, I discovered a new problem: when altering text size in Kindle Previewer, very large or very small text size options distorted my images. So I changed Gustavo’s ‘Relative to Text Size’ setting to ‘Relative to Text Flow’. This now works for any size of text in Kindle Previewer — PROVIDED I also include minimal additional CSS at epub export stage:
    img {width: auto !important; height: 100% !important;}

  6. Alan says:

    Where do you add these settings – if I edit them in Cakibre they reset once the ePub is closed