Scaling images in illustrated epubs

Chris Jones · 02-23-2016, 03:15 PM

Images in epubs do not seem to scale in order to take into account the specs of the e-reading device and as a result a given epub's images may appear reasonably sized on one device and much smaller on another.

One particular example where this is causing me a problem is the LaTeX Companion from Addison-Wesley Professional: there are many diagrams and code samples packaged as jpeg files that are legible in the Calibre ebook-viewer on my laptop but turn out to be totally undecipherable on higher resolution screens such as the Kobo Glo or the Nexus 7 Android tablet making the book useless on such devices.

I looked at a number of illustrated novels from the mobileread site and they all appear to do the same in this respect: on higher resolution devices (I'm guessing this is what is causing the problem...?) some of the images are about the size of a postage stamp to the point that with some of them you cannot even tell at a glance what they're supposed to represent...!

Isn't there a way to work around this issue and to make images the same size relative to the size of the screen on any device?

What I have in mind in a rather vague way is something like specifying that the image is to be displayed in a box/container that occupies a given percentage of the screen and scaled to fit into that box.

Not intrinsically different from the way book covers are handled and this appears to work on all kinds of devices.

Would anyone know how the designers of the epub standard recommend this should be addressed and where it is documented?

JSWolf · 02-23-2016, 04:28 PM

Yes, you can specify a specific percent of of the screen to be used. But, the problem is usually that the images are usually of too low a resolution.

Chris Jones · 02-23-2016, 07:10 PM

Quote:

Originally Posted by JSWolf

Yes, you can specify a specific percent of of the screen to be used. But, the problem is usually that the images are usually of too low a resolution.

Sounds like what I am looking for.

Have you come across an epub that does this that I could use as an example?

Most of the code snippets I have checked in the LaTeX manual are about 800-900 px wide so the resolution should be sufficient if not perfect... After all they are perfectly readable on a PC screen... if not of retina quality.

Once I have a working sample that does what I have in mind I should be able to find some way to fix that book...

Jellby · 02-24-2016, 05:03 AM

Some day ebook reader developers will understand that we need an user-adjustable "resolution" setting, that would change the size of images (if they don't have their size specified in some other way), just like we change the default font size.

JSWolf · 02-24-2016, 06:00 AM

You specify a % of the screen. But the problem is that if the images are of low resolution (like I think then when you do get them large enough for a high resolution screen such as a Glo HD or PW3, then you'll see the images looking blurry.

Jellby · 02-24-2016, 08:02 AM

That depends on the resize algorithm being used, and on the factor. They could look pixelated instead of blurry, but it shouldn't be much worse than when displayed in a low-resolution device.

A 900px image in a 150ppi screen should look exactly the same when displayed at a 2x magnification in a 300ppi screen, same size, same quality. So nothing is lost by just enlarging all images to double size (in this case), but nothing is gained either, the images won't look "better" than in the low resolution screen.

If the magnification factor is not an integer, or if some interpolation algorithm is used for the resizing, then it can be blurry.

GeoffR · 02-24-2016, 01:25 PM

Quote:

Originally Posted by Chris Jones

Not intrinsically different from the way book covers are handled and this appears to work on all kinds of devices.

As you have observed, most publishers manage to scale the cover image to suit the screen size. Exactly the same technique can be used for any other image in the book, so why so many fail to do it for images oher than the cover baffles me.

The problem of publishers using absurdly low-quality bitmap images to begin with is another matter, but there is no point worrying about the effects of rescaling a low-quality image when the unscaled image is too small to see properly anyway.

It is possible to set upper and lower bounds on the image size as a percentage of the screen size, so that the image will only be rescaled if it falls outside those bounds. That way there is nothing to lose by allowing the image to be rescaled, as it will only happen on devices where it needs to be rescaled to fit those bounds.

This is not quite what you were talking about, but attached is an example I made that scales a bitmap image proportional to the font size selected by the reader, but with a bound so that it doesn't become too big to fit on the screen if the font size is set very high.

Edit: I am feeling a bit cynical now, because looking through my books in calibre the only case I can find where a publisher has done a proper job of scaling an image other than the cover is an image for an in-book advertisment.

Edit2: Okay I found this example from Subterranean Press where some of the non-cover images have been scaled properly to suit devices with different screen resolutions.

fbrzvnrnd · 03-08-2016, 04:50 AM

This is not so simple: too big images could be a problem in slow ereaders (my old cybook freezes if the images are >400k); too low quality images show artifacts on HD ppi screen... the only way to have perfect images ever could be SVG format, but the SVG support is not so good (and oblivious not all the images could be SVG).

Anyway, the right way to handle images, is put the image in a parent (like a div, ora a span for inline images), give to the parent the width in % we need and give to the child image width 100%.

Chris Jones · 03-29-2016, 11:30 AM

Interesting workaround... I whipped up an illustrated epub along these lines and it looks like the recommended solution is both easy to implement and free of any adverse effects. Attaching sample file to this message.

The main problem I ran into is that illustrated e-books quickly grow in size. Though only a paltry 200k on average to begin with I still had to reduce the size of my images just to be able to upload the file to this site. The original .epub is over 30M and the limit is 20M. Of course this is not directly related to your solution. Anyway... if you're interested let me me know via PM and I'll (try to) return the original epub with the full-size pics. The difference in quality is quite visible.

As to the LaTeX manual I mention in my original post it turns out that the FBReader application lets you display images full screen at their native resolution just by long-pressing them. Once the image is displayed full-screen you can proceed to pinch the display at your heart's content in order to zoom in and out if so inclined. FBReader would appear to be the only android app that tries to handle images intelligently.

Thanks,

CJ

HarryT · 03-30-2016, 10:24 AM

Quote:

Originally Posted by Chris Jones

As to the LaTeX manual I mention in my original post it turns out that the FBReader application lets you display images full screen at their native resolution just by long-pressing them. Once the image is displayed full-screen you can proceed to pinch the display at your heart's content in order to zoom in and out if so inclined. FBReader would appear to be the only android app that tries to handle images intelligently.

The Kindle App does the same (as do eInk Kindles, too), should you decide to convert your book from ePub to KF8 format.

Chris Jones · 03-30-2016, 01:57 PM

I converted the .epub to .mobi and had a look. The main issue here is that amazon/kindle make it a bit of a hassle to read books sideloaded to your device... eventually managed to figure out where I needed to copy the downloaded .mobi file so the kindle app can find it and it works as advertised.

Thanks,

CJ

JSWolf · 03-30-2016, 06:12 PM

Quote:

Originally Posted by Chris Jones

I converted the .epub to .mobi and had a look. The main issue here is that amazon/kindle make it a bit of a hassle to read books sideloaded to your device... eventually managed to figure out where I needed to copy the downloaded .mobi file so the kindle app can find it and it works as advertised.

Thanks,

CJ

If you use Calibre, it is easier than trivial to side load to many different devices.

Chris Jones · 03-30-2016, 10:55 PM

To clarify... With the kindle app... I have to fire up a browser... point it to my Calibre server... download the file... fire up a file manager or a terminal... copy the file to the kindle folder... if I can remember where the file was downloaded and the name of the goddam kindle folder and where it lives in the file system, that is... and then go back to the Kindle app to start reading it. With FBReader I only have to open the network menu... select the Calibre server & download the book.. then wait till it's downloaded & tap "Read downloaded copy"... all without ever leaving the FBReader app.

exaltedwombat · 04-02-2016, 10:15 AM

There's a lot to be said for dropping any preconceived ideas of page layout and making any graphic that's worth looking at a full-page image, with dimensions in the 1000 pixel range.

fbrzvnrnd · 04-02-2016, 01:10 PM

Quote:

Originally Posted by exaltedwombat

There's a lot to be said for dropping any preconceived ideas of page layout and making any graphic that's worth looking at a full-page image, with dimensions in the 1000 pixel range.

sorry?

02-23-2016, 03:15 PM	#1
Chris Jones Addict Posts: 242 Karma: 37089 Join Date: Oct 2012 Device: none	Scaling images in illustrated epubs Images in epubs do not seem to scale in order to take into account the specs of the e-reading device and as a result a given epub's images may appear reasonably sized on one device and much smaller on another. One particular example where this is causing me a problem is the LaTeX Companion from Addison-Wesley Professional: there are many diagrams and code samples packaged as jpeg files that are legible in the Calibre ebook-viewer on my laptop but turn out to be totally undecipherable on higher resolution screens such as the Kobo Glo or the Nexus 7 Android tablet making the book useless on such devices. I looked at a number of illustrated novels from the mobileread site and they all appear to do the same in this respect: on higher resolution devices (I'm guessing this is what is causing the problem...?) some of the images are about the size of a postage stamp to the point that with some of them you cannot even tell at a glance what they're supposed to represent...! Isn't there a way to work around this issue and to make images the same size relative to the size of the screen on any device? What I have in mind in a rather vague way is something like specifying that the image is to be displayed in a box/container that occupies a given percentage of the screen and scaled to fit into that box. Not intrinsically different from the way book covers are handled and this appears to work on all kinds of devices. Would anyone know how the designers of the epub standard recommend this should be addressed and where it is documented?

03-30-2016, 01:57 PM	#11
Chris Jones Addict Posts: 242 Karma: 37089 Join Date: Oct 2012 Device: none	I converted the .epub to .mobi and had a look. The main issue here is that amazon/kindle make it a bit of a hassle to read books sideloaded to your device... eventually managed to figure out where I needed to copy the downloaded .mobi file so the kindle app can find it and it works as advertised. Thanks, CJ Last edited by Chris Jones; 03-30-2016 at 03:04 PM.

03-30-2016, 10:55 PM	#13
Chris Jones Addict Posts: 242 Karma: 37089 Join Date: Oct 2012 Device: none	A trivial... PITA if you ask me mate... :) To clarify... With the kindle app... I have to fire up a browser... point it to my Calibre server... download the file... fire up a file manager or a terminal... copy the file to the kindle folder... if I can remember where the file was downloaded and the name of the goddam kindle folder and where it lives in the file system, that is... and then go back to the Kindle app to start reading it. With FBReader I only have to open the network menu... select the Calibre server & download the book.. then wait till it's downloaded & tap "Read downloaded copy"... all without ever leaving the FBReader app.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
scaling images for Kindle on iOS	AlanHK	Kindle Formats	6	02-03-2016 06:52 AM
Scaling images with SVG wrapper	Pablo	ePub	4	07-07-2015 01:44 PM
PRS-T1 Scaling Images in epubs	mochaiso	Sony Reader	4	06-08-2012 12:33 AM
problem scaling images	paola	ePub	11	05-12-2011 02:20 AM
A bug with images in epubs?	Cyclops	ePub	2	09-13-2010 10:57 AM

02-23-2016, 04:28 PM	#2
JSWolf Resident Curmudgeon Posts: 79,750 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Yes, you can specify a specific percent of of the screen to be used. But, the problem is usually that the images are usually of too low a resolution.

02-24-2016, 05:03 AM	#4
Jellby frumious Bandersnatch Posts: 7,549 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	Some day ebook reader developers will understand that we need an user-adjustable "resolution" setting, that would change the size of images (if they don't have their size specified in some other way), just like we change the default font size.

02-24-2016, 06:00 AM	#5
JSWolf Resident Curmudgeon Posts: 79,750 Karma: 145864619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You specify a % of the screen. But the problem is that if the images are of low resolution (like I think then when you do get them large enough for a high resolution screen such as a Glo HD or PW3, then you'll see the images looking blurry.

02-24-2016, 08:02 AM	#6
Jellby frumious Bandersnatch Posts: 7,549 Karma: 19500001 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	That depends on the resize algorithm being used, and on the factor. They could look pixelated instead of blurry, but it shouldn't be much worse than when displayed in a low-resolution device. A 900px image in a 150ppi screen should look exactly the same when displayed at a 2x magnification in a 300ppi screen, same size, same quality. So nothing is lost by just enlarging all images to double size (in this case), but nothing is gained either, the images won't look "better" than in the low resolution screen. If the magnification factor is not an integer, or if some interpolation algorithm is used for the resizing, then it can be blurry.

03-08-2016, 04:50 AM	#8
fbrzvnrnd Fanatic Posts: 557 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	This is not so simple: too big images could be a problem in slow ereaders (my old cybook freezes if the images are >400k); too low quality images show artifacts on HD ppi screen... the only way to have perfect images ever could be SVG format, but the SVG support is not so good (and oblivious not all the images could be SVG). Anyway, the right way to handle images, is put the image in a parent (like a div, ora a span for inline images), give to the parent the width in % we need and give to the child image width 100%.

04-02-2016, 10:15 AM	#14
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	There's a lot to be said for dropping any preconceived ideas of page layout and making any graphic that's worth looking at a full-page image, with dimensions in the 1000 pixel range.

Advert

Advert