Working with Images on the Kindle Fire

Thank you for visiting this eBook design tutorial. We now have an eBook design startup—BB eBooks—dedicated to helping independent authors and small presses get their eBooks formatted, converted, and ready for sale at all the major online retailers (e.g. Amazon's Kindle Store, Barnes & Noble's Nook, iBookstore, Smashwords, etc.) Please contact us for a no-obligation quote. For those writers, editors, and publishers looking to go the DIY route for eBook production (you probably are if you visited this page), we offer free online tutorials and apps to help you professionally design your eBook. Please visit our Developers page and let’s work together to improve the overall standards of eBooks. Also, please sign up for the mailing list for promotions, design & marketing tips, plus eBook industry news.

Looking for a complete guide on eBook design and development? Please consider The eBook Design and Development Guide, which contains everything you need to know about HTML, CSS, EPUB, and MOBI/KF8 to make an eBook like a pro. Pick it up at Amazon for $6.99 today.

Previous Post: Introduction to HTML for the Kindle Fire

Whether a vignette in between section breaks or a portrait of yourself playing with your cats in your workspace, images are a way to spice up your manuscript and make your eBook a more enjoyable read. While the e-ink Kindles are grayscale, the Kindle Fire, as well as other eReading devices like the Nook Color, iPad, etc., are in color. You don't need to be too concerned about including color images for some devices and grayscale images for others, because the e-ink Kindles will automatically convert color images to grayscale.

Images can be a bit tricky to work with, particularly when making them viewable on older Kindles, but they are well worth the time and effort. Do yourself a favor and get some free software such as Photoscape, to resize your images and convert them to various different formats. It may also be worthwhile to learn how to create your own images using Gimp (free) or Photoshop (expensive). For those not artistically inclined, public domain images can be acquired for commercial use at Wikipedia or at Open Clip Art. You can also purchase images for royalty-free usage at sites like iStockphoto or Dreamstime.

Important Note: Images that are used in eBooks should always be saved in RGB color model rather than CMYK, because CMYK is strictly for printing purposes. Also, Amazon advises saving images as 300 pixels per inch (300 ppi).

Image Formats Supported by Kindle

You should be aware of the different formats of images, because they should be chosen based on what type of imagery you are trying to display to your readers. The Kindle Fire supports four different formats as follows:
GIF: 256-color format that is suitable for line art, tables, and graphical text.
JPG: 16 million-color image format that can be degraded in quality to keep the size small. JPG is the most used image format and is suitable for photographs and artwork
PNG: high-quality, big-file size image format that can be used for logos, small complex images, and anything you want to look sharp.
BMP: Uncompressed image format (recommend never using due to its large file size).
SVG: Scalable Vector Graphics format that is composed of XML describing how the two-dimensional canvas should be drawn rather than pixels. As the name implies, it can be scaled to any size. This format is only supported on the Kindle Fire.

Size Does Matter for eBook Images

Why not just use the high-quality PNG format for all your images to give your readers the most sharp reading experience? Unfortunately, PNG images tend to be much larger in size than JPGs and GIFs, and the Kindles have limited space. You want to keep the size of your image files as small as possible without sacrificing too much quality. Many readers will be downloading your eBook via a cellular connection or through a crummy wireless connection at the local Starbucks. If your eBook is a huge clunker that takes up the same amount of space as a full-length movie, your reader may have a bad first impression waiting for the eBook file to download to their device.

Most importantly, size costs money. Amazon has a policy of charging a "delivery fee" to the publisher based on the size of your eBook for each one sold. It is currently $0.15/MB for any eBook with the 70% royalty option (typically eBooks selling at $2.99 or higher). So, if you are trying to sell a 5MB eBook, you would lose 75 cents per eBook. It may not sound like much, but if you plan on selling a thousand eBooks, that's $750—a full rent check for most of us. Beware of the size of your eBook.

Here are some tips to keep the file size of your images minimized:

1. For line-art, tables, and images that are text-heavy, use the GIF format, which doesn't have many colors.
2. Always consider degrading the quality of your JPGs with photo-editing software (simply cutting down the quality from 100% to 90% can half the size of the image file in some cases)/
3. Only use PNGs or SVGs when you need an image to look sharp (like your personalized logo).
4. Always cut down the image height and width to the size you want it to appear on the Kindle Fire. Since the Kindle Fire viewport is 1024x600px, you never need an image bigger than those dimensions (not applicable to the SVG format since it can be scaled to any size).
5. Amazon Kindle allows image sizes up to 256KB, but you should get each image much smaller than that. When the MOBI/KF8 eBooks is compiled, KindleGen automatically converts images greater than 127KB to a smaller size.
6. The cover image should be exactly 600x800px. A nice cover image will typically be in between 80-127KB.
7. Images within the eBook (except for the cover image) should be no bigger than 500x600px so they work properly and don't get automatically converted on older e-ink Kindles with the 524x640px viewport.

