tips for adding images in epub

[hapax legomenon]

Hi, I'm working on formatting a short story anthology where there is one image per chapter.

I'm trying to figure out some guidelines for graphics that are valid across platforms (Sony Reader, kindle, stanza, etc).

The OPS doesn't really give much help, except to say what formats are to be supported.

http://www.openebook.org/2007/ops/OP...l#Section2.3.4

I've found this info about covers on ADE
http://blogs.adobe.com/digitaleditio...the_cover.html

I am testing chapters in my browser, and I recognize that what works in a browser may not necessarily work inside a reader.

I am basically coding by hand (or more precisely, making minor adaptations to existing HTML/code which is pretty clean).

Here are some questions:

SCALING IMAGES. how do I plan for image dimensions in relation to the viewing area? Do reading systems automatically scale images? If yes, how do they figure out the optimal image dimensions to use? I want to prevent the image from encompassing 99% of the page (for example)?

IMAGE DIMENSIONS AND COMPRESSION. I took a look at Jelby's excellent Prince and the Pauper epub file https://www.mobileread.com/forums/showthread.php?t=34347, and I see that the cover is 600x800 (136KB) while the other jpegs max at 540x600 (123KB), while a lot of them are under 50K. Aside from the fact that this ebook has a lot of grpahics, are these guidelines good rules of thumbs?

WRAPPING AROUND INLINE GRAPHICS. In the ebooks uploaded, I don't recall seeing any images which are floated into the paragraphs. Is this css selector not supported or workable in reader systems?

If you don't float graphics, then any image will add extra white space. That's what I'm trying to avoid when I use images. What thoughts do you have?

Thanks for your help.

Hapax

[pdurrant]

SCALING IMAGES.
This is best accomplished with a combination of attributes on the img element, and attributes on an enclosing div or span.

For my drop caps, I code the image and text like this:

<p><span class="dropcap drop1"><img alt="I" src="../images/img0001.jpg" /></span>T being the fashion of the day to present to the public divers affecting and pathetic histories, each vying with the other in veracity and profusion of incident, I am persuaded, dear reader, that the time is now propitious to recount the dramatic fortunes of Desbarollda, the waltzing mouse.</p>

with the css looking like this:
span.dropcap { float:left; margin-top: 0.2em; margin-right:0.5em; }
span.dropcap img {width: 100% }
span.drop1 { width:10.9em; max-width: 60%}

