Tuesday, April 9, 2013

How wide the image?

I don't own a large tablet, so I was slow to realize that Amazon's 8.9 inch Fire HD was seriously degrading the images in Kindle editions. (The same doesn't seem to be true of the Apple iPad.) The problem arises with the larger, high-resolution screen, combined with the lack of a software default that would enlarge an image to fill the screen, or something close to that.

For years Amazon has recommended that we use images sized to a 600 by 800 pixel ratio, and that is what I have used in recent years. But even when the image was smaller than the recommendation, it was enlarged to full screen in most Kindles and Kindle apps. With the advent of the Fire HD tablets, this no longer seems to be the case.

As a fix, I have made two changes. First, I now upload images that are 800 pixels wide by however tall. (Some formatters use 1000 pixels wide, but I think the smaller images expand quite well. Second, I changed the html for my images to include a width="100%" instruction. This solves the problem on the Fire HD and on its larger sister, which I think of as The iPad Killer, and it makes no difference whatever in the e-ink Kindles or the various Kindle apps. This is what the html looks like in the case of the Sony Data Discman illustration early in my Guide:

<div class="image" id="disc"><img alt="Sony Data Discman" width="100%" src="discman.jpg" /></div>

The "class" tells the Kindle or app to follow the instructions in the style sheet for formatting an image. The "id"  links the illustration to the table of contents. The "alt" tells the Kindle text-to-speech feature what to say when it encounters the illustration. The "width" instruction provides an enlarged image in the HD tablets. And the "src" (short for source) points to the image file itself.

14 comments:

  1. This was posted elsewhere but I think belongs here:

    "So, is 600*800 not the correct image size for images within content? In that case, what do you think is the optimal width and height for formatting books"

    I've only ever used the 600x800 model. Some are trying something on the order of 1000x1333. In the revision of my Guide, I finessed it by specifying width=100% (others suggest width=98%). -- NJ

    ReplyDelete
    Replies
    1. With the popularity of bigger tablets including the 8.9 inch Fire HD, I now upload images 800 pixels wide (by however tall). Even that won't fill an HD screen, so I also use width="100%" to make it expand to fill the available space.

      Delete
  2. When I use your suggested html for images, and send the book to validator dot w3 dot org each illustration generates an error. Here's one of them.
    *********
    Line 3810, Column 100: Bad value 98% for attribute width on element img: Expected a digit but saw % instead.
    …happy"><***tag img inserted here *** alt="A Happy Couple" width="98%" src="HappyCoupleSmall.jpg"/>
    Syntax of non-negative integer:
    One or more digits (0–9). For example: 42 and 0 are valid, but -273 is not.
    *********
    The book seems to publish without an problem and the illustrations look OK. Should I be concerned?

    ReplyDelete
    Replies
    1. Mine validates okay. Are you enclosing 98% in straight quotes? (Sorry I am so late in replying to this.)

      Delete
  3. Like you I wasn't particularly happy when I saw the images produced for a Kindle liquid paper display on a Kindle Fire HD and other high resolution displays. I came across this problem when I downloaded a copy of our book 'Stones, Stars and Solutions' which contains two large table images, the first of which can be seen at http://www.jaydax.co.uk/avestedinterest/TheMessage.htm The table is both colored and patterned to make its data understandable no matter what ereader it appears on. The original version was fine on the early Kindles and other ereaders but then displays went high-resolution and problems started. On these displays the images converted from mobi format became unreadable.
    Your code works but needs to be limited to the maximum size of the image on ultra high resolution displays. Once its maximum size is reached it should then be centered in the display. Using HTML's max-width code doesn't seem to work well in ebooks.
    I've tried using SVG code as follows:
    <div class="image">
    <svg xmlns="http://www.w3.org/2000/svg" class="sgc-1" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1011 720" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image alt="Image of translated text" height="720" width="1011" xlink:href="../Images/newimage002.jpg"></image>
    </svg>
    </div>
    The image class being:
    .image {
    display: block;
    margin-bottom: 0.25em;
    text-align: center
    }
    This holds the image to a maximum width and fills the screen on smaller displays. It's not without problems though:
    • The image is not centered
    • Not all sites can read SVG code - Goodreads for one.
    • The alt text is ignored when ereaders read the text aloud.

    Seems there is no satisfactory solution which covers all readers under all situations - or at least I haven't discovered one yet.

    ReplyDelete
    Replies
    1. You may be pushing e-readers beyond their capabilities!

      Delete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Hi NJ - Actually, I have a different question now. I have horizontal maps (jpgs) that measure 800 wide x 400 high. I am using the Kindle 2.92 previewer on my laptop. If they are turned 90 degrees they are fully legible and easy to read, but on a computer you'd have to turn your head. They are too small if put in horizontally. What do you think about using them vertically?

    ReplyDelete
    Replies
    1. On the tablets, a horizontal image inserted vertically will drive the reader crazy. I have encountered this in a book from a NY publisher. When you turn the tablet 90 degrees, the image will flip, so it's always the wrong presentation. The only way to read the map was to lie on my page and turn on my side, very annoying. There's nothing wrong with a strong horizontal--it gives you room to put a caption on the same page!

      Delete
    2. (I was lying on my bed, not on my page! Then I turned on my side, so that I saw the tablet as vertical while its internal gyroscope thought it was horizontal.)

      Delete
  6. Ahhh... I see here that you have id="disc" instead of id ="#disc" as in the book , because the # is causing a sigil validation error. Incase someone else having the same problem.

    ReplyDelete
    Replies
    1. OMG, you're right! It's now fixed (5th Edition; should be available in a few hours).

      To onlookers: the "#" in front of an ID tells the browser to look for the item in the same web page. (All e-books are basically web pages, and all Kindles are basically web browsers.) So it belongs in the pointer--the table of contents, for example--but not in the object pointed to.

      (I don't think it should have affected the validation in this case, though....)

      Delete
  7. Sorry for the dumb question, but I'm new to all this html stuff in e-books. I've done bits of html in websites, etc, but I don't know how to even see the html in an e-book file, so I therefore can't insert the width="100%" thing.

    I saved by pics at various pixels from 600-900 width, using GIMP, then exported them at various levels of low quality (20-50%) to make the file sizes smaller. They're all small on all versions of kindles on the preview and the downloaded preview on my actual kindle and tablet. The bigger files (900 pixels, 50% quality) are bigger, but nowhere near the full size of any screen.

    Could you give me a hint about where to try the width="100%" thing? Thanks so much.

    ReplyDelete
    Replies
    1. Well, let's say you are writing in Word. Save / Export the Word doc as "web page filtered." That gives you an html file that you can open in any text editor, including Notepad that comes with every Windows computer. Find the pointer to the image. Then change it so that it looks something like this:

      img src="discman.jpg" width="100%"

      See Step 8: Adding Illustrations in my Guide

      Delete

English only. No links. Keep it clean.