Image handling - XGA 1024*768, full page etc

[trevorburdon]

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

[SBT]

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.

[trevorburdon]

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

[Turtle91]

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!

[trevorburdon]

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

[SBT]

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.

[JSWolf]

Remember, not all eInk Readers are 1024x768. Most are 800x600. So please take that into account.

[Turtle91]

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

<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:

<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.

<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.

[Turtle91]

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

[JSWolf]

HTML 5 is going to suck eggs for image handling.

[Jellby]

Originally Posted by Turtle91

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]

Originally Posted by SBT

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).

[Turtle91]

Originally Posted by Jellby

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?

[trevorburdon]

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

[Jellby]

Originally Posted by Turtle91

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.

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.