Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > Workshop

Notices

Reply
 
Thread Tools Search this Thread
Old 02-28-2013, 09:00 PM   #1
trevorburdon
Junior Member
trevorburdon began at the beginning.
 
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
trevorburdon is offline   Reply With Quote
Old 03-02-2013, 02:17 PM   #2
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
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.
SBT is offline   Reply With Quote
Old 03-02-2013, 05:20 PM   #3
trevorburdon
Junior Member
trevorburdon began at the beginning.
 
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:-
  • width specifies the proportion to fill of the page/containing object, and,
  • max-width specifies the max proportion of the original pixels to use.

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
trevorburdon is offline   Reply With Quote
Old 03-02-2013, 10:32 PM   #4
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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!
Turtle91 is offline   Reply With Quote
Old 03-03-2013, 06:57 AM   #5
trevorburdon
Junior Member
trevorburdon began at the beginning.
 
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
trevorburdon is offline   Reply With Quote
Old 03-03-2013, 09:53 AM   #6
SBT
Fanatic
SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.SBT ought to be getting tired of karma fortunes by now.
 
SBT's Avatar
 
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.
SBT is offline   Reply With Quote
Old 03-03-2013, 10:18 AM   #7
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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.
JSWolf is offline   Reply With Quote
Old 03-03-2013, 02:18 PM   #8
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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>
you should get an image that covers the entire width of the screen because the div covers the entire screen in this example. If the image is a portrait type image with height greater than width, then the image will spill onto another page.

If your wrapper is a different width:
Code:
<div style="width:50%"><img alt="" src="me.jpg" width="100%" /></div>
then the image will fill 100% of the wrapper, in this case half the screen because the div is only 50% wide - the height may or may not spill over.

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>
For small images (eg Chapter head images) I want it to be 10% of the screen size, but I don't want it to ever exceed 50 pixels wide (the actual size of the image) to avoid pixelation.

Last edited by Turtle91; 03-03-2013 at 02:54 PM.
Turtle91 is offline   Reply With Quote
Old 03-03-2013, 02:26 PM   #9
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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
Turtle91 is offline   Reply With Quote
Old 03-03-2013, 02:41 PM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
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.
JSWolf is offline   Reply With Quote
Old 03-03-2013, 02:47 PM   #11
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Turtle91 View Post
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
That is the height and width HTML attributes of the <img> element. It doesn't change how CSS properties work, I guess.
Jellby is offline   Reply With Quote
Old 03-03-2013, 02:51 PM   #12
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by SBT View Post
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.
Height of the containing element (and therefore the reference for % in height) is often undefined, and the result can vary from reader to reader. However, specifying max-height should never make the image larger than leaving it out, although it could make it smaller (and smaller than intended, in some cases).
Jellby is offline   Reply With Quote
Old 03-03-2013, 03:05 PM   #13
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
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:
Originally Posted by Jellby View Post
That is the height and width HTML attributes of the <img> element. It doesn't change how CSS properties work, I guess.


Height of the containing element (and therefore the reference for % in height) is often undefined, and the result can vary from reader to reader. However, specifying max-height should never make the image larger than leaving it out, although it could make it smaller (and smaller than intended, in some cases).
Correct.

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?
Turtle91 is offline   Reply With Quote
Old 03-04-2013, 03:48 PM   #14
trevorburdon
Junior Member
trevorburdon began at the beginning.
 
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:
  • Place images on low res e-reader 600*800 screens, med res XGA (768*1024) screens and high res retina double XGA screens
  • Do it once without specifying different devices
  • Preserve image proportions
  • Have images scale up

I have the following proportioned images:
  • Full page - Eg Cover page, title page
  • *Full width - Eg photo pages
  • *Partial width - Eg smaller inline

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
trevorburdon is offline   Reply With Quote
Old 03-05-2013, 11:03 AM   #15
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by Turtle91 View Post
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
But, if I understand it correctly, you can still have:

<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:
What cases have you seen that height:100% would cause the image to appear smaller than intended?? Is that something I should worry about?
If I remember correctly, Prince refers height percentages to the width, so if you have a 9cm×12cm portrait page, and set a 3:4 image as "max-height: 100%; max-width: 100%", it won't end up as 9cm×12cm, but as 6.75cm×9cm.
Jellby is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 01:49 AM.


MobileRead.com is a privately owned, operated and funded community.