It’s taken some trial and error and reading the official Kindle specifications (so you don’t have to), but I think I now have a good idea of how the Kindle handles images. So before I go into the details, here are some things to bear in mind.

1. The Kindle likes to resize images to the width of the page. Initially, I was annoyed by this feature but having thought about it, I’m beginning to think it makes sense. The reason for this is simply the multitude of devices that can run Kindle software – an image precisely sized for the Kindle won’t look the same on a smartphone
2. It’s not possible to size an image to fill the screen. Only the cover is allowed to do this
3. The maximum dimensions for a single image are 500px x 600px (the 500px is the most important dimension, as it represents the maximum width – height will obviously vary)
4. The maximum file size for a single image is 127KB. You can upload a larger image to MobiPocket Creator or Calibre, but they will resize them. It’s a far better idea to alter them yourself in a photo editor within this size limit, rather than to rely on these conversion programs
5. Wrapping text around an image isn’t possible in Kindle format. All you can really do with an image is align it to the left, centre or right.

File formats

The Kindle supports two formats: JPEG (.jpg or .jpeg) and GIF (.gif). The choice of which one to use is fairly simple:

• Use JPEG for photos. Compress them to the best-available quality within the 127KB size limit. If this is difficult, you can reduce the number of colours in the image in your photo-editor, which will also reduce the file size
• For line-art, drawings and tables, use the GIF format. The reason for this is that the GIF compression algorithm results in sharper lines and less jaggedness than JPEG.

Amazon recommends using colour images wherever possible, to use on colour-enabled devices; if you do use colour, check how they look in black and white; some colour images do not convert well.

Inserting an image

The code for inserting an image is quite simple:

<img src="myimage.jpg"/>

Remember that filenames are case sensitive and the code assumes your image is in the same folder as your HTML file.

Alignment

By default, an image will be left-aligned. As I’ve discussed, for a typical photo, you should just let it fill the screen, but for small pieces of line art, centre (or even right) alignment may be desirable.

Add this to the CSS:

p.imagecentre {text-indent:0; text-align:center;}
p.imageright {text-indent:0; text-align:right;}

And add this to the HTML:

For a centred image:

<p class="imagecentre"><img src="image.gif"/></p>

For a right-aligned image

<p class="imageright"><img src="image.gif"/></p>

Fixing the image size

For small images (such as graphical section breaks or small illustrations at the start of chapters), you’ll want to fix the image size.

To do this, you need include the width and height of the graphic in pixels, otherwise the Kindle will resize them upwards. If you’ve forgotten what size you cropped them to, these values are usually available in the information pane of the window; if not, right-click on the graphic icon and select Properties, where you’ll find the dimensions.

For example:

<p class="sectionbreak"><img src="image.jpg" height="50px" width="100px"/></p>

A sample file

The following downloads are based on the first chapter of Alice in Wonderland and have a centred image at the start of the chapter. It looks a little large on the iPhone preview, but fine in all other formats.

Alice in Wonderland: zip file, containing HTML, image and dummy cover image
Alice in Wonderland: .prc file file – will open in the Kindle/Kindle Previewer

Tags: images