02-28-2013, 09:00 PM | #1 |
Junior Member
Posts: 9
Karma: 10
Join Date: May 2012
Location: Melbourne
Device: none
|
Image handling - XGA 1024*768, full page etc
I have converted an A5 hardcopy book to an ebook and it is almost ready to distribute. I just need to make some final adjustments, especially with regard to images. Given it includes a couple of blocks of photopages I need to know how to best present quality full-page and full-width images.
I have reviewed other threads here but not really got definitive answers. Any advice will be very gratefully received. 1. Given popular hardware e-readers are all pushing 1024*768 now, should I make sure my full page images all fit within 1024*768, or should I aim for 5%(?) less in each dimension (say 973*730) to allow for reader margins? My intention is to minimise any image rerendering and hence loss of quality. 2. What style restrictions are recommended to ensure my ebook layout approximates the hardcopy on both lower and higher res screens? For example what about a class like this: max-width:100%; height:auto; Will this make sure that the image always fills the width of the screen and that the height is kept proportional? When we use max-width or width 100% does this mean 100% of the screen or 100% of the image pixel size? (This always confuses me!) Regards Trevor |
03-02-2013, 02:17 PM | #2 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
Given an image at least 600px wide, I use
width: 100%; , even though the image will become pixellated for horisontal resolutions >600px. This'll fill the entire screen width. I prefer a grainy image to a small one, but if your priority is the other way round, max-width:100% sounds like a good idea. Specifying height:auto is superfluous at best, and possibly risky at worst. CSS height in epub readers is a sorry mess. Concerning the dimensions of the image within the ebook file, you should consider the detail and quality of the source image. Given that many ereaders permit zooming of images, it makes sense to have the image dimensions big enough so that all relevant details survive. Against that must be considered the need to avoid a bloated ebook-file. I've never worried too much about re-rendering; I've generally been satisfied with the scaling done by the readers I've used. A final note concerning full-page landscape images: I've ended up rotating them to portrait mode. Virtually all readers permit switching between portrait and landscape modes, and many do it automatically if you rotate the reader. Thus it can be preferable to have a consistent viewing angle. Last edited by SBT; 03-02-2013 at 02:19 PM. |
03-02-2013, 05:20 PM | #3 |
Junior Member
Posts: 9
Karma: 10
Join Date: May 2012
Location: Melbourne
Device: none
|
Thank you SBT
Thanks SBT, you've helped confirm my course of action!
I will make all my full page images 1024*768, and specify width 100%. I agree that some pixellation will be OK and will preserve a similar look across both hardcopy and ebook. Given I have ~30 full pages I won't bloat the file with larger images up to the 2MB some distributors impose. Yes, I have noticed more readers allowing for roration and zooming these days, so therfore I won't worry about any adjustments for margins either. Smaller images I will also specify as a proportion of the page. Reading between the lines I believe you telling me that:-
Is that right? Anyway will try to test it later today. Thanks again you've got me back into it after a considerable break. Trevor |
03-02-2013, 10:32 PM | #4 |
A Hairy Wizard
Posts: 3,059
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
I also add a css to prevent the image from losing it's aspect ratio and becoming stretched.
img {max-width:100%; max-height:100%} That will allow the image to be displayed at it's maximum size without spilling off the display. Cheers! |
03-03-2013, 06:57 AM | #5 |
Junior Member
Posts: 9
Karma: 10
Join Date: May 2012
Location: Melbourne
Device: none
|
Difference width; max-width
Thanks Turtle,
Yes I do want to keep the aspect ratio preserved. However, I am still trying to get to the bottom of the difference between width and max-width. For example, are these interpretations correct?: width=100% An image of any size will scale up or down to fill the containing object, which if in effect is the e-book page means that those images will be full page width, whether that is a 600 on an old Kobo, 768 on Kindle Paperwhite on old ipad or 1536 on a retina ipad. max-width=100% An image of 400*600 pixels will render as 400 pixels wide irrespective of the device. That image take approx 2/3 of the width that old Kobo, just over 1/2 on a new Kindle and just under a 1/4 of the width of a new ipad. ? Regards Trevor |
03-03-2013, 09:53 AM | #6 |
Fanatic
Posts: 580
Karma: 810184
Join Date: Sep 2010
Location: Norway
Device: prs-t1, tablet, Nook Simple, assorted kindles, iPad
|
I agree with your understanding of what width:100% implies
max-width:100%; implies that the image will never exceed, i.e. spill over, the screen width. Say you have a screen with vertical resolution 300px, then defining max-width will ensure that the image is scaled down when necessary. Despite my reservations about denoting image height in percentages, I think Turtle91's max-height:100% sounds like a good idea. Some reader systems interpret height percentages relative to the length of the document rather than the screen size, but using max-height like this wouldn't make the situation worse even in such cases. |
03-03-2013, 10:18 AM | #7 |
Resident Curmudgeon
Posts: 73,510
Karma: 126422064
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Remember, not all eInk Readers are 1024x768. Most are 800x600. So please take that into account.
|
03-03-2013, 02:18 PM | #8 |
A Hairy Wizard
Posts: 3,059
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
The way I understand it:
Width:x% sets the width of the element to the given percentage of the containing element. So if you are wrapping your image with a div Code:
<div><img alt="" src="me.jpg" width="100%" /></div> If your wrapper is a different width: Code:
<div style="width:50%"><img alt="" src="me.jpg" width="100%" /></div> Setting the max-width is telling the browser that "you can have any width setting, but cannot be greater than X. I set max width/height as I mentioned in the previous post to keep any image to 1 page with proper aspect ratio. You can also use it if you want an image to scale with the screen size, but not get so large that it looks ugly. Code:
<div><img alt="" src="me.jpg" width="10%" style="max-width:50px" /></div> Last edited by Turtle91; 03-03-2013 at 02:54 PM. |
03-03-2013, 02:26 PM | #9 |
A Hairy Wizard
Posts: 3,059
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
One thing to be aware of...
HTML 4.01 allows height/width of an image to be defined as a %, HTML 5 does not...they MUST be in pixels. Reference |
03-03-2013, 02:41 PM | #10 |
Resident Curmudgeon
Posts: 73,510
Karma: 126422064
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
HTML 5 is going to suck eggs for image handling.
|
03-03-2013, 02:47 PM | #11 | |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
|
|
03-03-2013, 02:51 PM | #12 | |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
|
|
03-03-2013, 03:05 PM | #13 | |
A Hairy Wizard
Posts: 3,059
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
You can still define height and width of the container using percentages - although as you point out height doesn't have much affect on a <div>. The problem this lack of % handling in the <img> brings up is that you can't make an image display LARGER than it's actual dimensions unless you wrap it in an SVG, or define it as a background image and use some css3 to "contain" it...at least I haven't found a way yet. What cases have you seen that height:100% would cause the image to appear smaller than intended?? Is that something I should worry about? |
|
03-04-2013, 03:48 PM | #14 |
Junior Member
Posts: 9
Karma: 10
Join Date: May 2012
Location: Melbourne
Device: none
|
Am getting there!
I am finding the discussion very valuable. Thanks.
To recap I want to:
I have the following proportioned images:
In reality there are many variations in device proportions especially when one considers tablets, phablets and mobiles! Given I want to preserve my image proportions I am left with *2 cases to consider. I do understand that the cover may need some special treatment. Taking on board as much as I can from our discussion, would the following work? Which would you choose? A. With img class selectors only img.fullwidth width: 100% max-height: 100% img.partialwidth width: x% max-height: x% Would this upscale though? B. With div and img class selectors div.fullwidth width: 100% height: 100% div.partialwidth width: x% height: x% img max-width: 100% height: auto Does this give me greater control over preserving proportions and upscaling? I look forward to your comments, and have already determined to make a donation on the collective behalf of Mobileread posters. Regards Trevor |
03-05-2013, 11:03 AM | #15 | ||
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
<div><img src="..." alt="" style="width:100%" /></div> What you can't use is directly <img width="100%"/> (note: no "style"), because the width property accepts only pixel values. But nothing prevents you (as far as I can tell), from using percentages in CSS, and that's what "style" (or stylesheets) are for. Quote:
|
||
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Best 6" 768×1024? | Hrafn | Which one should I buy? | 26 | 09-14-2012 06:28 AM |
iPad I found the uwnated blank pages before and after for each full-page image on iPad. | Vengadesan | Apple Devices | 1 | 07-07-2011 01:23 AM |
Full page image best practices & TOC | illustrata | Sigil | 2 | 04-26-2011 01:50 PM |
Full page Image | Nakaleen | ePub | 1 | 01-20-2011 01:44 PM |
'Story HD' with 6 inch e-ink display with 1024 * 768 resolution | soilwork | News | 7 | 12-30-2010 10:24 AM |