1. Technology

Using Images in Kindle Books

Creating Great Images for Ebooks

By

Kindle Paperwhite

Kindle Paperwhite

Image courtesy Tatsuo Yamashita

It's easy to add images to your Kindle books via HTML. You add them to your HTML the same as you would any other web page, with the IMG element. But there are some things you should consider:

  • Where are the images stored relative to the HTML?
  • How big are the images (both in dimensions and file size)?
  • What file format are the images?
  • Is the image line art or a photo?
  • Is the image in black and white or color?

Where to Store Images for Your Kindle Book

When you're writing the HTML to create your Kindle book, you write it as one large HTML file, but where should you put the images? It's best to create a directory for your book and put your HTML in there, and then put a sub-directory inside for your images. This would have the directory structure:

/my-book/
  my-book.html
  /images/
    image1.jpg
    image2.gif

When you reference your images, you must use relative paths, rather than pointing to the location of the image on your hard drive. An easy way to tell if you've done this right is to look for backslash characters, multiple slashes in a row, the word file:, or any hard drive letters like C:\ in the image src URL. In the above directory structure you would reference image1.jpg like this:

<img src="images/image1.jpg">

Note that there is no slash at the beginning of the URL because the images/ directory is a sub-directory of the one the my-book.html file is in.

The other way to test that you have the URLs correct is to change the directory name of your book directory (above that would be /my-book/ and then open the HTML in a web browser. If the images still show up, then you're using relative paths.

Then when your book is complete and you're ready to publish you would zip the entire “my-book” directory into one ZIP file (How to Zip Files in Windows 7) and upload that to the Amazon Kindle Direct Publishing.

The Size of Your Images

Just like with web images, the file size of your Kindle book images is important. Larger images will make your book much larger and slower to download. But remember that the download only happens once (in most cases), and once the book is downloaded the image file size won't affect the reading. But a low quality image will. Low quality images will make your book harder to read and give the impression that your book is bad.

So if you have to choose between a smaller file size image and a better quality one, choose better quality. In fact, Amazon guidelines explicitly state that JPEG photos should have a quality setting of at least 40, and you should provide photos in as high a resolution as you have available. This will ensure that your images look good no matter what the resolution of the device viewing it.

Your images should be no more than 127KB in size. I recommend setting the resolution to 300dpi or higher on your images and then optimizing only as much as you need to get the file size down to 127KB. This will insure that your images look as good as possible.

But there is more to size than just the file size. There is also the dimensions of your images. If you want an image to take up the maximum amount of screen real estate on the Kindle, you should set it with an aspect ratio of 9:11. Ideally, you should post photos that are at least 600 pixels wide and 800 pixels high. This will take up most of one page. You can create them larger (for example 655x800 is the 9:11 ratio), but creating smaller photos can make them harder to read, and photographs smaller than 300x400 pixels are too small and may be rejected.

Image File Formats and When to Use Them

Kindle devices support GIF, BMP, JPEG, and PNG images in the content. However, if you are going to test your HTML in a browser before loading it to Amazon, you should use just GIF, JPEG, or PNG.

Just like on web pages, you should use GIF for line art and clip art style images and use JPEG for photographs. You can use PNG for either, but keep in mind the quality versus file size information I mention above. If the image looks better in a PNG, then use PNG, otherwise use GIF or JPEG.

Be careful when using animated GIFs or PNG files. In my testing, the animation worked when viewing the HTML on a Kindle, but then would be removed when processed by Amazon.

You cannot use any vector graphics like SVG in Kindle books.

Kindles are Black and White, but Make Your Images in Color

For one thing, there are more devices that read Kindle books than just the Kindle devices themselves. The Kindle Fire tablet is full color and the Kindle apps for iOS, Android, and desktops all view the books in color. So you should always use color images when possible.

The Kindle eInk devices display the images in 16 shades of gray, so while your exact colors don't show up, the nuances and contrasts do.

Placing Images on the Page

The last thing most web designers want to know when adding images to their Kindle books is how to position them. Because Kindles display ebooks in a fluid environment some alignment features are not supported. Right now you can align your images with the following keywords using either CSS or the align attribute:

  • top—Aligns the top of the image with the top of the current line
  • texttop—Aligns the top of the image with the top of the text in the current line
  • absmiddle—Centers the image vertically in the current line
  • middle—Centers the image vertically in the middle of the text of the current line
  • absbottom—Aligns the bottom of the image with the bottom of the current line
  • bottom—Aligns the bottom of the image with the baseline of the text in the current line (same as baseline)
  • baseline—Aligns the bottom of the image with the baseline of the text in the current line (same as bottom)

But the two alignments left and right are not supported. Text will not wrap around images on the Kindle. So you should think of your images as a new block below and above the surrounding text. Be sure to check out where page breaks occur with your images. If your images are too large, they can create widows and orphans of the surrounding text either above or below them.

©2014 About.com. All rights reserved.