View Full Version : Images in EPUB books


spaze
02-24-2011, 02:22 AM
Hello all,

I have been wondering about this thing and can't seem to find an answer:

If I include a JPEG image into my EPUB book, how is it processed by ebook readers? DO they scale the image to fit the page or what?

I always tend to resize the images so that the fit 600x800px matrix, but I would love to understand how readers process the images in EPUB files.

Thanks in advance!

Jellby
02-24-2011, 04:43 AM
They obey the CSS styles. If there is no width/height specified, I guess most default to the "natural" size: 1 image-pixel = 1 screen-pixel. Some readers may allow zooming an image, but most don't, and just crop the image if it doesn't fit the screen.

spaze
02-24-2011, 06:37 AM
Is it safe to presume all e-ink readers are about 600x800 in resolution? If I crop the image so that the width or height don't go beyoung the 600x800 resolution...

Jellby
02-24-2011, 07:00 AM
Is it safe to presume all e-ink readers are about 600x800 in resolution? If I crop the image so that the width or height don't go beyoung the 600x800 resolution...

All e-ink readers I know are at least 600800, but:

1) There are non-e-ink readers with smaller resolutions (smartphones, PDAs...)

2) Most readers have default margins and headers or status bars that occupy part of the screen (and sometimes cannot be disabled).

CazMar
02-24-2011, 07:11 AM
I notice the Kobo just makes the image fit the screen - so if too big it compresses it into small size, Maps suffer with this as they are too small to read. I always check that images are neither too big or at too high resolution as they can slow down devices and create over large documents. This is OK on a computer but might not be appreciated by someone downloading it to their phone. Unless you really need an image at incredible clarity a hi res huge image is a waste of space.

DaleDe
02-24-2011, 12:54 PM
The Hanlin eBook readers all reduce too large images. Small images are shown at 100% at level one zoom and will enlarge as zoom increases although they will not increase too much. If a graphic is being used as a letter for example, it will zoom when the letters zoom. This is ADE implementation. Most ADE implementations behave similarly except Sony as remained with an older version for many (most) of its models.

Adjust
02-24-2011, 05:45 PM
Hello all,

I have been wondering about this thing and can't seem to find an answer:

If I include a JPEG image into my EPUB book, how is it processed by ebook readers? DO they scale the image to fit the page or what?

I always tend to resize the images so that the fit 600x800px matrix, but I would love to understand how readers process the images in EPUB files.

Thanks in advance!

I don't worry about it, I make the cover and any full page image 600x860
(And a separate Kindle cover 600x800 to allow for the kindle conversion.)
Then in the CSS the images are sitting on a .img {max-width: 100%} problem solved.

Although Lately I've been making the height to be 100% instead of the Width...

wannabee
02-24-2011, 10:00 PM
when I asked the IT guy here to check the book on his android phone all images over 450 wide defaulted to a question mark icon. I think I'll take up Adjust's suggestion and fix it in the CSS.:thumbsup:

Coop42
03-02-2011, 07:14 PM
Mark,

Which 'droid based phone was that?

wannabee
03-02-2011, 07:26 PM
Mark,

Which 'droid based phone was that?

A Nexis One running Android 2.2 the app was Aldiko

Coop42
03-02-2011, 11:12 PM
Thanks.

HarryT
03-03-2011, 05:54 AM
That's a bug in that particular reading application; it really should not do that.

wannabee
03-03-2011, 08:12 PM
That's a bug in that particular reading application; it really should not do that.
So if it's too big should it still be visible and bleed off the screen like I've seen in ADE on the PC.

HarryT
03-04-2011, 03:36 AM
So if it's too big should it still be visible and bleed off the screen like I've seen in ADE on the PC.

All the devices I've used will resize the image to fit the screen. That seems a lot more "user friendly", don't you think?

Jellby
03-04-2011, 05:26 AM
All the devices I've used will resize the image to fit the screen. That seems a lot more "user friendly", don't you think?

