Internet, Networking, & Security Web Development 34 34 people found this article helpful The Best Way to Use Images for Kindle Books Get the facts on great graphics By Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated March 06, 2020 Tatsuo Yamashita / Flickr Web Development CSS & HTML Web Design SQL Tweet Share Email 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 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 book.html style.css images image1.jpg image2.jpg image3.jpg When you reference your images, you must use relative paths, rather than pointing to the location of the image on your hard drive. That means that you should reference them relative to the "my-book" folder. For example: <img src="images/image2.jpg"> The path to the image file doesn't start all the way back at your hard drive. Instead, it assumes that everything starts in the "my-book" folder, where your HTML file is located and follows the path from there. This convention is here because your book is going to be distributed to thousands(hopefully) of devices, and they'll all have different directory structures, meaning that the full path to where your book is located will change. However, the relative path between your image and the root "my-book" folder will remain the same, wherever it ends up. 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. This will ensure 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 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 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. Using it looks something like this: <img src="images/image1.jpg" align="middle"> The align attribute accepts the following values: topbottommiddleleftright If you need more control, CSS is the way to go. 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.