If you have been following my Inside the ePub Format series, I have mostly been talking about xml and xhtml files. For this article, I would like to switch to something a little more fun and interesting: your book’s cover image.
What is a cover image?
Imagine walking into a bookstore and seeing nothing but a bunch of white books with black title text and the author’s name. You do not want your book to be awash in a world of sameness, so you need a great cover image to set yourself apart.
The cover image should give the potential reader a sense of what they are purchasing and entice them to purchase your book. The ePub format recognizes the need for a cover image in a book and provides a specification for adding one to your eBook. There are a few ways to do this, and I cover those details here in this post.
The ePub standard says a cover image is optional. However, pretty much any book store you sell on (Kindle, iBooks Store, and so on) will require you have one.
Here is the eBook cover for my upcoming book:
There is no right or wrong way to create a book image, but here are some quick tips:
- Make sure it stands out.
- Give the potential reader a sense of what they will be purchasing.
- If you can, hire a professional designer (or use a service like 99designs.com or fiverr.com).
- Get the image in a vector-based format so you can resize it for different purposes. You will be able to output the vector image to the file type you need. See the next section on file types to learn more.
- As a best practice, your book should include the title and at least one author name.
Cover image design is a post for another day, so now I will get back to the topic at hand, using ePub cover images.
Cover image file types
The ePub 3.0 standard allows you to attach a GIF, JPEG, PNG, or SVG file.
The SVG file is the best overall because it is a vector image. Vector images are great because you can resize them however you want and they will never lose their quality.
The PNG format is a very popular format amongst designers because it is a lossless bitmap format. If you save a PNG file over and over again, the image quality will always be the same.
Check out this link this video to learn the difference betwen vector and bitmap (raster) images.
The JPEG format is another very popular image quality is very good. Unfortunately, JPEG files are a lossy format, which means if you keep editing and saving the file, the image quality will degrade over time. JPEG is very popular because images still look quite nice, and because it is a compressed file, it is much smaller than PNG.
The GIF format is also a lossy image format and not suited to eBook covers because the image quality is typically very poor. GIF was incredibly popular in the early days of the Internet because it did a great job of shrinking files. Unfortunately, the GIF format seems to put more focus on shrinking the images and not making them look too great.
Note: Most eBookstores allow you to use a TIFF file. TIFF is a high quality (and usually quite large) raster image and is usaully used for print books. The ePub standard does not support TIFF so I recommend you stick with JPEG or PNG.
Just because the ePub standard supports four different file types, does not mean the eBookstore you are selling on supports them. You will have to do some research and decide what format you will use. For example, Apple’s iBookstore prefers the PNG file format and Amazon prefers the JPEG format.
Interestingly, many eBookstores let you upload your own cover image even if it is not included in your ePub file. Some stores will even use what you upload as the final version and may not even use the file you include in your ePub file. Generally speaking, it is still a good idea to include the cover in your ePub file even if the eBookstore will use an image you upload.
What about file sizes? Every eBookstore has their unique requirements so you will want to verify the size before uploading them. While you should always follow the requirements of the eBookstore first, here is a good site to use as an initial guide: ebookcoversize.com.
The “cover-image” vs. a cover page
Most eBook readers use the cover image you designate solely to display thumbnail images on a libary page that shows all the eBooks a person owns:
These thumbnail images use the cover-image that you define within your eBook. I will discuss the use of the cover-image in a lot more detail in the following sections.
When a person opens my book in their eBook reader, the first page they see is the cover page (or the table of contents, but more on that later). Notice I said “page”. That is because I built an xhtml file that displays the book’s cover image.
The following picture shows my eBook open in the Kindle reader. The Kindle reader is displaying a custom xhtml file I built. The xhtml file displays my jpeg cover image:
Add the cover-image to your ePub file
Once you have a cover image in the size you need it, it is time to add it to your ePub.
The following code is a snippet from my opf file. For the time being, I am showing you the one line you need in the <manifest> element.
<item id="coverimage" media-type="image/jpeg"
href="FUNDCover.jpg" properties="cover-image" />
<any other manifest files…>
The id property is any name that makes sense. In this example, I type out the word coverimage. For the media-type property, I specify the file as being an image file, and specifically a jpeg file. For the href property, I specify the location and filename (note, there is no location because the jpg file is in the same folder as the opf file).
Finally, the properties property lets the eBook reader know that this is the cover image (cover-image) for the eBook. That word cover-image is a specific keyword reserved for the ePub format.
With this one line, an eBook reader will display your eBook’s cover image alongside all the other cover images when a person opens their book library.
Add the cover page to your ePub file
As stated earlier in this article, the cover-image usually only displays your book’s cover in your eBook reader’s library, not when someone opens the book to read it. To make sure your reader can see the book cover inside your book, you need to build a custom cover page. It is easy and takes only a few minutes to set up.
Using a text editor (or your favorite xhtml editor), create an xhtml file. In the following example, I name the file book_cover.xhtml:
Inside the xhtml file, I place the following code:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en" lang="en">
<title>Microsoft Project 2013 2016 Fundamentals</title>
<img src="FUNDCover.jpg" alt="Microsoft Project 2013 2016 Fundamentals" />
As you can see, there are two important elements that add the cover image picture to the cover page. First, you create a <figure> tag and then you add the picture using the <img> tag. The alt property displays the book’s title in case the eBook reader cannot display the picture.
Tip: In a future post, I cover css (cascading style sheets). I recommend you create an entry in your style sheet that centers the image horizontally on the page.
Once you have a book cover file, you can add it to the <manifest> element of your opf file as you can see in the following sample:
<item id="coverimage" media-type="image/jpeg" href="FUNDCover.jpg"
<item id="bookcover" media-type="application/xhtml+xml"
<any other manifest files…>
As you can see on lines #3 and 4, I include a new item that adds the book cover to my opf file. In this case, anit is nothing more than just a page in a book. There is no special coding I need to designate it as a book cover. The id property is a name I made up, so I could have called it mybookcover or bookcoverfile.
Most eBookstores require and/or request the table of contents display first, so I normally do that and then make the next file the book cover image.
<itemref idref="tocnav" />
<itemref idref="bookcover" />
<itemref idref="id0" />
<itemref idref="id1" />
<itemref idref="id2" />
The first itemref element displays the table of contents (tocnav) and the second displays the book cover.
Many eBook readers will skip over the table of contents and display the book’s cover image first.
Here are some important things to remember from this article:
- When you create your book’s cover image, make sure you find out all the sizes you need so you (or your designer) can get all the formats ready at the same time.
- If possible, have your artwork drawn in vector format and then output that to jpeg or png formats.
- The cover-image is a special line you put in the opf file’s <manifest> element so an eBook reader displays it on a reader’s library.
- The cover page is an optional xhtml page you manually create so the eBook reader can display it when your reader opens it on their favorite device.