03-11-2013, 05:24 AM | #1 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
Optimal cover dimensions for epub?
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? |
03-11-2013, 08:08 AM | #2 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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. |
03-11-2013, 08:15 AM | #3 |
Guru
Posts: 970
Karma: 4999999
Join Date: Mar 2009
Location: Rosario, Argentina
Device: SONY PRS-505, PRS-T2
|
Here it is:
Code:
<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> |
03-11-2013, 08:32 AM | #4 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
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? |
03-11-2013, 08:43 AM | #5 |
Guru
Posts: 970
Karma: 4999999
Join Date: Mar 2009
Location: Rosario, Argentina
Device: SONY PRS-505, PRS-T2
|
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".
|
03-11-2013, 08:57 AM | #6 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
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"?
|
03-11-2013, 09:03 AM | #7 | |
Guru
Posts: 970
Karma: 4999999
Join Date: Mar 2009
Location: Rosario, Argentina
Device: SONY PRS-505, PRS-T2
|
Quote:
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. |
|
03-11-2013, 09:38 AM | #8 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
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.
|
03-11-2013, 10:46 AM | #9 |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Even a single device will have different proportions when in portrait or landscape orientation (and yes, some people like reading in landscape).
|
03-11-2013, 10:50 AM | #10 |
Resident Curmudgeon
Posts: 73,645
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
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.
|
03-11-2013, 10:51 AM | #11 |
Resident Curmudgeon
Posts: 73,645
Karma: 127838196
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
|
03-11-2013, 11:22 AM | #12 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
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? Code:
<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> Last edited by Derek R; 03-11-2013 at 12:02 PM. |
03-11-2013, 12:05 PM | #13 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
|
03-11-2013, 12:30 PM | #14 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Just enter the correct dimensions of the actual picture and it will work.
|
03-11-2013, 12:59 PM | #15 |
Zealot
Posts: 104
Karma: 20
Join Date: Jun 2011
Location: County Down, Northern Ireland
Device: none
|
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.
|
Thread Tools | Search this Thread |
|
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 |