As far as I remember, the Cybook Gen3 doesn't.

roger64
03-04-2011, 08:06 AM
Hi

Is this good everywhere ? This is a test file.

Big images were just under 600 x 800

All images reflowable.

Made with OpenOffice extension Writer2xhtml v. 1.1.7
Tweaked in Sigil 0.2.4 portable Linux only for % image display:
height:100%;max-width:100%; for 3 full screen
width ..%; (percentage varies) for 4 small images, including a png Tux

including a reflowable image inserted in text

wannabee
03-04-2011, 09:00 AM
OK isn't this where I came in. Totally confused about image presentation on various devices.

wannabee
03-04-2011, 09:08 AM
Hi

Is this good everywhere ? This is a test file.

Big images were just under 600 x 800

All images reflowable.

Made with OpenOffice extension Writer2xhtml v. 1.1.7
Tweaked in Sigil 0.2.4 portable Linux only for % image display:
height:100%;max-width:100%; for 3 full screen
width ..%; (percentage varies) for 4 small images, including a png Tux

including a reflowable image inserted in text
Roger64... It looks fantastic in iBooks and great in blue fire on my iPad. That's all I have at hand to check it out.

roger64
03-04-2011, 04:49 PM
Roger64... It looks fantastic in iBooks and great in blue fire on my iPad. That's all I have at hand to check it out.


Thanks for the info. I used a new piece of software still in alpha stage.
Works fine too on my antique PRS-505. :)

Adjust
03-04-2011, 08:00 PM
Yeah, Mate, it looks good here as well...
My only comment would be because you have both the Width and Height set to be 100% then the image will distort (non proportional) for example when I checked on ADE and dragged the screen in width ways the image stretches

roger64
03-04-2011, 08:30 PM
Thanks for your comment.

For the big (full screen) images I used max-width which should allow some leeway (as far as JPG 600 x 800 would go).

For the small ones, only width. Any hint on the best % commands for practical viewing welcome.

Adjust
03-04-2011, 10:50 PM
I just use either 100% or height depending on the image.
Also the correct dimensions are 600x860 (600x800 is for the kindle)

HarryT
03-05-2011, 06:58 AM
I just use either 100% or height depending on the image.
Also the correct dimensions are 600x860 (600x800 is for the kindle)

What screen has 860 pixels? That's a curious number. Why do you say that these are the "correct" dimension? Correct for what?

roger64
03-05-2011, 07:26 AM
Hi

I just found it. Adobe advises 600 x 800 for cover images, it applies of course for other full screen images http://terabook.net/how-to-optimize-epub-images-for-ebooks.html

@HarryT

Did you try it? Looks like you are a machine capitalist... :)

EowynCarter
03-05-2011, 04:29 PM
On the opus, the bottom part of the image is cut. Silly margins !

Adjust
03-05-2011, 06:18 PM
What screen has 860 pixels? That's a curious number. Why do you say that these are the "correct" dimension? Correct for what?

I got that figure from here:
http://www.pigsgourdsandwikis.com/2010/06/page-breaks-with-images-in-epub-for.html

And also when loaded in iBooks, They look more in proportion then 600x800

roger64
03-06-2011, 05:29 AM
On the opus, the bottom part of the image is cut. Silly margins !

I have no clues. Margins are set up to zero and height to 100%. Opus magna...:)

Jellby
03-06-2011, 05:41 AM
On the opus, the bottom part of the image is cut. Silly margins !

If it's the same as the Gen3, there are two issues:

1. There are default body margins, which are not overridden by simple <body> style, you have to use a class (or maybe an inline style).

2. The bottom part of the screen is indeed "reserved" for the status bar. You can disable the status bar, but you don't recover the space, it remains blank (unless the status bar was covering part of an overflowed image or something).

roger64
03-06-2011, 11:32 PM
Thanks for the tip Jellby; I did not know about it. :thanks:

I will inform the developper.