Optimal cover dimensions for epub? - Page 2

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:

Code:

<?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

Quote:

Originally Posted by Nigelinspain

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:

Quote:

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:

Code:

    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:

Code:

<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

Quote:

Originally Posted by Alda

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.

03-25-2013, 01:35 AM	#22
dgatwood Curmudgeon Posts: 629 Karma: 1623086 Join Date: Jan 2012 Device: iPad, iPhone, Nook Simple Touch	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: Code: 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: Code: <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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
cover art on purchsed books/ EPUB to EPUB	tongsan	Library Management	5	05-27-2011 10:23 AM
Convert to ePub - optimal settings	paulfiera	Calibre	4	01-08-2011 08:29 AM
Optimal Settings in Calibre for creating Kobo eReader EPUB Files	lchen	Kobo Reader	15	05-07-2010 05:25 PM
Optimal cover size	readyread	Calibre	4	12-19-2009 12:47 PM
PRS-500 optimal resolution for images?	ghostwheel	Sony Reader Dev Corner	5	01-01-2007 12:59 PM

03-11-2013, 05:17 PM	#16
Derek R Zealot Posts: 104 Karma: 20 Join Date: Jun 2011 Location: County Down, Northern Ireland Device: none	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.

03-13-2013, 08:17 AM	#17
Nigelinspain Member Posts: 21 Karma: 10 Join Date: Mar 2013 Device: Kindle	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.

03-13-2013, 10:28 AM	#20
Nigelinspain Member Posts: 21 Karma: 10 Join Date: Mar 2013 Device: Kindle	Many thanks - that´s very helpful.

03-25-2013, 08:49 AM	#23
Alda Zealot Posts: 104 Karma: 22 Join Date: Jun 2010 Device: none	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?

Advert

Advert