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 03-02-2012, 07:50 PM   #1
nathanp
Junior Member
nathanp began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Mar 2012
Device: iPad
Avoid the "jagged" images in multiple e-readers

Hi guys,

This is my first post. I don't post much on here but I've used this site as a very valuable reference for my research on conversion. Now I have a real question that has been affecting quite a bit that doesn't seem to anywhere on Google.

So now I'm asking that question.

I work at an epub distributor, and am responsible for sending out books for epub conversion, as well as tweaking, fixing, or correcting epubs.

I'm looking at one major issue that kind of baffles me. Optimization for the cover display.

My dilemma is that when we convert a book, the cover will be converted at a somewhat high resolution, simpliy because a customer asked for it.

For instance, let's say we're optimizing for the full screen size of the ipad, BUT the epub will also be viewed in other devices as well.

A few things to note:

1. We only do jpg for the cover. No other formats.
2. We only do RGB. No CMYK.
3. We generally convert the cover image to about 800 high, which is about where the ipad stands.
4. We usually put in the proper CSS to restrict the cover to 100% of the viewing area. This is because readers like the Sony Reader, will cut the cover off if the actual size is too big for the viewing area unless something like { height:100% } is used.

What happens is a customer ends up viewing the cover on a different reader. Specifically one of the Sony based readers. As a result the reader will "smash" the pixels in able to resize from larger to smaller.

As a result, there is a "jagged" look to the image which seems to only appear in the more PC/Mac based readers, but looks clean on most of the reader devices.

My question is...is there a way to avoid this at all? Different formats? Resolutions? Coding? Or are we stuck with this unless we try to optimize for each device (forcing a different epub for each distribution partner, which isn't really an option)

I would appreciate any help!
nathanp is offline   Reply With Quote
Old 03-03-2012, 04:45 AM   #2
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: 6,315
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Use SVG to properly scale the image to the screen size, keeping the aspect ratio:

Code:
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
  <image width="600" height="800" xlink:href="images/Cover.jpg" />
</svg>
</div>
While it's not strictly necessary, it's easier to maintain if the dimensions in the "viewBox", "width" and "height" all match the actual image pixel dimensions.

If you don't want the image being scaled up beyond a certain size, you can use max-width or max-height.

Or you could directly code the entire image in SVG, that way it can be scaled to any size, without losing quality.
Jellby is online now   Reply With Quote
Old 03-03-2012, 07:57 AM   #3
Timur
Connoisseur
Timur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five wordsTimur can name that ebook in five words
 
Posts: 54
Karma: 37363
Join Date: Aug 2011
Location: Istanbul
Device: EBW1150, Nook STR
Due to the algorithm used to scale images, hard edges between adjoining highly contrasting elements in the image will get jagged. This is especially prominent in computer generated images. There is really not much you can do to prevent that phenomenon if you want 100% height coverage of the page in all kinds of devices.

If some extra whitespace around the image in higher resolution displays is an acceptable trade-off, you can size your image at the source(from SVG for example) so that its height is conformant with the lowest resolution device that you intend to support and then use the resulting images actual height in the max-height property of the image in CSS. This will make the image show at that height regardless of the devices resolution, and since it is sized to fit on the lowest resolution device it will not get resized in higher resolution displays.
Timur is offline   Reply With Quote
Old 03-08-2012, 03:24 AM   #4
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: 38,504
Karma: 19471833
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
The problem is that ADE for Windows/OS X scale graphics very poorly. There is nothing you can do to fix this using your JPG cover image. Readers like the Sony do a good job scaling the image and reducing the image in size will work fine.

Making the image a true SVG image may solve the problem in Windows/OS X when using ADE.
JSWolf is offline   Reply With Quote
Old 03-09-2012, 11:02 PM   #5
nathanp
Junior Member
nathanp began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Mar 2012
Device: iPad
So it seems encoding the images in SVG is the choice.

Does anyone have a recommend app for converting images to SVG?
nathanp is offline   Reply With Quote
Old 03-09-2012, 11:57 PM   #6
twowheels
Wizard
twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.twowheels ought to be getting tired of karma fortunes by now.
 
twowheels's Avatar
 
Posts: 1,261
Karma: 8793956
Join Date: Nov 2010
Device: KPW/iPad2/5S/Tab3 Past:NewtonOMP>N120> Palm3>3c> iPAQ3850>Droid>K3>DX
Quote:
Originally Posted by nathanp View Post
So it seems encoding the images in SVG is the choice.

Does anyone have a recommend app for converting images to SVG?
You can't convert images to SVG. Graphics are either raster by nature (rows and columns of colored dots -- bitmaps, jpeg, png, gif), or vector by nature (mathematical representation of lines, curves, and filled regions)... you can convert from scaled to bitmap, but not the other way. SVG isn't an appropriate format for photographs and similar book covers/images.

(at least not in the general case... it might be possible to create a program to do it for a limited set of very simple images)

edit: slight clarification

Last edited by twowheels; 03-09-2012 at 11:59 PM.
twowheels is offline   Reply With Quote
Old 03-10-2012, 01:46 AM   #7
nathanp
Junior Member
nathanp began at the beginning.
 
Posts: 3
Karma: 10
Join Date: Mar 2012
Device: iPad
So, to be absolutely clear:

There is no way to avoid the jagged edge problem when trying to size for every possible reader (including computers) using only one ISBN for all device in an epub.

I can tell it to do height:100% or max-height:100%, but as long as the image is sized for the largest resolution, if it needs to be shrunk the jagged edge thing will always occur, depending on the contrast and complexity of the image.

Also, you can convert to SVG. But the images are so large it's moot. Converting a JPEG to SVG caused it to be 40mb rather than 200k.

Is that the proper consensus?
nathanp is offline   Reply With Quote
Old 03-10-2012, 05:24 AM   #8
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: 6,315
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
The jagged edges are a consequence of the device's rescaling algorithm, and you can't change that.
Jellby is online now   Reply With Quote
Old 03-10-2012, 05:08 PM   #9
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: 38,504
Karma: 19471833
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
The only way to solve the problem on the computer is to get Adobe to fix their broken graphics scaling routines in ADE. ADE for the eink readers seems fine. But then, that is probably using built-in routines and not Adobe's broken ones.
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
iPad "page-break-after: avoid" not supports in Ipad. Sushil Apple Devices 0 01-12-2012 06:14 AM
Netronix new 5", 8", 9,7", 6" touchscreen and WiFi E-Ink readers Charbax News 4 06-08-2009 12:08 PM
Avoid Kindle version of Doctorow's "City of God" Gideon Amazon Kindle 6 04-25-2009 05:01 PM


All times are GMT -4. The time now is 11:34 AM.


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