Writing, publishing, geekdom, and errata.

Inserting Images: So You Want to Make an eBook?

This post is part of So You Want to Make an eBook?. I'm releasing this book in sections on my blog, but when it's all finished I will offer the whole thing as a single eBook. Everyone who donates toward its production (use the coffee cups to the right, note that it's because of this effort) will get a free copy of this eBook. You can find all the posts here.


Images are, to put it mildly, annoying to write about. The problem is that
there are so many different options and graphics editing programs out
there, so giving specific advice is difficult. The key things you
need to know how to do:

Crop an image

Create a screen capture

Save as a PNG or JPG or GIF

Change color depth

Change resolution

The instructions on how to do these operations should be covered in the help file for your favorite image manipulating program. I've used four different programs that had radically different mechanisms for doing the same operation, so trying to guess what software you're using is just going to confuse us both. The good thing is that these operations – especially the top three – are very common and present in nearly any graphics editing program.

I'm most familiar with Irfanview ( http://www.irfanview.com/ ) which works well on Mac & Linux with WINE - see http://www.irfanview.com/faq.htm#Q53 ). It's simple and does most of the operations above pretty simply.

Paint.Net is another good alternative for Windows ( http://www.getpaint.net/ ). The GNU Image Manipulation Program ( http://www.gimp.org/ ) is crossplatform and powerful, but has a much steeper learning curve. There are a lot of good tutorials for the GIMP, though, such as the ones on http://gimp-tutorials.net/

With any amount of luck, you already have a cover. Otherwise, find yourself a graphic designer or artist to create one for you. (Seriously - unless you've had training in graphic design, the odds are that you aren't nearly as good as you think you are.) The primary purpose we'll be using images for here are for tables. Still, the same advice works for other illustrations that you may have for your work, like a separator image - like this one:

* * *

Anyway, tables.

Tables are not well supported, since the size of the display screen is going to vary.

Remember the PDF you originally created? You can use that or your original source document. Bring it up so that the table is nice and legible,
then create a screen capture. Crop it as closely as possible, and then resize it so that no side is larger than 500 pixels. If your table is especially large, you might want to consider rotating it sideways, and making the longer side 700 pixels or so. This ensures complete compatibility. Larger sizes are doable… but you run the risk of making your tables running off the screen. Shrinking it further is also problematic, because then the text in your tables becomes illegible.

After resizing the image, you want to decrease the color depth. You can almost always decrease it to 256 colors (8 bits per pixel) or 16 colors (4 bits per pixel) while keeping the image quality. Remember, we're talking tables here. You can get away with 16 colors with greyscale images, but keep your full-color images full-color.

Avoid the temptation to make it a black and white image. I'm not sure why, but they render badly on several eReaders. Also, transparency is a tricky thing - it renders properly with ePub but looks like a negative in Mobi format. A white background is usually sufficient.

Save the file as a PNG, with a decent amount of compression. (Compression levels of 6-7 are usually pretty good, and are the default on many programs.) You can use JPG if you like, but the tradeoffs are not worth it. By decreasing the color depth and keeping the resolution low a PNG formatted file should not be significantly larger but look better. You can also try the GIF format, especially if we're talking about many, many tables.

You'll put the images in the text like this:

<div id="image01" style="text-align:center"><img src="myimagename.png" alt="table"/></div>

Obviously, src refers to the file name of the image. The id section ("image01" in the example above) must be unique to each image. The alt section ("table" above) will be the text shown if the image cannot be shown for some reason. Because I'm using the example of using a table as an image, that's why the alt tag says "table". If it was a section divider image, you might want to have your alt tag be alt=" * * * " instead.

If you want to put the images in a separate sub-folder, you can do so, but you shouldn't have to with the naming scheme we have here. Again, it's about the complexity of your book. I just completed a conversion with over 600 images, and you bet they were all in a separate folder!

This post was part of So You Want to Make an eBook?. I'm releasing this book in sections on my blog, but when it's all finished I will offer the whole thing as a single eBook. Everyone who donates toward its production (use the coffee cups to the right, note that it's because of this effort) will get a free copy of this eBook. You can find all the posts here.


Edward said...

What's the ID part for? What happens if you don't use it?

If you're using the same image over and over, like a divider image, do you still need to assign individual IDs to each instance of that image?

arch2ngel said...

What about cover illustrations? What pixel size and resolution do we want to save those files as? Is 700 x 500 pixels a good guideline for the cover illustration, or is that only for large tables? I definitely plan to hire a graphic artist for the cover, but I'm assuming I'll need to tell them what the dimension requirements are...right?

Also, how do color images work with the Kindle? Do we want to make a greyscale version of images for the Kindle, or is it better to leave it as a color image (having insured that it looks good in greyscale before doing so)?

Edward said...

I can actually answer some of those questions, Arch2ngel. Amazon's requirements for cover images are:

Horizontal: 500 pixels minimum
Vertical: 1280 pixels minimum
Aspect Ratio: 9:11 displays best
Resolution: 72 dpi
Color: RGB
Format: jpeg or tiff

Internal image requirements are more vague:

Format: jpeg, gif, png, bmp
Size: 127 KB max

But yeah, 500 x 700 sounds good.

Barnes & Noble's cover image requirements are much less specific:

Sides: between 750 and 2000 pixels
Format: jpeg
Size: 5KB to 2MB

As for color images and Kindles... I'll let Steve answer that.

Steve Saus said...

I saw some different size recommendations here: http://webbishbooks.com/2011/01/kindle-maximum-image-size/.

You can get away with not assigning an id - but if there's a way to do that and pass epubcheck, I'm not aware of it. I assign a new id each time I use the same image to stay on the safe side and ensure maximum compatibility.

zvi said...


In an HTML file, an ID has to be unique, so you can't use the same ID over and over. If you want to name multiple things the same thing, so you can manipulate them all in the same matter, then you want to give them all the same class, as Steve had us do with italics, for instance.

Steve Saus said...

Oh, I forgot to mention. Use color for your cover art. If you have some serious reason for trying to keep the file size tiny, you can reduce the number of colors, but you really shouldn't have to do this.