In Kindle Formatting Tips: Part 1, we talked about why you should format your book in HTML and explored some principles to get you started. This segment deals with images. I am going to stick with references to Kindle 2 for now, since it is the most widely used device. The Kindle 2 (viewable) screen dimensions are 520px wide by 622px high.
Introduction: Kindle shows images in black and white. Even if you include color images, they will show as grayscale images on Kindle. For best results, when you resize your images, convert them to grayscale so you can make contrast adjustments as needed.
How to organize images: Images should reside in the same directory as your HTML file, or in subdirectories if you have a lot and want to keep them organized. Here is a sample file structure: » /kindle-folder
» kindle-edition.html
» kindle-edition-styles.css
» photo-cover.jpg
» photo-text-bullet.gif
» photos-1.jpg
» photos-2.jpg
» photos-3.jpg
How to reference images: Link your images as you would in any HTML document, using relative links (not absolute). Using the structure above, the HTML file would contain the cover with a link like this: <a href="photo-cover.jpg">
Cover image: For best results, create a cover image that is 520px x 622px. This means you may have to resize and slightly re-arrange elements of your cover to fit these proportions. The first image at right shows the graphic quality of a cover image. Inline images: You can use images in your copy, but you will have to experiment a bit to get them to appear correctly. Place the cursor in your text, link to the image, and adjust the alignment (absolute-middle usually works) until it looks right. The second image at right shows an inline image.
Header images: Sometimes, you may want to use an image header to set apart a section of text, rather than just an <hr> or paragraph return. One option is creating an image 520px wide (and not very tall). Place it on its own line, and Kindle will do the rest. The third image at right shows a header image.