Inside the ePub Format: The Cover Image

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:

Sample cover image.

 

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.

eBookstore standards

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:

The ePub cover-image files as they display in an eBook reader.

 

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:

The cover page file as displayed in an open Kindle book.

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.

If you are not familiar with the opf file, I suggest you read this introductory post, and this opf file post.

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.

[xml] <manifest>
<item id="coverimage" media-type="image/jpeg"
href="FUNDCover.jpg" properties="cover-image" />
<any other manifest files…>
</manifest>[/xml]

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:

The book_cover.xhtml file.

 

Inside the xhtml file, I place the following code:

[html] <?xml version="1.0" encoding="utf-8" standalone="no"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en" lang="en">
<head>
<title>Microsoft Project 2013 2016 Fundamentals</title>
</head>
<body>
<figure id="cover-image">
<img src="FUNDCover.jpg" alt="Microsoft Project 2013 2016 Fundamentals" />
</figure>
</body>
</html>[/html]

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:

[xml] <manifest>
<item id="coverimage" media-type="image/jpeg" href="FUNDCover.jpg"
properties="cover-image" />
<item id="bookcover" media-type="application/xhtml+xml"
href="book_cover.xhtml" />
<any other manifest files…>
</manifest>[/xml]

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.

[xml] <spine toc="ncxfile">
<itemref idref="tocnav" />
<itemref idref="bookcover" />
<itemref idref="id0" />
<itemref idref="id1" />
<itemref idref="id2" />
</spine>[/xml]

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.

Summary

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.
2016-10-21T13:42:38+00:00

11 Comments

  1. Fatih Cekic October 12, 2017 at 8:47 am - Reply

    Hi, I tried the to add cover image to my books. I can see some books covers but I can not see the some book covers on my iPhone. I can see all covers on my MacBook, but the same book I can not see the cover on my iPhone. I try to solve this problem myself but I can not be successful. I success to see the book cover on my iPhone but now the Book cover double on my Macbook.

    Sincerely,

    • Bill Raymond October 12, 2017 at 4:24 pm - Reply

      What products are you using? Sometimes the Kindle Reader will not display your cover or display the correct cover so you might need to delete and re-install the app or clear the cache where the book cover images are located. If you are not seeing the cover on a certain device and are using ePub with Apple iBooks then there is a good chance your image is not following the correct sizing requirements. I suggest you check out this link: http://www.ebookcoversize.com/

      • Fatih Cekic October 12, 2017 at 4:46 pm - Reply

        I use Mac Os High Sierra and iOS 11. I see the covers on my MacBook, but I can not see them on my iPhone. When I add cover to books with using an app, I can see the covers on my iPhone too. But this time the covers are double on my MacBook.

        • Bill Raymond October 12, 2017 at 5:02 pm - Reply

          Which apps are you using that are not displaying the cover images?

          • Fatih Cekic October 12, 2017 at 5:19 pm

            I use these apps:

            -Adobe Digital Editions (ACSM),
            -ePUBDRMRemoval & Ultimate (To remove DRM and add cover image but this time the cover images seen double on my MacBook, but it is normal on my iPhone.)
            -ePub Zip-Unzip 2.1.1
            -BetterZip.

  2. Bill Raymond October 12, 2017 at 5:27 pm - Reply

    So you are using ACSM to read the books and that is the app showing multiple cover images or no cover images?

    • Fatih Cekic October 12, 2017 at 5:36 pm - Reply

      I can read books iBooks too. ACSM everything is OK, the problem is only iBooks. I adjust image myself but I see multiple images or no images on my iPhone. Also there is no problem in iBooks on my MacBook.

    • Fatih Cekic October 12, 2017 at 5:46 pm - Reply

      I replace the original code with this;

      Bin Dokuz Yüz Seksen Dört

  3. Fatih Cekic October 12, 2017 at 5:47 pm - Reply

    Bin Dokuz Yüz Seksen Dört

  4. Bill Raymond October 12, 2017 at 6:09 pm - Reply

    Go to the Contact Us page and send me a link to your file. I am happy to take a quick look. This usually happens because the book cover is cached. You usually need to delete the book from your phone and re-add it.

    • Fatih Cekic October 12, 2017 at 6:30 pm - Reply

      Ok, I send my email informations. I will be very happy if you help me.

      Sincerely,

Leave A Comment