10-13-2009, 03:35 AM | #1 |
Erotica Writer
Posts: 102
Karma: 106
Join Date: Jul 2007
Location: Tulsa, OK
Device: ipad, Sony Reader PRS 505, Cybook 3
|
tips for adding images in epub
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 |
10-13-2009, 07:34 AM | #2 | |
The Grand Mouse 高貴的老鼠
Posts: 72,195
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
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 Quote:
|
|
Advert | |
|
10-13-2009, 07:39 AM | #3 | ||||
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
Quote:
Quote:
|
||||
10-13-2009, 10:57 AM | #4 |
Erotica Writer
Posts: 102
Karma: 106
Join Date: Jul 2007
Location: Tulsa, OK
Device: ipad, Sony Reader PRS 505, Cybook 3
|
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? |
10-13-2009, 11:06 AM | #5 | |
The Grand Mouse 高貴的老鼠
Posts: 72,195
Karma: 308792702
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
Quote:
|
|
Advert | |
|
10-13-2009, 11:17 AM | #6 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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).
|
10-13-2009, 12:07 PM | #7 |
Erotica Writer
Posts: 102
Karma: 106
Join Date: Jul 2007
Location: Tulsa, OK
Device: ipad, Sony Reader PRS 505, Cybook 3
|
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? |
10-15-2009, 11:19 AM | #8 |
Erotica Writer
Posts: 102
Karma: 106
Join Date: Jul 2007
Location: Tulsa, OK
Device: ipad, Sony Reader PRS 505, Cybook 3
|
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). Last edited by hapax legomenon; 10-15-2009 at 11:25 AM. |
11-26-2009, 03:27 PM | #9 |
Junior Member
Posts: 1
Karma: 10
Join Date: Nov 2009
Device: PRS-600
|
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. |
01-22-2011, 02:59 AM | #10 |
Member
Posts: 12
Karma: 10
Join Date: Aug 2010
Device: none
|
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. Last edited by Lily123; 01-22-2011 at 03:02 AM. |
01-22-2011, 04:59 AM | #11 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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. |
01-22-2011, 05:38 AM | #12 |
Member
Posts: 12
Karma: 10
Join Date: Aug 2010
Device: none
|
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. |
01-22-2011, 07:56 AM | #13 |
Member
Posts: 12
Karma: 10
Join Date: Aug 2010
Device: none
|
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. |
01-22-2011, 08:23 AM | #14 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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. |
01-22-2011, 12:32 PM | #15 |
Member
Posts: 12
Karma: 10
Join Date: Aug 2010
Device: none
|
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. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Adding epubs to iTunes with cover images | sartori | ePub | 31 | 09-30-2010 12:39 PM |
Adding Images To Ebook | gtshadow | Calibre | 3 | 09-29-2010 11:23 AM |
EPUB tips from Adobe | AprilHare | Workshop | 1 | 12-20-2009 04:59 PM |
Tips on creating EPUB | Student1 | ePub | 3 | 03-22-2009 12:41 AM |