Cover image requirements are pretty consistent across the major eBook retailers. You will normally need to provide a cover image inside your EPUB file, as well as a cover image separate from your EPUB that is used by the retailer for marketing.
To satisfy the broadest range of retailer requirements, cover images inside EPUB files should be built according to the following specs:
It is a common practice to display the cover image as the first item in the EPUB. This is done by creating an HTML file that includes only the cover image, sometimes with special formatting to allow it to display without margins and without the page being broken into columns. Below is some sample HTML and CSS code that you can use when creating this cover image HTML document.
body.fullpage {
margin: 0;
padding: 0;
}
div.cover {
text-align: center;
}
<body class="fullpage">
<div class="cover">
<img id="coverimage" src="images/cover.jpg" alt="cover image" />
</div>
</body>
body.fullpage {
margin: 0;
padding: 0;
}
section.cover {
display: block;
text-align: center;
}
<body class="fullpage">
<section class="cover" epub:type="cover">
<img id="coverimage" src="images/cover.jpg" alt="cover image" />
</section>
</body>
Note that some publishers include their cover images inside <svg> wrappers or define a gray background image on the page. This can cause the cover to display with unsightly borders and may cause other issues that effect the reader experience. In addition, SVG is not supported on all reading systems, and that lack of support can cause problems for many readers. We recommend you stick to more simplified code like the examples above.
To force the cover image to scale to fit the screen of reading systems, we would recommend using the following CSS:
body.fullpage {
margin: 0;
padding: 0;
}
section.cover {
display: block;
text-align: center;
height: 95%;
}
img#coverimage {
height: 95%;
}
img#coverimage:only-of-type { /*overrides the previous setting, but only in newer systems that support CSS3 */
height: 95vh;
}
You can learn more about this markup and see an example of it in use here.
The EPUB 2 spec does not include specific requirements for how to define which file in the package is the cover image, but the generally accepted practice is to include a <meta> element in the Metadata pointing to the image's <item> in the Manifest. (Note: This points to the manifest ID of the image file, not to the actual image file itself.)
<metadata> ... <meta name="cover" content="cover-image" /> ... </metadata> <manifest> ... <item href="cover.jpg" id="cover-image" media-type="image/jpeg" /> ... </manifest>
The EPUB 3 spec says to specify the cover image by placing properties="cover-image" in the proper manifest <item>.
<manifest> ... <item href="cover.jpg" id="cover-image" media-type="image/jpeg" properties="cover-image"/> ... </manifest>
Typically, marketing cover images should be the largest image you have available. Other than that, the specs are similar to the interior cover image: