Avoid the "jagged" images in multiple e-readers

[nathanp]

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!

[Jellby]

Use SVG to properly scale the image to the screen size, keeping the aspect ratio:

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

[Timur]

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.

[JSWolf]

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.

[nathanp]

So it seems encoding the images in SVG is the choice.

Does anyone have a recommend app for converting images to SVG?

[twowheels]

Originally Posted by nathanp

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

[nathanp]

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?

[Jellby]

The jagged edges are a consequence of the device's rescaling algorithm, and you can't change that.

[JSWolf]

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.