View Full Version : Optimal cover dimensions for epub?


Derek R
03-11-2013, 05:24 AM
What would currently be best practice for creating epub covers in terms of dimensions so that they are compatible (or display reasonably) on most devices?

Having investigated this some time back I have been using 600 x 800px since.

However, I'm wondering is that still a safe bet. What brought me to ask is that when testing a mobi on Kindle Previewer the 600 x 800 cover became so small on the Kindle Fire HD 8.9. This I have dealt with by using cover dimensions of 1563 x 2500px for the mobis. That takes care of Kindle.

But what is now the safest way to approach covers for all the various devices that read epubs?

Toxaris
03-11-2013, 08:08 AM
There is none actually. Apple now demands a large cover and as you already found out, there are more sizes available now.
What you can do, and what I recommend, is using a somewhat larger cover (although the 600x800 can be used) and putting it in a SVG wrapper. That will ensure that it is page filling, independent of the dimensions of the screen. The code for such a wrapper is mentioned several times in various topics already. I don't have it readily available right now.

Pablo
03-11-2013, 08:15 AM
Here it is:


<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 783 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1200" width="783" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>


In this example, the cover is 1200x783 pixels.

Derek R
03-11-2013, 08:32 AM
Thank you, chaps - that seems like sound advice. I did look briefly at svg before, but for some reason I opted not to use it at the time. I think that some devices like ADE don't support it, but I don't know what happens in those devices in such cases - does the cover just not show?

Also, looking at the code you kindly supplied, in my ignorance I'm not sure if the cover would alter proportions to fit both width and height of screen, or simply fit the height and maintain the same width to height ratio?

Pablo
03-11-2013, 08:43 AM
Also, looking at the code you kindly supplied, in my ignorance I'm not sure if the cover would alter proportions to fit both width and height of screen, or simply fit the height and maintain the same width to height ratio?

That depends on the "preserveAspectRatio" parameter. In my example, the image is expanded or compressed keeping proportions. If you want the image to fill the screen, I believe you should change the value to "none".

Derek R
03-11-2013, 08:57 AM
Getting the image to fit all screens sounds as if it might cause some horrible distortion in certain cases. The way you have it in the example sounds good, but is there a particular reason for setting width to "783" as opposed to "800"?

Pablo
03-11-2013, 09:03 AM
Getting the image to fit all screens sounds as if it might cause some horrible distortion in certain cases. The way you have it in the example sounds good, but is there a particular reason for setting width to "783" as opposed to "800"?

No, no, those are the original dimensions of the cover image in the example. You should select a cover image with a resolution high enough for all screens, which will result in different degrees of compression, depending on each device.

Bear in mind that different devices might have different screen aspect ratios, so if you use "none", your image could be distorted in some devices.

Derek R
03-11-2013, 09:38 AM
So if I start creating covers for epubs at 800 x 1200 with an svg wrap as above then the image will just rescale appropriately on different devices, maintaining the 3 x 4 ratio? I apologize if I am being a bit dense.

Jellby
03-11-2013, 10:46 AM
Bear in mind that different devices might have different screen aspect ratios, so if you use "none", your image could be distorted in some devices.

Even a single device will have different proportions when in portrait or landscape orientation (and yes, some people like reading in landscape).

JSWolf
03-11-2013, 10:50 AM
You do not want to use arbitrary numbers. You want to use the numbers from the dimensions of the cover. There is a bug in ADE where if you use arbitrary numbers, you do get an incorrect aspect ratio. And you should not have the cover be full screen if that is not aspect ratio correct. It just looks awful that way. Keep the cover aspect ratio correct regardless of the margins on the left/right sides of the screen.

JSWolf
03-11-2013, 10:51 AM
Bear in mind that different devices might have different screen aspect ratios, so if you use "none", your image could be distorted in some devices.

No could be distorted. WILL BE distorted.

Derek R
03-11-2013, 11:22 AM
What I was thinking of doing is creating new cover images for epubs with the actual pixel dimensions 800 x 1200 and use the svg wrapper on those (in place of fixed 600 x 800 I was making). I didn't mean - though probably didn't make clear - that I would use the 3/4 ratio on existing images that aren't exactly that ratio.

So, would the following code be what I am after?