( I've split the styling of the dropcap span into a general and specific, as my drop cap images are different widths. I couldn't specify using the height (which is the same for all of them) as then I couldn't have limited the width using max-width, as it would then resize non-proportionally in some circumstances.)

For in-line image where I don't want the text to flow around the images I've used

<div class="inline"><img alt="" src="../images/img0006.jpg" /></div>

with CSS of
div.inline { page-break-inside:avoid; margin: 0.5em 0 0.5em 0; text-indent: 0; text-align:center; clear:both }
div.inline img { max-height:100%; max-width:100%; }

Although none of the readers seem to handle the max-height:100% correctly, so it can end up (with tall thin images) with the image not fitting entirely on the screen.

It is possible to get an image to properly resize to fill the page using an svg wrapper.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet">
<image width="573" height="800" xlink:href="../images/img0032.png" />
</svg>

which I use for the cover image. It's a good idea to also specify in the CSS

body {margin:0; padding: 0; border-width: 0; }
@page {margin: 0; padding: 0; border-width: 0; }

to make sure there's no white-space around the cover image.


IMAGE DIMENSIONS AND COMPRESSION
Most ePub reading devices have screens of 600x800 or more. So for a full-screen graphic, these are the dimensions I'd be aiming at. Don't compress too much in JPEG. Storage is cheap. For ePub I'm intending to use PNG instead of JPEG. Storage is cheap.

WRAPPING AROUND INLINE GRAPHICS
This is possible, see the drop cap example above. More complicated wrapping is also possible. See the Alice in Wonderland sample hereabouts.

There's also been lots of discussion on this subject - search the ePub forum

Originally Posted by hapax legomenon

SCALING IMAGES. how do I plan for image dimensions in relation to the viewing area? Do reading systems automatically scale images? If yes, how do they figure out the optimal image dimensions to use? I want to prevent the image from encompassing 99% of the page (for example)?

IMAGE DIMENSIONS AND COMPRESSION. I took a look at Jelby's excellent Prince and the Pauper epub file https://www.mobileread.com/forums/showthread.php?t=34347, and I see that the cover is 600x800 (136KB) while the other jpegs max at 540x600 (123KB), while a lot of them are under 50K. Aside from the fact that this ebook has a lot of grpahics, are these guidelines good rules of thumbs?

WRAPPING AROUND INLINE GRAPHICS. In the ebooks uploaded, I don't recall seeing any images which are floated into the paragraphs. Is this css selector not supported or workable in reader systems?

If you don't float graphics, then any image will add extra white space. That's what I'm trying to avoid when I use images. What thoughts do you have?

Thanks for your help.

Hapax

[Jellby]

Originally Posted by hapax legomenon

SCALING IMAGES. how do I plan for image dimensions in relation to the viewing area? Do reading systems automatically scale images? If yes, how do they figure out the optimal image dimensions to use? I want to prevent the image from encompassing 99% of the page (for example)?

Readers could automatically scale down images that are larger than the screen, but as far as I know most readers don't do this with ePUB (though they do with mobipocket). With CSS you can limit the width to some percentage of the screen width (which can be 100%), but referencing the screen height probably won't work, since it's not the screen which matters, but the "container", and the container is the whole <body> element, which is as long as needed... it's a bit of a mess, and different readers work in slightly different ways, so there's no practical way to limit the image height, other than using absolute dimensions (in px, mm, em...)

IMAGE DIMENSIONS AND COMPRESSION. I took a look at Jelby's excellent Prince and the Pauper epub file https://www.mobileread.com/forums/showthread.php?t=34347, and I see that the cover is 600x800 (136KB) while the other jpegs max at 540x600 (123KB), while a lot of them are under 50K. Aside from the fact that this ebook has a lot of grpahics, are these guidelines good rules of thumbs?

I've sort of decided on 600×800 as a standard cover size for my ebooks, because that's the size of my Cybook and because it looks like a sensible size. As for the rest of the illustrations, I just scaled the original scans all by the same factor, in order to get illustrations that would more or less fit (again) my Cybook screen (note I created the mobipocket version first). At the same time, I wanted to preserve as much detail as possible, so that the same JPGs could be used for devices with larger screens/resolution.

WRAPPING AROUND INLINE GRAPHICS. In the ebooks uploaded, I don't recall seeing any images which are floated into the paragraphs. Is this css selector not supported or workable in reader systems?

Zelda made a version of "Three Men in a Boat" which uses wrapping around images, and there are some samples in the "code snippets" thread. I, however, did not find a completely satisfactory way to float images around that would work fine in all cases (changing screen size and orientation, changing font size...).

If you don't float graphics, then any image will add extra white space. That's what I'm trying to avoid when I use images. What thoughts do you have?

True, but I prefer that to some of the artifacts that wrapping text around images (especially when they are not rectangular) could create. But of course, it depends on the case. With "Don Quijote", for instance, all illustrations are full-page or at the start or end of chapters, so there's no problem. Other books have illustrated drop capitals at the beginning of each chapter, there I'd use the wrap-around text without question.

[hapax legomenon]

Thanks for your thoughts and ideas.

Pdurrant, I must confess I find the svg code rather incomprehensible.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet">
<image width="573" height="800" xlink:href="../images/img0032.png" />
</svg>


so is img0032.png 573x800?
would you just substitute the current dimensions of your image there?

[pdurrant]

Originally Posted by hapax legomenon

Thanks for your thoughts and ideas.

Pdurrant, I must confess I find the svg code rather incomprehensible.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet">
<image width="573" height="800" xlink:href="../images/img0032.png" />
</svg>


so is img0032.png 573x800?
would you just substitute the current dimensions of your image there?

Yes, just substitute in your image dimensions. Make sure you substitute in both places - one gives the size of the image, and the other the size of the image container in the svg graphic. If they don't match the image will be two small or too large.

[Jellby]

Originally Posted by hapax legomenon

so is img0032.png 573x800?
would you just substitute the current dimensions of your image there?

Note the numbers in the svg code are not necessarily pixels, they are arbitrary units, the important thing is the aspect ratio, you could have 1146 and 1600 instead, and it would be the same. Of course, it is easier to just copy the pixel dimensions of the image (if the image assumes square pixels, at least).

[hapax legomenon]

by the way, in the Cybook 3, the books are listed in the catalog as thumbnails of the cover.

I can't remember. Do any other e-ink readers use this feature? Do you see other e-ink readers using this "thumbnail view" of the library as well?

[hapax legomenon]

Wow, 3 men in a boat is exquisitely laid out and the gif drawings look good when floating. Of course, it helps that the gifs are a variety of sizes and many are quite small (under 200 px).

With regard to Prince and the Pauper, overall a good job (and a great incentive for me to get around to reading it!), but on on my prs-505, there are too many pages where a single image dominates 75% of the page without having room for text.

I've learned a lot of tricks just by looking at the source of these ebooks. (By the way, if other people have found ebooks that present graphics effectively, feel free to mention them here).

[thirdMan]

Thanks for writing this up.

Stumbled on this thread while looking for info on whether the CSS property max-height is supported by ePub readers (particularly the Sony readers). My own tests were not successful (both the Sony PRS-600 and ADE seem to ignore max-height altogether).

max-width, otoh, works exactly as you'd expect.

Still, the inability to specify a max-height in the CSS is a problem. I'll give the SVG wrapper a try, but I'm looking for a one-size-fits all solution, and I don't want to have to do that for every image.

[Lily123]

Hi,

came across this thread whilst looking for a solution to get images to scale properly on ADE and Sony Readers. Max-width & max-height did not work.

The SVG wrapper is working beautifully. However, I cannot get captions to show. This is the first time I have ever used SVG so I am probably making just a really stupid mistake.

Here is the code I am using:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="80%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1024 1595" >
<g><image width="1024" height="1595" xlink:href="../Images/Nikita.jpg" />
<text>test</text>
</g>
</svg>

What I want in the end is that the caption and in some cases a title and a caption stay with the image and are shrunk with it as required to fit the display.

Any thoughts on this???

Thanks,
Ann.

[Jellby]

You have the "viewBox" height set to 1595, and the image height to 1595 too, so there's no place for the text. Try something like:

* viewBox with 1700 height (change as appropriate), image with 1595 height, <svg> height to 100%; or

* Remove the caption from the <svg>, and put it as a normal HTML <p> outside, everything inside a <div> with "page-break-inside: avoid" in CSS.

[Lily123]

Hello from rainy Frankfurt to Sunny Spain. And thanks for your suggestions. I will try that.

Since I wrote this, I have run into other problems, as well. the svg wrap works for ADE and Sony reader, but completely bombs on my ipad. I get tiny images, less than my small finger's nail size.

The div page-break-inside: avoid I have tried to use previously and it didn't work on the ipad.

I looked at the "prince & the pauper file" - surprisingly all kinds of code that isn't working for me (s.a. max-height, etc) is working for him.

Something must have gone really haywire with my file. Darn.

Many thanks,
Ann.

[Lily123]

Hi,

I set the viewbox to 1100 and 1700. Thus there should have been plenty of room for the text - it still does not show though.

Any thoughts?

Thanks,
Ann.

[Jellby]

Height is always a problem, because the format and the reading software are not yet fully prepared for paged display. What if you set the height to 2400? does it make the image smaller? If it doesn't then the height is being ignored.

The only real solution guaranteed to work anywhere is including the text in the picture. But even then, there's no way to make sure the image will always fit in the screen, for all devices, sizes and orientations.

[Lily123]

Thank you. I had suspected that that would be the simplest, albeit a terribly time consuming solution. It really is too bad that the technology is not more mature for the various readers.

Thanks for your help!

Ann.