12-10-2012, 05:45 PM | #1 |
Member
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 |
12-11-2012, 05:59 AM | #2 |
Evangelist
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.
|
Advert | |
|
12-11-2012, 05:31 PM | #3 |
Member
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?
|
12-11-2012, 06:11 PM | #4 |
reader
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. |
12-11-2012, 07:10 PM | #5 |
Member
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?
|
Advert | |
|
12-13-2012, 05:17 PM | #6 |
Member
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. |
12-14-2012, 03:35 PM | #7 |
Wizard
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. |
12-14-2012, 05:48 PM | #8 |
Member
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. |
12-15-2012, 04:15 AM | #9 |
Wizard
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 aspect ratio is preserved. |
12-15-2012, 07:09 AM | #10 | |
Evangelist
Posts: 450
Karma: 343115
Join Date: Nov 2009
Location: Romania
Device: PW2 2014
|
Quote:
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. |
|
12-15-2012, 08:02 AM | #11 |
Wizard
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. |
12-15-2012, 08:34 AM | #12 | |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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. |
|
12-17-2012, 02:02 PM | #13 |
Member
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.
|
12-19-2012, 02:45 PM | #14 | |
Curmudgeon
Posts: 629
Karma: 1623086
Join Date: Jan 2012
Device: iPad, iPhone, Nook Simple Touch
|
Quote:
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. |
|
12-20-2012, 12:49 PM | #15 | |
frumious Bandersnatch
Posts: 7,514
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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 |
|
Thread Tools | Search this Thread |
|
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 |