<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 800 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1200" width="800" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>

And just going slightly off topic, I stopped using "height=" and "width=" attributes with images a while back because I thought they were deprecated. Would I be better to give the cover image a class and use "img {width: xxx; height: xxx;}"? Ditto for the svg tag?

Toxaris
03-11-2013, 12:05 PM
I think that some devices like ADE don't support it, but I don't know what happens in those devices in such cases - does the cover just not show?

It works on all the ADE devices I know, including the Sony models.

Toxaris
03-11-2013, 12:30 PM
Just enter the correct dimensions of the actual picture and it will work.

Derek R
03-11-2013, 12:59 PM
Thank you. I will give that a go this week. I know that I went slightly off-topic with the deprecated height and width tags, but I'll try making an ID for the svg and img tags and put those attributes into the stylesheet. If I encounter problems I'll be back to the forum for the great assistance it provides.

Derek R
03-11-2013, 05:17 PM
As a postscript I should add that I've just had a "duh" moment. My wit is obviously getting dulled with age. The dimensions that I should have given for the svg are 900 x 1200 to maintain a 3/4 ratio. You were obviously too polite to point out my idiocy.

Nigelinspain
03-13-2013, 08:17 AM
Please excuse my ignorance, but where exactly does this code go?

Is it between the <body> and </body> or between the <head> and </head>?

Iīve tried putting this in to a couple of different places but when I view it in book view is Sigil it shows the image the same huge size as before but with a light blue tinted box above it.

Derek R
03-13-2013, 08:26 AM
Here is the full code for the cover page I created using the svg wrapper:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>In the Celtic Past</title>
<link href="../Styles/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1200 1600" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1600" width="1200" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
</body>
</html>

This has worked a treat. Just change the dimensions in the viewBox and image tag to the actual dimensions of your image. Obviously, you would have your own title between the title tags... oh, and change the name of the image if yours isn't "cover.jpg".

Pablo
03-13-2013, 08:27 AM
Please excuse my ignorance, but where exactly does this code go?

Is it between the <body> and </body> or between the <head> and </head>?

Iīve tried putting this in to a couple of different places but when I view it in book view is Sigil it shows the image the same huge size as before but with a light blue tinted box above it.

The image goes inside the body.
If you see the image in Sigil's Book View, it will scale to fit the size of the view window (keeping aspect ratio, if configured to do so).

Nigelinspain
03-13-2013, 10:28 AM
Many thanks - thatīs very helpful.

Alda
03-24-2013, 04:53 PM
Hello,

I followed the instructions above for my cover image, using this code to wrap it in:

<div>
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 783 1200" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="1200" width="783" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>

However, the cover does not show up in Adobe Digital Editions, for some reason (what I'm using to preview the ePub version of my book). It looks fine in Calibre, though.

Anyone have an idea what the problem is?

Thanks!

Alda

dgatwood
03-25-2013, 01:35 AM
*shrugs* Mine works, and the only things obviously different between your snippet and what I'm using for my cover are that my svg tag also has the following:

xmlns:svg="http://www.w3.org/2000/svg"
id="blahblahblah"


and I have a pile of CSS, no standalone="no" in the <?xml ...> tag, and the namespace for SVG declared early on:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">


I'd be surprised if any of those differences mattered, though. It might be a difference in what you're doing in the OPF file.

Alda
03-25-2013, 08:49 AM
Very strange. If I just upload a regular cover, without the wrap code above, it appears in ADE. The moment I put in the wrap code, the cover is no longer there.

It's a shame, because the wrap code was working really well in other respects.

So I guess I'm back to square one, wondering what the optimal cover size is to use so it will look good in ADE and elsewhere. Any thoughts?

Turtle91
03-25-2013, 12:01 PM
So I guess I'm back to square one, wondering what the optimal cover size is to use so it will look good in ADE and elsewhere. Any thoughts?

iBooks and Amazon both have minimum image size requirements for their covers. I would use whichever one is larger - that way you are covered... (Definitely intended ;) )

Then just use your img {max-height:100%; max-width:100%} in your CSS to make sure your image is constrained by whatever your screen size happens to be - while keeping the proper aspect ratio.

Yes, your ePub might be slightly larger because if the larger cover image, but at least it should work properly on all most devices.