Adding Images to Your eBook

Now that you understand the various formats and how to minimize the size, it's time to start adding them into your HTML markup. The HTML tag is simply <img />; however, it's important that you include attributes. HTML attributes provide additional information about the particular element they reside in. For example, here is some markup that tells the browser or eReading device to insert the tree.gif image in the images directory with a description of "A Picture of a Tree".

<img alt="A Picture of a Tree" src="images/tree.gif" />

The src attribute (pronounced "source") defines the directory and the image filename, while the alt attribute provides an alternative description of the image in case the browser or eReader cannot render it properly. The file directory specified in the src attribute is relative to the directory where the HTML file is located. So, if your html file is in c:/temp/myebook.html, the tree image would be in c:/temp/images/tree.gif. You always need to include the alt attribute for images in order for your eBook to pass EPUB validation.

Important Note: The filename and directory specified in the src attribute is case sensitive.

Try adding an image into the elf story to see how it looks in your browser. Some example HTML would be as follows:

<p>It was not a good time for the elves residing in the woods. The warlocks had poisoned their fields and stolen all their food, the bastards.<img src="images/tree.gif" alt="A Picture of a Tree" /></p>

<p>By the time the manuscript got around to the second paragraph, everyone but one elf was dead—what a shame!</p>

Example of an Image In-Line with the Content

If you want to have the image function like a block element and not be placed in-line with the text, you can wrap paragraph tags around it like so:

<p>It was not a good time for the elves residing in the woods. The warlocks had poisoned their fields and stolen all their food, the bastards.</p>

<p><img src="images/tree.gif" alt="A Picture of a Tree" /></p>

<p>By the time the manuscript got around to the second paragraph, everyone but one elf was dead—what a shame!</p>

Example of an Image Acting Like a Block Element

In general, you should wrap the self-closing <img /> tag in paragraph tags to make it function like a block element. By using CSS to adjust the paragraph tags, you can wrap text around the image, align it, and even add drop shadows. Unfortunately, for the older e-ink Kindles, they have very limited support for where you can place the image. They must not be "floated", which means they cannot have text wrapping around them. This makes fancy typography like drop-caps impossible. There is also the problem of the older e-ink Kindles randomly resizing your images.

Avoid Automatic Resizing of Images on Old Kindles

The tree.gif image used in the above example is 179x145 pixels. Once the MOBI/KF8 file is compiled, the tree image will look okay in the Kindle Fire as well as the Kindle apps for iPhone, iPad, and Android. However, the older e-ink Kindle will completely bloat the dimensions of the image, making the aspect look ridiculous and the image appear grainy.

Example of Image Mangling in Older Kindles

To avoid the maddening automatic resizing of images on older e-ink Kindles, you can specify height and width attributes. This forces the image to display with its exact dimensions. An example of the markup for the 179x145px tree image would be as follows:

<p><img alt="A Picture of a Tree" height="145" src="images/tree.gif" width="179" /></p>

Proper Image Resizing for Older Kindles

Tip: The order of attributes does not matter inside HTML elements. For example, you could have specified the width attribute before the height attribute, and the HTML markup would be perfectly valid.

Special Note on Using SVG Images for the Kindle Fire

Since SVG images can be scaled to any size, you should always specify either a height or width attribute within the <img /> tag. By only specifying one of the attributes, the aspect of the SVG will be maintained. Some example HTML markup for an image called fancytree.svg would be as follows:

<p><img src="images/fancytree.svg" height="200" alt="A Picture of a Tree with Awesome SVG" /></p>

An SVG Image in the Kindle Fire

Unfortunately, SVG images are only supported in the Kindle Fire. Older e-ink Kindles (including the Kindle App for the iPad and iPhone) will completely ignore them and not even display the description in the alt attribute. Once you master CSS, you will learn some tricks to show the SVG image for readers with the Kindle Fire, while providing a fallback JPG or GIF for readers with older Kindles.


Next Post: Adding Audio and Video Content to Your eBook for the Kindle Fire

Working with Images on the Kindle Fire