View Full Version : XGA Images - size just right?


trevorburdon
05-02-2012, 10:05 PM
I am finalising an epub which ultimately be distributed via BookBaby and all their channels ... Amazon, iBooks, B&N, Sony etc. The book is under conversion from an A5 print-ready PDF.

The book contains full page, full width images and graphics. I expect it will be read on standard 600x800 readers, HD readers, the ipad and other tablets. Given that XGA (768x1024) is predominant in screen size, should I use this size to maximize image quality on ipads and tablets and let the std ereaders scale down to suit their screens?
How should I apply height, max-height, width, max-width etc to ensure a good fit on all screens?
Are there any other precautions I should take?
Are there any good references i should refer to first.

Any advice would be greatly appreciated. Regards Trevor

JSWolf
05-02-2012, 10:33 PM
If I can find a cover image greater then 1024 lines, I reduce it down to 1024.

This is the code used for the latest eBook I've finished editing tonight. I know the cover image is larger then 1024. I was just too lazy to reduce it in size.

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ops="http://www.idpf.org/2007/ops" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>Blood Rites</title>
<link rel="stylesheet" type="text/css" href="../Styles/BloodRites.css" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
</head>
<body style="margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; text-align: center; background-color: #FFFFFF;">
<div><svg:svg width="100%" height="100%" viewBox="0 0 825 1200"><svg:image xlink:href="../Images/MSRCover.jpg" transform="translate(0 0)" width="825" height="1200" /></svg:svg></div>
</body>
</html>

trevorburdon
05-03-2012, 02:54 AM
Thanks Mr Wolf. I have seen Jelby's response to a similar question by you a couple of years ago!

"I'd try "max-width:100%; max-height:100%;". That should work (if the relative height works), but won't enlarge images, just reduce them if needed.

If you want to resize in any direction, I believe you have to use an SVG wrapper:"

As a straight img property does max-height:100% mean:
1. scale image to 100% of so it fit any screen heightwise, or,
2. does it mean scale the image up to 100% of its pixel height?

In the first example the image would scale to fit heightwise on a small phone screen or a large monitor screen, while in the second it would never be bigger than its original pixel dimensions in pixels.

Jellby
05-03-2012, 09:17 AM
"max-height: 100%" says that, whatever other size specifications say, the height will never be more than 100% of the container element. Now, what exactly is the "container element" and which is its height, that's a tricky matter. But it doesn't mean 100% of its original pixel height. In other words, it works like "height: 100%", but only if the height would otherwise be larger than that.

JSWolf
05-03-2012, 09:17 PM
Thanks Mr Wolf. I have seen Jelby's response to a similar question by you a couple of years ago!

"I'd try "max-width:100%; max-height:100%;". That should work (if the relative height works), but won't enlarge images, just reduce them if needed.

If you want to resize in any direction, I believe you have to use an SVG wrapper:"

As a straight img property does max-height:100% mean:
1. scale image to 100% of so it fit any screen heightwise, or,
2. does it mean scale the image up to 100% of its pixel height?

In the first example the image would scale to fit heightwise on a small phone screen or a large monitor screen, while in the second it would never be bigger than its original pixel dimensions in pixels.

Don't use both max-width and max-height. Just use max-height. Using both will just stretch the image out of shape to fill the screen.


As for the sample code I posted, you'll need to change the resolution numbers to that of your image.

trevorburdon
05-04-2012, 06:37 AM
Given that I am starting with XGA sized images, I am after a single class selector and properties that without distortion will fill*:
1. A small e-ink readers screen of 600*800
2. An XGA sized tablet screen
3. And perhaps even an ~A5 sized portion of a large screen like an iPad3

*I appreciate that margins may show
**To approximate the size of my images in the original A5 print PDF.

Thus I would be displaying full page images on all screens up to a print-copy size.

BTW great advice so far but I'm not quite there!

Jellby
05-04-2012, 07:11 AM
Don't use both max-width and max-height. Just use max-height. Using both will just stretch the image out of shape to fill the screen.

Really? I've never had a problem with those. "width" and "height" may cause that, but I haven't seen it with "max-width" and "max-height".

On the other side, "height" and "max-height" are tricky, and even though some reading applications may interpret them as relative to the available screen size, that is not guaranteed to be the case.

JSWolf
05-06-2012, 04:13 AM
Really? I've never had a problem with those. "width" and "height" may cause that, but I haven't seen it with "max-width" and "max-height".

On the other side, "height" and "max-height" are tricky, and even though some reading applications may interpret them as relative to the available screen size, that is not guaranteed to be the case.

It works where it needs to work. ADE supports it.