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.

Code:

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

Quote:

Originally Posted by trevorburdon

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

Quote:

Originally Posted by JSWolf

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

Quote:

Originally Posted by Jellby

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.

05-02-2012, 10:05 PM	#1
trevorburdon Junior Member Posts: 9 Karma: 10 Join Date: May 2012 Location: Melbourne Device: none	XGA Images - size just right? 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

05-03-2012, 02:54 AM	#3
trevorburdon Junior Member Posts: 9 Karma: 10 Join Date: May 2012 Location: Melbourne Device: none	Straight property definitions without SVG 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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Size of page images for Kindle	gdgibson	Kindle Formats	3	02-16-2012 02:56 AM
Size of images in OPDS catalog	dgillmac	Related Tools	1	02-06-2012 01:50 PM
Getting full-size images in your recipe?	khromov	Recipes	2	09-07-2011 01:45 AM
How to stop images from doubling size?	bfollowell	Amazon Kindle	2	10-12-2010 09:55 PM
Images for different size readers	JSWolf	ePub	2	12-31-2009 11:29 AM

05-03-2012, 09:17 AM	#4
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	"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.

05-04-2012, 06:37 AM	#6
trevorburdon Junior Member Posts: 9 Karma: 10 Join Date: May 2012 Location: Melbourne Device: none	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 600800 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!