Reply
Frequent Contributor
Thriller-Writer
Posts: 28
Registered: ‎01-05-2013
0 Kudos
Accepted Solution

Cover page size

I don't know what the sizes are supposed to be for the website and the nook itself, because I think they're different. I use Sigil, and the one I have comes out massive. Anybody have answers?

Distinguished Correspondent
Mrs-Smith
Posts: 782
Registered: ‎08-12-2010
0 Kudos

Re: Cover page size

:smileyhappy: I replyed to your message, but I'll post it here too for everyone else who might be curious.

600x900 seems to fit damn near perfect for Nook Color/Tablet. Also for that other popular ereader :smileytongue:

 

 

Hope this helps :smileyhappy:

 

 

Correspondent
eB00k
Posts: 63
Registered: ‎12-09-2012

Re: Cover page size

Hi Thriller-Writer,

 

PubIt! would like two different size images and that's what I submit. They want the cover image inside your eBook to be optimized for the screen size of the Nook. They want the marketing image that you upload separately to be much larger because they may want to use it in print advertising.

 

The image that is supplied inside your ebook is the biggest challenge because there are now three different Nook screen resolutions (not counting an infinite range of screen sizes for the Nook app on a PC or Mac). B&N's PubIt! ePub Formatting Guide calls for a 600 x 730 pixel image size. But this guideline is from 2010 when 600 x 730 pixels was the available space to display the ebook on the 600 x 800 pixel screens that were used by all Nook e-readers in 2010.

 

Nowadays we have the following three Nook screen resolutions to consider:

 

Nook Simple Touch: 600 x 800 pixels

Nook HD: 900 x 1440 pixels

Nook HD+: 1280 x 1920 pixels

 

My philosophy is to use the size that offers the best compatibility with the most Nooks, new and old. So I use a 600 x 730 pixel cover image according to the 2010 guidelines.

 

For the marketing image, I submit the largest allowable image. In this case a 2054 x 2500 pixel image. I don't remember where I read it (probably a PubIt! FAQ) but they do list a size range for the marketing images that is much larger than the internal ebook cover image.

 

Chances are the shape (aspect ratio) of these dimensions won't match your cover image exaclty. In that case, use the longest dimension. For example, size the internal image so its longest dimension doesn't exceed 730 pixels. Size the marketing image so its longest dimension doesn't exceed 2500 pixels.

 

I hope that helps...

 

Kind regards, David

Frequent Contributor
Thriller-Writer
Posts: 28
Registered: ‎01-05-2013
0 Kudos

Re: Cover page size

It helps a great deal. I just needed the measurements because I'm having a friend design the cover, and I wanted to be able to give her the appropriate measurements. (I actually was making the mistake of putting the marketing size image in my Sigil display; that's probably why I was confused.) But I appreciate your help.

Contributor
Gayze
Posts: 22
Registered: ‎02-15-2010
0 Kudos

Re: Cover page size

Thanks for this topic, as it explains a lot.  I use Sigil as well and formatted my first ebooks for my original first generation Nook.  I now have that unit, a Simple Touch and a new HD+ and the covers of my old ebooks look like "****" on my HD+.  They take up about a quarter of the screen.

 

I notice that with other books I purchase, all of which are in epub format on B&N, and even books uploaded by people who go through Smashwords, the cover images will change size to match the size of the screen. I can open the same book on all three readers, and all three look fine.

 

With my own books, not so much.  What fits the Simple Touch screen is tiny on the HD+.  What fits the HD+ screen isn't even viewable on the other two, it's so huge.  (Likewise with Nook for PC, HD+ covers are way too large and you can only see a portion of them).

 

I know that in Sigil we can edit the html code containers for the book.  Is there anything we can put into the code to tell the reader to resize the image to fit the screen?  Some code or script either in the image, in the header codes for the cover image section... anywhere....  I'd love to see my own books looking as good ... or at least approaching that goal! ... as the other books I purchase from B&N.

 

--Gayle

 

 

 

Correspondent
eB00k
Posts: 63
Registered: ‎12-09-2012

Re: Cover page size

[ Edited ]

Hi Gayle,

 

First, I think you will need to have a separate html file for your cover. Don't try to add the cover image onto the beginning of a larger html file. This is because my suggestion (below) will make global changes to the page and body margins which you will not want to affect the rest of your ebook. For this reason, I'll define the css definitions locally in the cover.html file instead of in the styles.css file where they are usually placed in a typical ePub.

 

Here is my suggestion. You'll have to test it to make sure it works (I make no promises). It assumes that your cover file is a jpeg named "cover.jpg" and is located in an "Image" folder parallel to the folder wherein the cover.html file resides. Obviously you'll need to substitude your own relative path and image file name if they are different.

 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Cover</title>
    <style type="text/css" title="local_css_override">
        @page {
            padding: 0em;
            margin: 0em;
        }
        body {
            text-align: center;
            padding: 0em;
            margin: 0em;
        }
        div {
            padding: 0em;
            margin: 0em;
        }
    </style>
