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 12-10-2012, 05:45 PM   #1
sarah_pnix
Member
sarah_pnix began at the beginning.
 
Posts: 14
Karma: 10
Join Date: Feb 2010
Device: none
ADE image resampling and lack of zoom

If I put an image in an epub and it displays at the exact size, say 600 pixels wide, it looks great. I set the max-width to 100% so if it's viewed on a smaller screen it doesn't get cut off. But when it's reduced to fit, it looks like crap. Like really bad (I'm dealing mostly with line drawings so it's more noticeable than a photograph). It seems like whatever formula Adobe's using is just not adequate.

Has anyone else experienced this or have a solution? I'm mostly dealing with the Bluefire app, but it appears to be an ADE issue. I saw one post from someone with a similar problem with their sheet music images. Didn't see a good solution.

I wish you could zoom. So frustrating. Do you think ADE will ever add zoom for epubs? iBooks is much better on this particular issue of image resampling and zoom.

Thanks for any ideas,
Sarah
sarah_pnix is offline   Reply With Quote
Old 12-11-2012, 05:59 AM   #2
DSpider
Evangelist
DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.
 
DSpider's Avatar
 
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
Use SVG; they scale really well. There are lots of tutorials on YouTube on how to trace a bitmap image in, say, Inkscape. There's also Adobe Illustrator and Vector Magic. Good luck.
DSpider is offline   Reply With Quote
Advert
Old 12-11-2012, 05:31 PM   #3
sarah_pnix
Member
sarah_pnix began at the beginning.
 
Posts: 14
Karma: 10
Join Date: Feb 2010
Device: none
I have the original vector images in Illustrator. Is SVG universally supported? I've seen some examples on this forum, but have never tried it myself. One thing I don't get is that you set the image to appear at a specific size, right? Then what happens on different screen sizes? I'll have to find a tutorial that explains the basics. Any recommendations?
sarah_pnix is offline   Reply With Quote
Old 12-11-2012, 06:11 PM   #4
wallcraft
reader
wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.wallcraft ought to be getting tired of karma fortunes by now.
 
wallcraft's Avatar
 
Posts: 6,975
Karma: 5183568
Join Date: Mar 2006
Location: Mississippi, USA
Device: Kindle 3, Kobo Glo HD
Start with wiki: SVG. The most common examples give fine control over image scaling, for example illustrated ebooks with epub: using the svg image element. Scaling an image isn't what you want to do, but it shows how the automatic sizing to the screen works.

Last edited by wallcraft; 12-11-2012 at 06:16 PM.
wallcraft is offline   Reply With Quote
Old 12-11-2012, 07:10 PM   #5
sarah_pnix
Member
sarah_pnix began at the beginning.
 
Posts: 14
Karma: 10
Join Date: Feb 2010
Device: none
I apologize for my ignorance on this topic. Most examples I see are a bitmap image wrapped in SVG. That is different than having an actual SVG vector image, right?
sarah_pnix is offline   Reply With Quote
Advert
Old 12-13-2012, 05:17 PM   #6
sarah_pnix
Member
sarah_pnix began at the beginning.
 
Posts: 14
Karma: 10
Join Date: Feb 2010
Device: none
Spent the day experimenting with svg files out of Illustrator. Could not get gradients fills to display correctly in Bluefire, even though they look fine in ADE on my desktop. Otherwise it seemed promising, but I think I'm giving up.

So, I'm back to jpg/png and dealing with ADE's horrible image scaling. Found another post about it, good to know it's not just me (https://www.mobileread.com/forums/sho...ferrerid=58168).

Any other thoughts or ideas? It's depressing that some readers will see these embarrassingly poor images and I have no control over it.
sarah_pnix is offline   Reply With Quote
Old 12-14-2012, 03:35 PM   #7
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Wrapping an image in SVG will already solve several scaling issues. The problem with SVG is that not the whole 1.1 spec should be supported and that not all readers actually support it that well.
If you keep it simple, it will work. I don't work with Illustrator, but I would not be surprised if it would use a newer format than 1.1 and contains some operators that are not readily supported.
Toxaris is offline   Reply With Quote
Old 12-14-2012, 05:48 PM   #8
sarah_pnix
Member
sarah_pnix began at the beginning.
 
Posts: 14
Karma: 10
Join Date: Feb 2010
Device: none
Thanks for the reply, Toxaris. Illustrator says it's saving as SVG 1.1, but who knows.

Are you saying that wrapping a bitmap image in SVG will result in better scaling quality? Is there a way to set the SVG wrapper to display the image at max-width:100% ? When you set the view box to a certain size, I don't understand how you can get the image to scale to the screen width. Basically, on a smaller screen I don't want the image to be cut off.
sarah_pnix is offline   Reply With Quote
Old 12-15-2012, 04:15 AM   #9
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
Even if it is SVG 1.1, certain things won't work. Things like animation, scripting and a lot of options with regards to text will not work.

