the online wysiwyg epub editor

Adding images to your epub books

leave a comment »

The Open Publication Structure recognises the following image media-types:

  • image/jpeg
  • image/gif
  • image/png
  • image/svg+xml

If you want to insert images in your epub books they must be in one of these formats. Then it’s a two-stage process; first you add the image to the manifest so it becomes part of the book; then you insert it in the content documents where you want it to appear.

To add an image to the manifest, select the book in your library then click on the Media menu option. The following screenshot shows the Media window for a new epub created by opubWriter, which has no images initially. The screenshot was taken using the Chrome browser; other browsers have slightly different wording for the file-upload option.

Media screen

Media screen

There’s a button that lets you browse your computer so you can locate the image you want to include (‘Choose file’ in Chrome, ‘Browse’ in Firefox and Internet Explorer). When you have selected an image, you click the Upload button to add the image to your epub’s manifest. From that point on, it’s embedded in your book.

In the current release of opubWriter there’s a limit of 100Kb for an individual image. Bearing in mind that your book might be read on a smartphone, you probably want to limit the size of image you include.

Of lesser importance in a technological area where speed and storage capacity increase relentlessly, including large images will rapidly increase the size of the .epub file and lead to slower transfers.

The next screenshot shows the Media screen after uploading a logo in the png format.

Media screen with uploaded image

Media screen with uploaded image

The name of the image is shown in a caption beneath it, and there’s a delete button to the side that allows you to remove the image.

The delete action will remove the image from the manifest. In the current release of opubWriter, there is no check whether or not the image is referenced by any content documents so, for the moment, it’s your responsibility not to delete images that are used by your book.

As you add more images, they are listed one after the other in the order they appear in the manifest.

Having added images to the manifest, the next task is to place them in your content documents. You do this on the editing screen. Taking an earlier example, we might be on the title page as shown below.

Content screen

Content screen

On the second toolbar row, there’s an icon for inserting an image. It looks like this:

When you want to insert an image, first go to the Media screen and make a note of the filename. In this example, we will include on the title page the image that we just uploaded. The URL of the image, relative to the content documents, is shown below the image:


Next, position the cursor at the point in the document where you want the image to go. To place the image below the date, go to the end of the line showing the date and press Enter. Click on the ‘insert image’ icon; the following dialogue screen is displayed into which you enter the URL of the image.

Insert Image Dialogue

Insert Image Dialogue

You can make more sophisticated adjustments to the image using the Appearance and Advanced tabs in this window.
When you have finished changing settings, click on Insert. The image is placed in your document at the cursor position, as shown in the following screenshot.

Inserted Image
Inserted Image

You can see that the image was inserted at the cursor position, but that’s not the full story. The logo was inserted at its full size, as seen on the Media screen. After you insert an image in a content document and click on it, sizing handles will appear which you can use to get the image the size you want.

The size could have been adjusted as part of the Insert Image dialogue. That’s fine for a single image but suppose you have several related images that you want to place in a content document and you would like them all to have the same styling? The answer is to use CSS – Cascading Styling Sheets. You would place the layout and appearance settings in a stylesheet (see the upcoming tutorial on Styles and Style Usage) and then apply your image style to each image. This is achieved by setting the CSS Class on the Appearance tab of the Insert Image dialogue.


Written by netkingcol

March 20, 2010 at 10:05 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: