Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 03-11-2013, 06:24 AM   #1
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
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?
Derek R is offline   Reply With Quote
Old 03-11-2013, 09:08 AM   #2
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,182
Karma: 7180223
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
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.
Toxaris is online now   Reply With Quote
Old 03-11-2013, 09:15 AM   #3
Pablo
Guru
Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.
 
Pablo's Avatar
 
Posts: 757
Karma: 3058207
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>
In this example, the cover is 1200x783 pixels.
Pablo is offline   Reply With Quote
Old 03-11-2013, 09:32 AM   #4
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
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?
Derek R is offline   Reply With Quote
Old 03-11-2013, 09:43 AM   #5
Pablo
Guru
Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.
 
Pablo's Avatar
 
Posts: 757
Karma: 3058207
Join Date: Mar 2009
Location: Rosario, Argentina
Device: SONY PRS-505, PRS-T2
Quote:
Originally Posted by Derek R View Post
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".
Pablo is offline   Reply With Quote
Old 03-11-2013, 09:57 AM   #6
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
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"?
Derek R is offline   Reply With Quote
Old 03-11-2013, 10:03 AM   #7
Pablo
Guru
Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.Pablo ought to be getting tired of karma fortunes by now.
 
Pablo's Avatar
 
Posts: 757
Karma: 3058207
Join Date: Mar 2009
Location: Rosario, Argentina
Device: SONY PRS-505, PRS-T2
Quote:
Originally Posted by Derek R View Post
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.
Pablo is offline   Reply With Quote
Old 03-11-2013, 10:38 AM   #8
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
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.
Derek R is offline   Reply With Quote
Old 03-11-2013, 11:46 AM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,310
Karma: 4898871
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Pablo View Post
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).
Jellby is offline   Reply With Quote
Old 03-11-2013, 11:50 AM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,499
Karma: 19471833
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
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 is offline   Reply With Quote
Old 03-11-2013, 11:51 AM   #11
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,499
Karma: 19471833
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Pablo View Post
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.
JSWolf is offline   Reply With Quote
Old 03-11-2013, 12:22 PM   #12
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
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>
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?

Last edited by Derek R; 03-11-2013 at 01:02 PM.
Derek R is offline   Reply With Quote
Old 03-11-2013, 01:05 PM   #13
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,182
Karma: 7180223
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Quote:
Originally Posted by Derek R View Post
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 is online now   Reply With Quote
Old 03-11-2013, 01:30 PM   #14
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,182
Karma: 7180223
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
Just enter the correct dimensions of the actual picture and it will work.
Toxaris is online now   Reply With Quote
Old 03-11-2013, 01:59 PM   #15
Derek R
Connoisseur
Derek R began at the beginning.
 
Derek R's Avatar
 
Posts: 87
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.
Derek R is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 02:52 AM.


MobileRead.com is a privately owned, operated and funded community.