</head>
<body>
    <div>
        <img src="../Images/cover.jpg" alt="cover" style="height: 100%"/>
    </div>
</body>

 

I don't know how expert you are with html and css but most of the css definitions above are focused with removing the page margins that otherwise would be placed around the cover image. The body text-align tag is set to "centered" which will cause the cover image to be centered left to right on the page.

 

The scaling is accomplished at the end of the img style tag with "height: 100%".

 

Let us know if this works.

 

Kind regards, David

Contributor
Gayze
Posts: 22
Registered: ‎02-15-2010
0 Kudos

Re: Cover page size

Hi David,

 

Thank you so much, and I'm both laughing out loud and kicking myself.  I came to the same "Oh, my, how simple could it be???" realization just a little while ago, tested it on all three of my Nooks and Nook for PC, and it works great.  I didn't have to do anything with the css, but just enclosing the image in a div tag worked wonders.  Yes, I did use a separate section/xhtml page for the cover image by itself.

 

I set the height of the div tag to height="100%", and then set the height of the image to 90%.  That left me a border but I didn't mind that at all, and it still filled the screen of all of my devices pretty well. 

 

I started with a fairly large image (about 1800 pixels and a resolution of 300ppi so that it looked nice and sharp on the HD+).

 

So easy to do!  Now to get cracking replacing my ebooks online!  I'll probably play with removing the border via your css idea on some of them, too.

 

Thanks so much!  Hope this helps others, too!

 

--Gayle

 

Correspondent
eB00k
Posts: 63
Registered: ‎12-09-2012
0 Kudos

Re: Cover page size

[ Edited ]

Hi again, Gayle,

 

I just finished testing my code from the previous post and it seems to work well with one notable exception. By setting the height of the cover image to be 100% of the display, it is possible for the left and right edge of the image to be cropped by the Nook e-reader software if the shape of the cover image is wider than the shape of the Nook display.

 

For example, suppose you use a cover image that is 2000 x 1500 pixels (a common 4:3 aspect ratio). What will happen when this image is displayed on a Nook HD with a 1440 x 900 pixel screen. Assuming that all of the 1440 x 900 pixels are available for the ebook (this may not be the case because some may be reserved for touch controls) then the image will be scaled to 1440 x 1080 pixels in order to preserve its shape.

 

But the Nook HD display is only 900 pixels wide so the width of your image will be cropped by 180 pixels. If part of the title text or author name is in this area, it won't be visible.

 

The exact details of how many pixels are really availabe in the Nook to display the ebook don't really matter. What matters is this: Does the shape of the cover fit the shape of the ebook display area. If the cover shape is wider, part of the left and right sides will be cropped and the user won't see them. If the cover shape is narrower, then you'll see a margin along the left and right sides.

 

You could try scaling the cover to fit both the height and width of the Nook's display area but I don't recommend it. Why? Because that would distort the shape of your cover image. Another thing you could do is scale the cover to fit the width of the Nook display instead of the height. But then the top and bottom of your image could be cropped.

 

My recommendation is to stick with scaling only the height if you decide to take this approach. And try to keep the shape of your cover a little less than 4:3 so it will be less likely to be cropped.

 

What we need (and I, as a programmer, crave this kind of control) is the ability from the html code to discover the pixel dimensions of the e-reader on which our ebook is being read and the ability to automatically choose whether to scale to the height or the width. Then the cover image would be as large as possible without ever being cropped. Sadly, this capability does not exist—yet.

 

In summary, I think you've got a solution and my guess is this is what the professional publishers are doing. But you have to live with the fact that scaling your cover may cause it to be cropped on some Nook displays. And considering the wide range of possible displays for the Nook Android app, iOS app, PC software and Mac software, it is bound to happen.

 

Kind regards, David

Correspondent
eB00k
Posts: 63
Registered: ‎12-09-2012
0 Kudos

Re: Cover page size

Hi Gayle,

 

I just saw your reply (I was working on my followup post during the time you posted yours).

 

Scaling to 90% may be a nice solution to avoid the left and right being cropped on some displays. Let me know what your experiments reveal.

 

Kind regards, David

Frequent Contributor
SF50
Posts: 111
Registered: ‎07-18-2011
0 Kudos

Re: Cover page size

Uhm ... how about:

 

style="height:100%;max-width:100%"

 

 

Think it could work?

Correspondent
eB00k
Posts: 63
Registered: ‎12-09-2012
0 Kudos

Re: Cover page size

[ Edited ]

Hi SF50,

 

I don't think it would because the shape of the cover art will be distorted if "max-width: 100%" ever kicks in. Please correct me if I'm wrong, but "max-width: 100%" will not affect the height when "height: 100%" is in place.

 

What I'd like to avoid is distorting the cover art. Therefore, if the width is reduced, I'd like the height to be reduced by the same proportion.

 

If "max-width: 100%" will override "height: 100%" then it would be perfect.

 

Kind regards, David