Yes, an image in a SVG wrapper will give better results with scaling. As an example, the code I use as a base for my covers are:
Code:
<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 522 800" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="800" width="522" xlink:href="../Images/cover.jpg"></image>
    </svg>
  </div>
The viewbox and image resolution must be equal to the resolution of the image. The width and height are set to 100%. That means that the image is scaled to either the maximum width or height of the screen, depending on what is reached earlier. If the screen resolution is below the image resolution, the image is rescaled upwards. If the image is larger, the image is scaled down.
The aspect ratio is preserved.
Toxaris is offline   Reply With Quote
Old 12-15-2012, 07:09 AM   #10
DSpider
Evangelist
DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.DSpider ought to be getting tired of karma fortunes by now.
 
DSpider's Avatar
 
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
Quote:
Originally Posted by Toxaris View Post
Yes, an image in a SVG wrapper will give better results with scaling.

[...]

...the image is scaled to either the maximum width or height of the screen, depending on what is reached earlier. If the screen resolution is below the image resolution, the image is rescaled upwards. If the image is larger, the image is scaled down.
The aspect ratio is preserved.
Doesn't that depend entirely on the e-reader?

Some may interpret them one way, while some may stretch both height and width to 100% resulting in a stretched image to the aspect ratio of the screen.
DSpider is offline   Reply With Quote
Old 12-15-2012, 08:02 AM   #11
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
No, I preserve the aspect ratio with the addition of: preserveAspectRatio="xMidYMid meet"

That would lead to the result I described.
Toxaris is offline   Reply With Quote
Old 12-15-2012, 08:34 AM   #12
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: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by DSpider View Post
Doesn't that depend entirely on the e-reader?

Some may interpret them one way, while some may stretch both height and width to 100% resulting in a stretched image to the aspect ratio of the screen.
If they obey the SVG code, they shouldn't alter the image's aspect ratio (as Toxaris said).

What is not clear at all is what "height: 100%" means in the <svg> tag. Try it in a browser, you'll probably see it ignored (i.e. the image doesn't fit the screen's height, or the window's height, or whatever). The CSS spec only says it's relative to the container's height, but there's no container, or rather the container's height is not defined, as it's a <div> inside <body>. It seems Adobe-based readers interpret this relative height with respect to the screen (minus margins, statusbar, etc., maybe), at least in some circumstances, but unfortunately that's not guaranteed.
Jellby is offline   Reply With Quote
Old 12-17-2012, 02:02 PM   #13
sarah_pnix
Member
sarah_pnix began at the beginning.
 
Posts: 14
Karma: 10
Join Date: Feb 2010
Device: none
I tried wrapping a png image with svg following Toxaris' example above, but the scaling quality is no different. The original problem still exists—if the image has to be reduced to fit the screen, the quality is significantly worse than the original image.
sarah_pnix is offline   Reply With Quote
Old 12-19-2012, 02:45 PM   #14
dgatwood
Curmudgeon
dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.dgatwood ought to be getting tired of karma fortunes by now.
 
dgatwood's Avatar
 
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
Quote:
Originally Posted by Jellby View Post
The CSS spec only says it's relative to the container's height, but there's no container, or rather the container's height is not defined, as it's a <div> inside <body>. It seems Adobe-based readers interpret this relative height with respect to the screen (minus margins, statusbar, etc., maybe), at least in some circumstances, but unfortunately that's not guaranteed.
The <div> element should have an explicit size—height: 100%; width: 100%; in the CSS. This should result in a <div> that fills the screen.

The SVG scaling rules are then applied within that container, which means that if you tell it to scale proportionally, it should grow to the maximum size that will fit entirely within that div, which is the size of your screen.

If a reader doesn't do that, it's a bug.
dgatwood is offline   Reply With Quote
Old 12-20-2012, 12:49 PM   #15
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: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by dgatwood View Post
The <div> element should have an explicit size—height: 100%; width: 100%; in the CSS. This should result in a <div> that fills the screen.
Again, that 100% means 100% of the container's height, and the container (probably <body>) has no fixed height, but rather is as high as needed to fit its contents. As humans, we assume it means "100% of the screen height", but that's not what the spec says, and that's not what all renderers interpret (though it might be what some do).

Set it to "height: 10cm", or similar, instead, and it should work as expected (but not as wanted).

This, of course, unless I'm mistaken due to ignorance or misunderstanding of the specs
Jellby 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
[kindle touch] zoom image? zerolucat Kindle Developer's Corner 4 10-31-2012 02:58 PM
Zoom in/out image victorhugoa ePub 3 12-15-2011 04:40 AM
Image Zoom Kittel68 Amazon Kindle 3 06-28-2011 02:17 PM
Workaround for lack of capitals in ADE ozaru ePub 11 09-02-2010 08:59 PM


All times are GMT -4. The time now is 08:31 PM.


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