View Single Post
Old 01-28-2014, 12:29 PM   #1
Simon_M
Penguin eBook Coordinator
Simon_M began at the beginning.
 
Posts: 7
Karma: 10
Join Date: Jan 2014
Device: Many
iBooks Image Upscaling

Hi all,

Checking in on an old problem, really! Ever since the iPad got its retina display, iBooks now automatically upscales any fixed size image. You can see why - many images seen on Kindle Fire are now unusably tiny, as their size was designed for lower-PPI devices. Amazon's solution is to do nothing and have teeny tiny images... Apple's is this horrible upscaling.

If I use a higher-resolution asset from the start, the image is then, of course, too large for older iPads, e-ink devices and anything else with lower pixel density. And iBooks still upscales anyway, so a large image becomes super-large, and still loses definition with the upscaling.

What I'm seeking is a method of having centred images, set to a percentage of page-width (therefore scalable). This can be done (using a tip from Liz Castro involving display: inline-block) and works across all devices, including ADE and Kindle. But not iBooks, as it involves sizing the <img> element directly, which iBooks ignores, instead showing the image at full page-width. Similarly, if you use the other old trick and make a container <div> and give that the size, then set the <img> to fill 100% of it, the inline-block hack fails and everything moves to the left (even if the same display rule is given to that new <div>, too.

So I've been forced to go with fixed-pixel sizing, which I hate, and we're trying to avoid in general for our books (responsive design isn't just for the web!). Aaand to make things worse, iBooks is upscaling the images into fuzzy awfulness.

Sorry for word-vomit... many hours of fiddly coding have turned my brain into some sort of lava-like mush. Any insights or even just understanding and shared pain sure would help...

Thanks!

Simon

Last edited by Simon_M; 01-29-2014 at 05:37 AM.
Simon_M is offline   Reply With Quote