Check the quality of the images

InDesign does a pretty good job of putting the images into your epub. But you should check this, and improve it where you can. Liza Daly of Threepress Consulting provides these priorities for images in epub:

• They should always be in colour.
• The epub spec requires that all images have alt text in their img tags.
• Bigger is better (recommended 600px wide).
• Avoid resizing images using XHTML to define width or height.

Make images resizable (optional)

This is optional. The instructions below are what has usually worked best for us at EBW, but there are many ways to handle images in epubs, and ideal solutions will vary from book to book.

Each image in the ebook should be made resizable for best results in ereaders. To do this, replace the image reference in the relevant xhtml with this code:

<div align="center">
   <img src="images/arthur.jpg" alt="Arthur Attwell" />
   <p>Arthur Attwell</p>
</div>

• Change the imagebox_small class if you like to another class, depending on your preference and what you put in your CSS. (In a moment you’ll add this to your CSS, so see below. We use defaults imagebox_small, imagebox_medium, and imagebox_large, using the small and medium to prevent tall images breaking clumsily over an ereader’s “pages”.)
• Change image.jpg to the file name of the image. (Note that if your images are in a folder in the OEBPS folder, this should be the path to the image, e.g.images/image.jpg.)
• Image title should be the title of your image. (This alt tag is required by the epub specification. Among other reasons, it helps the visually impaired and those reading on systems that aren’t showing images.)
• The <p></p> line is optional. Use it if you want to add captions (which you can’t do in InDesign before exporting to epub). Put the caption between the <p> and </p> tags.

Now, add the following code to the CSS file. It controls the image and caption boxes:

/* Controls images boxes and captions */

.imagebox_large {
	width: 100%;
	padding: 0.50em;
	margin: 0.50em 0 0.50em 0;
	border: solid 1px grey;
}

.imagebox_medium {
	margin: 0.05em auto 0.05em auto;
	width: 50%;
	padding: 0.50em;
	border: solid 1px grey;
}

.imagebox_small {
	margin: 0.05em auto 0.05em auto;
	width: 20%;
	padding: 0.50em;
	border: solid 1px grey;
}

.caption {
}

• Add any formatting rules for captions as you prefer. (E.g. use the same style as your main bodytext, but with a smaller font size and/or italic style.)
• If you don’t want your images to have borders, simply change the CSS (e.g. border: none).
• You can change these or add other image-box classes based on how you want your images to appear.