Plot in epub - resolution problem

[dieda1821]

Hi all,

Sorry if this problem has already been pointed out.

I would like to embed a plot in an epub file.
The plot is a jpg file hence this seems to be a case equal to embedding an image. Anyhow, I have a strong problem of resolution.
The plot contains written text that must be kept readable inside the e-book (see attached file, 400x208px 72ppi).

I embed the plot as any other image (by hand, no software such as Calibre is involved)

<p class="noindent center">
<img src="images/img7_1.jpg" alt="Scheme" class="plot" />
</p>

Where the class .plot would control the size of the image.
Now the problem is that as soon as I use a scalable width for the image (em or %), no matter the value, the quality of the rendered image (tried on ADE and Sony PRS-650) is quite lower than that of the original image and the written text becomes fuzzy, even if I give a width in em that gives out an image as wide as the original one (with ADE on pc).

For some reason, as soon as the width is scalable, the reader somehow reduces the output resolution.

The only solution I found so far is to give a fixed width such as:
<p class="noindent center">
<img src="images/img7_1.jpg" alt="Grafico1" width="400px" class="plot" />
</p>

img.plot{
max-width:70%;
}

I understand that the resolution problem is very little, in fact by using a picture full of details I never noticed this problem. Anyhow with plots, straight lines + texts + few colors, even a small reduction in resolution affects the readibility.

Is this an intrinsic problem, due to the fact that .svg is the only scalable format that preserve the resolution, or is this a problem of the epub readers that worsen the resolution of images with dim set in em or % ?. In this second case, is there a trick to by-pass the problem ?

Thanks for any possible suggestion.

Elena

PS: of course I can also omit the width=400px if that's the real size of the image I want to deal with, which would imply that all the images have been previously properly resized.

[Toxaris]

I think you can better encapsulate the image in a svg container and see if that is better. The rescale functions of the readers are apparently not that great.

[Jellby]

And don't use JPG for this kind of graphs. PNG should be much better (except if you convert the JPG to PNG, of course).

[HarryT]

You need to use the appropriate file type for the appropriate circumstance, and JPEG is the worse possible choice of file format for an image of this type. The JPEG compression will "blur" sharp edges, such as text, lines, and geometric shapes. You should be using GIF or PNG for an image of this type.

[Toxaris]

Keep in mind, that some readers don't like to work with png and/or svg. *cough*iBooks*cough*

[HarryT]

Originally Posted by Toxaris

Keep in mind, that some readers don't like to work with png and/or svg. *cough*iBooks*cough*

But they all support GIF, which is equally good for this purpose.

[dieda1821]

Thanks to all !!!
The image has been given to me in .jpeg format, but I can ask the writers to give me a .png or a .gif. This is probably the best solution.

I tried the .svg container but it does not solve the problem.

Actually, what I would really like is to work directly with .svg images (this kind of plots are easy to be drawn with Inkscape or similar) but I am not really sure that all readers (including my Sony PRS-650) are supporting them.

So far, and having only the .jpeg, I have resized the images to obtain a good result on ADE full-screen, and on the readers I hope a built-in zoom function will be of some help (the one of the PRS-650 does a good job).
No way of obtaining a good result with scalable units.

I'll let you know how it works with .gif

Elena

[Jellby]

Probably, the real problem you are noticing is that whenever there is some scaling, even if it is very slight (and maybe particularly then), you are going to lose quality. To some extent, it depends on the scaling algorithm used by the reader, but they'll probably use quick and resource-cheap algorithms rather than quality-preserving resource-demanding ones.

Anyway, if an image is 400 pixels wide and you scale it to 410 pixels or 390 pixels (which may look to you as "the same size" on screen), you are going to see artifacts, blurriness or whatever. If you display it at exactly 400 pixels, it should be perfect, or as good as it gets.

So, whenever possible, try to avoid scaling an image, and instead of using a fixed "width" use "max-width" and/or "min-width". In my books, I usually just set "max-width: 100%" in all images, to scale them down only if they don't fit in the screen width, otherwise they're displayed at their native resolution.

[dieda1821]

Originally Posted by Jellby

Probably, the real problem you are noticing is that whenever there is some scaling, even if it is very slight (and maybe particularly then), you are going to lose quality.

I agree with you.
And a slight lose of quality does not affect heavily an image full of details and colours. Whereas a plot with text and straight lines becomes immediately blurred.

At the moment (as I still have not received the .gif images to try) I am following your method (max-width).
But it's a pity as the combination of scalablility + svg would be a great solution (if browser, readers, ecc... could support it )

Elena