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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-02-2012, 10:05 PM   #1
trevorburdon
Junior Member
trevorburdon began at the beginning.
 
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
trevorburdon is offline   Reply With Quote
Old 05-02-2012, 10:33 PM   #2
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: 35,983
Karma: 17083916
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
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>
JSWolf is offline   Reply With Quote
Old 05-03-2012, 02:54 AM   #3
trevorburdon
Junior Member
trevorburdon began at the beginning.
 
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.
trevorburdon is offline   Reply With Quote
Old 05-03-2012, 09:17 AM   #4
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: 5,906
Karma: 4269879
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.
Jellby is offline   Reply With Quote
Old 05-03-2012, 09:17 PM   #5
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: 35,983
Karma: 17083916
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by trevorburdon View Post
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.
JSWolf is offline   Reply With Quote
Old 05-04-2012, 06:37 AM   #6
trevorburdon
Junior Member
trevorburdon began at the beginning.
 
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 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!
trevorburdon is offline   Reply With Quote
Old 05-04-2012, 07:11 AM   #7
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: 5,906
Karma: 4269879
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by JSWolf View Post
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.
Jellby is offline   Reply With Quote
Old 05-06-2012, 04:13 AM   #8
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: 35,983
Karma: 17083916
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Sony Reader PRS-650, iPad, nook STR
Quote:
Originally Posted by Jellby View Post
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.
JSWolf 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
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


All times are GMT -4. The time now is 12:04 AM.


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