Best Practices for Ebook Front Matter: Cover Image

Expert publishing blog opinions are solely those of the blogger and not necessarily endorsed by DBW.

Best Practices for Ebook Front Matter: Cover ImageThe front matter of a book communicates a lot of helpful and important information to readers. But publishers and authors often find themselves wondering how to handle that information in their ebook files. In the next few installments of my column here on Digital Book World, I would like to delve into some best practices, ideas and options for these opening and ending parts of your ebook. We will begin this series by talking about cover images.

Note: As is my standard practice, the examples below all contain markup that is suitable for EPUB 3 files. If you are still creating an EPUB 2 file for some reason, your mileage may vary.

Every ebook file should include a cover image. The common practice is to display the cover image inside its own HTML file at the beginning of the ebook. To satisfy the broadest range of retailer requirements, cover images inside EPUB files should be created according to the following specs:

  • File type: JPG or PNG
  • File name: Can be anything, but some retailers like it to be the ISBN.
  • Color: RGB (CMYK is not allowed)
  • File size: Less than 5MB
  • Dimensions: At least 1200px on the shortest side, no larger than 4 million pixels (width x height).
  • Transparency: None
  • Content: It is best to only include the book title and the author name on your cover image. Some retailers or distributors may not allow price, email addresses, website addresses or other information.

In the early days of EPUB file creation, it became common to wrap cover images inside an <svg> tag to try to force the reading systems, especially Adobe Digital Editions, to properly scale and center the image. However, this hack can cause problems on some reading systems, and it is not necessary for proper image display today.

I always recommend using standard HTML and CSS to scale your cover image (and all internal images). The HTML can be written like this:

<body class=”fullpage”>

<section id=”cover” epub:type=”cover”>

<img id=”coverimage” src=”images/cover.jpg” alt=”cover image” />

</section>

</body>

The <section> tag includes the proper epub:type attribute to show semantically that this document/section is the cover image. The <img> tag also includes an alt attribute that says what the image is for accessibility purposes.

The following CSS, adapted from my Images Single File sample, could be used to properly scale the cover image:

section#cover {

text-align: center;

display: block;

height: 95%;

}

img#coverimage {

padding: 0;

margin: 0;

height: 95%;

}

img#coverimage:only-of-type {height: 95vh;}

I like to add some additional code to my cover image styling to maintain more control over the page view. Specifically, I add a class name to the body tag (in this case, fullpage) and assign zero margin and padding to it, like this:

body.fullpage {

margin: 0;

padding: 0;

}

Additionally, in EPUB 3 you can use the renditions feature to tell the reading system that you do not want the page to display in a two-page spread if the reading system has a reason to display the book that way. To do this, add properties=”rendition:spread-none” to the spine item for the cover HTML file. You may also want to add the default renditions declaration to the metadata to ensure that the reading system knows that automatic page spreads are fine throughout the rest of the book, like this: <meta property=”rendition:spread”>auto</meta>. Renditions are not widely supported in reading systems at this time, but this prepares your file for the future. Additionally, the rendition:spread values are intended for use in Fixed Layout EPUB files, but I have heard from “people in the know” that this usage should be acceptable in reflowable, as well.

Some publishers have also adopted the technique of adding linear=”no” to the cover image HTML file in the OPF spine. However, linear=”no” is not supported on most reading systems, and in those places where it is supported, it just makes the cover image not show up in the regular flow of content of the book. I do not recommend including this in your EPUB.

In your OPF file, there are two ways to mark the cover image so that reading systems can display the proper image in the user’s library. The standard EPUB 3 approach is to add properties=”cover-image” to the manifest listing of the actual cover image file (not the HTML file). It is also a good idea to include the EPUB 2 method to ensure older systems can properly display the cover image. This involves adding <meta name=”cover” content=”coverimage” /> to your OPF metadata section. Note that the value of the content=”coverimage” attribute should point to the actual ID of the cover image in your EPUB. Also note that some reading systems will still not display the image in the library for sideloaded EPUB files, even with this markup in place.

That’s essentially all you need to know to add a cover image to your EPUB file. In the next article, we will discuss the copyright page.


To get all the ebook and digital publishing news you need every day in your inbox at 8:00 AM, sign up for the DBW Daily today!

13 thoughts on “Best Practices for Ebook Front Matter: Cover Image

  1. Michael W. Perrya

    Great advice. I have an ebook troubled by some of the issues you discuss, but I hate to break open those files lest I break something. I also suspect that steps that seem obvious to you might not be to someone like me.

    Any chance you might write a set of app-controlled scripts that’d let us mere mortals apply these tweaks as we choose? I’d be happy to pay for it on Apple’s app store.

    –Mike Perry, Inkling Books

    Reply
  2. Angelique

    This looks like good information, but it is all a foreign language to me, someone who is getting ready to format my first book and who has not completed any classes in computer language, etc. Is there a way to tell me what all this is in normal language?

    Reply
  3. Joshua Tallent

    @Michael Perry: Unfortunately, some of these best practices are just not something you can do with off-the-shelf tools. There is no reason you could not create a script to do it all for you, but that’s a bit more work than most ebook creators are comfortable with.

    @Angelique: Honestly, if this is all beyond your skill level at the moment, I would recommend you hand off your ebook development to a professional who does it full time until you have had some time to learn HTML, CSS, and EPUB creation. It will be much easier to learn what you need to learn when you are not pressed to get your first ebook done on a deadline. I can recommend some good freelancers if you send me an email.

    Reply
    1. Rob Siders

      Just a head’s up… the sample code in the post may cause some issues if anyone tries to use it as-is after copy-and-pasting it. The CMS has converted the quote marks from straight to typographer’s quotes.

      Reply
  4. Rob Siders

    I’m curious about something… why set the image size to 95% of the section which is 95% of the container (for lack of a better word)? Why not 100% of 90%, for example?

    In any case there’s good stuff here. Thanks for sharing it.

    Reply
    1. Joshua Tallent

      Rob, the CSS is intended to work across a wide range of devices that handle image scaling in different ways. Some devices only recognize scaling on the container, some only on the image, and others only on the image with a viewport value. It is not perfect, but it does get the job done in most devices. Go to the Images Single File link in the article for more info and a sample file. However, please do not consider my code to be either foolproof or perfect. It is an example and you should definitely test it and make sure it works for you.

      Reply
  5. rakhi

    @ Joshua Tallent

    Awesome guidance. I have a digital book harried by an issues’ percentage you talk about, however I would rather not tear open those records for fear that I break something. I additionally suspect that strides that appear glaringly evident to you won’t not be to somebody like me.

    regards
    rakhi

    Reply
  6. Jessica Ray

    This is something good”” “Best Practices for Ebook Front Matter” This looks like great data, however it is every one of the a remote dialect to me, somebody who is inspiring prepared to organize my first book and who has not finished any classes in script, and so on. Is there an approach to let me know what this is in typical dialect?

    Reply

COMMENT

Your email address will not be published. Required fields are marked *

*