Frequent Contributor
SF50
Posts: 111
Registered: ‎07-18-2011
0 Kudos

Re: Cover page size

ebook:

 

ISBNs I know. This stuff, way less, so a lot of what I'm about to write is mostly assumption that could easily be wrong.

 

The way I understand it is that max height will go to 100% unless max width hits 100% first. So I believe, not sure, it will keep dimensions. Let me know if you get a chance to test this and how it works out cause I'd like to know which was it works out.

 

Thanks,

SF

 

 


eB00k wrote:

Hi SF50,

 

I don't think it would because the shape of the cover art will be distorted if "max-width: 100%" ever kicks in. Please correct me if I'm wrong, but "max-width: 100%" will not affect the height when "height: 100%" is in place.

 

What I'd like to avoid is distorting the cover art. Therefore, if the width is reduced, I'd like the height to be reduced by the same proportion.

 

If "max-width: 100%" will override "height: 100%" then it would be perfect.

 

Kind regards, David




Contributor
Gayze
Posts: 22
Registered: ‎02-15-2010
0 Kudos

Re: Cover page size

When I first messed with the div tag, having done oldstyle html for decades now, it occurred to me that, as a rule with html anyway, an item inside of a container will size to fit not the page, but the container.

 

By setting the div height tag to 100%, therefore, and the image to 90%, that would put the div tag height meeting the screen parameters, and the image height to 90 percent of *that*, not of the screen.

 

Unless your image is way out of the standard ratio range, that way it "shouldn't" overlap any of the four sides of the screen.  ... I think. <G>

 

But so far it fits really well, standard ratio of width to height image in just a div tag set up as above, on original Gen-1 Nook, Simple Touch, Nook HD+ and Nook for PC.

 

Correspondent
eB00k
Posts: 63
Registered: ‎12-09-2012
0 Kudos

Re: Cover page size

[ Edited ]

Hi SF50 and Gayle,

 

I've tested both of your suggestions. Sadly, none of them appear to work.

 

Setting "max-width: 100%" while "height" is also used causes the aspect ratio of the image to distort whenever the shape of the image is wider than the shape of the e-reader display area. The "max-width" property has no affect on the "height" property.

 

Fiddling with the size properties of div did nothing to overcome this.

 

I do not view this as a problem that is limited to weird cover image shapes. Quite the contrary, I view it as a problem for weird e-reader display shapes. PubIt! does not allow cover images to be weirdly shaped and they will reject them if they are. PubIt! is much more strict with this than Amazon KDP. PubIt! wants cover images to have a roughly 4:3 portrait aspect ratio. They will reject square and landscape shapes. Amazon KDP is fine with square (but I don't know about landscape).

 

The problem is greatest with Nook apps and software and increasing numbers of customers are electing to use apps and software on the Android, iOS, Windows and Mac device of their choice. In these cases—especially the Windows and Mac Nook software which allow the shape of the e-reader to be changed—it is easy to make the shape of the ebook display area narrower than the cover image.

 

After searching for a solution, I've learned two things:

 

First, this problem of maintaining the aspect ratio of an image while resizing it to fit a container with just html has been a problem for a long time. As far as I can tell, there is no solution at present.

 

Second, a new property was proposed last year by the CSS 3 standards commitee which will provide a solution in the future. It is the "object-fit" property and setting it to "contain" will do exactly what I want. Namely, allow an image to be resized to the maximum size of the container without distorting its aspect ratio.

 

But this won't help us now. Who knows when the Nook will ever support CSS 3, let alone a new property that is just now being rolled out. Then there would be the problem of backward compatibility with older Nooks.

 

In summary, here are our choices:

 

1 - Use "height: 100%" by itself to make the cover image fill the height of the Nook display and risk the width being cropped if the shape of the cover image is wider than the e-reader display.
 
2 - Use "height:" by itself but set it a little under 100% (say, 90%) to reduce the above risk.
 
3 - Add "max-width: 100%" to prevent the cover image from being cropped in favor of it being distorted if the shape of the cover image is wider than the e-reader display.
 
4 - Use a combination of 2 and 3 to both reduce the risk but prevent the image from being cropped in favor of a little distortion.

 

Now if some brilliant programmer can come up with a solution that works on most Nooks, I'll be very happy, indeed!

 

Kind regards, David

Frequent Contributor
TSCerys
Posts: 101
Registered: ‎12-25-2010
0 Kudos

Re: Cover page size

I don't do any CSS coding stuff(I let someone else/a program do it for me), but I've started including covers in my B&N books, so I figured I'd toss in my two cents.

 

I always upload 2:3(WxH) size pictures(and put those same sizes in the book) and this seems to work out well for the clipping issue.  The covers do seem to lose a tiny amount at the bottom sometimes, but it's mostly unnoticeable and not a huge issue, I don't think.  I typically have a 1% width/height black outline around all of my cover art, and that's close to as much that gets cut off with the aspect ratio I use(maybe a slight bit more, but only at the bottom).