How do I add a cover (and other pictures) to my ePub?

Question

If I am creating an ePub file by hand, from scratch (following a recipe such as laid out in this question), how would I go about adding pictures to the file? In particular, is there anything special that I need to do for a cover image?

Answer 1

Images in general should be added just as they would be in HTML, with an <img> tag. The image files themselves should then be included in the OEBPS folder or a subfolder (I generally use a subfolder, personally). Each image file will need to be declared in the <manifest> section of the content.opf file. As mentioned in the epub 3.0 specifications, the cover image in particular should also have the cover-image property assigned to it in the <manifest>, like so:

<item id="cover_jpg" properties="cover-image" href="images/cover.jpg" media-type="image/jpeg" />

The <manifest> entry for non-cover images is the same, just without the properties="cover-image" bit.

That's it for plain epub, but some retailers will also ask for a <meta> element in the <metadata> section of the content.opf file declaring the cover, like so (from Amazon's Kindle Publishing Guidelines):

<meta name="cover" content="images/cover.jpg" />

Note that Amazon in particular no longer requires the <meta> bit as long as the properties="cover-image" is correctly declared.

Answer 2

I suggest you use Sigil, or another ebook creator software.

Don't start from scratch with an .html file, it's more complicated, start from scratch with a sofware. I can list the things that you can have with that kind of sofwares that you'll have automatically, and that you couldn't have with a non specialised software.

And be careful if you use a word processor, or an on specialised software, they include a lot of code that is not compatible with the ebook formats. You have to fix everything by reviewing all the code by yourself, so they are not recommendable to do that.

• First, it's good practice that you insert the cover as the first .xhtml page in your ebook.

• A good book cover should:

• Allow to read clearly, even when the image is small.

• Have a good look in a black and white reader.
• Have a good size.

Amazon, for instance, says:

Your cover image must be less than 50MB. Try to avoid compressing your files. This can affect the quality of your cover when displayed on reading devices. For the best results, images should have a minimum resolution of 300 PPI (pixels per inch).

And:

The ideal size of your eBook cover art is a height/width ratio of 1.6:1. This means that for every 1,000 pixels in width, the image should be 1,600 pixels in height. To ensure the best quality for your image, particularly on high definition devices, the height of the image should be at least 2,500 pixels. Ideal dimensions for cover files are 2,560 x 1,600 pixels.

Note: The minimum image size allowed is 1,000 x 625 pixels. The maximum image size allowed is 10,000 x 10,000 pixels.

-

• Sigil for instance automatically include the cover image in a wrapper.

The advantage, is that .SVG files have a little size, and resize very well, without losing clarity. The goal is to have the cover automatically resizing according to the reader screen, that can be very different from one reader to another.

The disavantage is that some readers doesn't support SVG (you have to check if it's the case for the reader you target, I don't know which ones, the link I mentioned tells us that they do exist.). Each time it's possible, if it's supported, use rather SVG and nothing else.

• Create a CSS sheet for the cover. Call it cover.css, not mandatory, but clearer and easier to manage.

• So insert an image in your ebook file with the software, click add a cover, choose the image as a cover (you can also right-click on the image, go in the semantic menu, and choose the cover as the semantic, those 2 ways can turn an image into a cover)

• Name the .xhtml generated by your software as cover.xhtml. Then link the cover.css with the cover.xhtml.

It's automatically made in the software by right-clicking on the .xhtml file and associate the .xhtml to a CSS, and you choose the name of the CSS file.

To make it manually, in the head section of you .xtml file:

<link href="../Styles/cover.css" type="text/css" rel="stylesheet"/>

• This is the .xhtml code generated by Sigil for the cover of my book, this is the code for the whole page:

    
    


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Cover</title>
<link href="../Styles/cover.css" type="text/css" rel="stylesheet"/>
</head>

<body class="fullpage">
  <div class="cover" id="cover">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1410 2250" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image id="coverimage" alt="cover image" width="1410" height="2250" xlink:href="../Images/cover.png"/>
    </svg>
  </div>
</body>
</html>

My CSS code in cover.css:

   .cover{
    background-color: grey;
    text-align: center;
    padding: 0pt;
    margin: 0pt;
    page-break-after: always;
    text-indent: 0;
    width: 100%;
    height: 100%;
    }

    body.fullpage {
       margin: 0;
       padding: 0;
}

The background color is not mandatory, I like it this way.
Do not forget to add an alt, as the alt tag improves the accessibility.

---

When a reader doesn't support SVG, there's another solution: you replace the SVG code by this one for Epub2, with a div that will show the cover without border, full page,

Source: https://ebookflightdeck.com/handbook/coverimage

This CSS code will insure the cover is shown without margin, full page. For Epub2 and Epub3:

body.fullpage {
   margin: 0;
   padding: 0;
}

This CSS code will insure the cover is centered:

Epub2:

div.cover {
   text-align: center;
}

Epub3;

section.cover {
   display: block;
   text-align: center;
} 

In the link I provided, they tell us to use this CSS code to force the image to scale the reader screen:

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;
}

• Now the .xtml code on the page where the cover is included:

For Epub2:

<body class="fullpage">
   <div class="cover">
      <img id="coverimage" src="images/cover.jpg" alt="cover image" />
   </div>
</body>

For Epub3:

<body class="fullpage">
   <section class="cover" **epub:type="cover"**>
      <img id="coverimage" src="images/cover.jpg" alt="cover image" />
   </section>
</body>

You can change some code, id, name, if you want, but a good practice is to name your cover image, "cover.jpg" or "cover.png" (I suggest you to make some tests with your image, if you can allow to use jpg, it's smaller, but not always clearer.), in a few cases, they enter the ISBN as a name for the cover, but cover.jpg is the most common.

---

Now, you have to check if the cover is correctly mentioned in the manifest .opf, the name of the file is content.opf. Those lines are mandatory in the .opf file:

The CSS sheet in the <manifest>... </manifest> section for Epub2:

<item href="cover.jpg" id="cover-image" media-type="image/jpeg" />

For Epub3:

 <item href="cover.jpg" id="cover-image" media-type="image/jpeg" **properties="cover-image"**/>

The image cover, in the <manifest> section too:

<item id="cover.png" href="Images/cover.png" media-type="image/png"/>

The .xhtml file in the <manifest> section too:

<item id="cover.xhtml" href="Text/cover.xhtml" media-type="application/xhtml+xml"/>

In the <metadata>.... </metadata> section, only for Epub2:

<meta name="cover" content="cover.png" />

---

I have also the cover mentioned in the guide section:

<guide>
<reference type="cover" title="Couverture" href="Text/cover.xhtml"/>
</guide>

But don't do that it's a Kindle:

Kindle Cover Image NOT to be referenced in the guide

Source: http://www.rshelton.org/2014/11/how-to-understand-spine-and-guide-in.html

For the spine, it's not mandatory. Only if you want your cover in the toc.

<spine toc="ncx">
    <itemref idref="cover.xhtml"/>
</spine>

Answer 3

I Just Use a Word Editor like Microsft Word, Google Docs, Or libre Office & Put the cover as an image filling the whole first page of the document, I would also put other images in like you would when writing in a Document. I then save it as a PDF Then Convert it to an Epub, that way you can save the formating you have done when writting.