![]() |
#1 |
Read, don't parrot.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Limiting image size in ePub
I have several images that are around 600x800 pixels that when viewed in an ePub app like ADE or Sony Reader get cut off. Setting the height to 100% solves that problem.
However, I have several images that are smaller than the screen size of the average ereader but too wide to fit in a mobile app, for example. If I set them to 100% so they are not cut off on a mobile app, they are then upsized in a larger device or computer app and look like crap. What I want is to contain the 100% height or width to the maximum of the image's native pixel dimensions so that small screens will not cut off the images and larger screens will not uprez them. Having read a few posts I thought wrapping them in an SVG container would do the trick (I thought perhaps the "viewBox" referred to a container of sorts), but when tested in ADE, Nook for PC, Sony reader for PC, and Aldiko on Android, there was no difference between using the SVG container and simply setting the height to 100%. My small images are still uprezzing past their native dimensions. In other words, there was no difference between this (the native code after inserting the image in Sigil with the height value added): Code:
<p class="sgc-1"><img alt="" height="100%" src="../Images/1_Bookmark.jpg" /></p> Code:
<div> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="333" width="293" xlink:href="../Images/1_Bookmark.jpg"></image> </svg> </div> Is there a way to do what I want? |
![]() |
![]() |
![]() |
#2 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,720
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
If you can, make the images larger.
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Read, don't parrot.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Not possible in this case. So the question remains, is there a way to limit the uprezzing to the actual pixel dimensions?
|
![]() |
![]() |
![]() |
#4 | |
Berti
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,197
Karma: 4985964
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
|
Quote:
2. You may follow JSWolf's advice, it's actually a good idea and i'll go to try out for myself. You can add "white -space" at the top and bottom of your picture to change the orientation from landscape to portrait, so the max-height 100% should always work... Last edited by mmat1; 08-15-2012 at 02:16 PM. |
|
![]() |
![]() |
![]() |
#5 |
Read, don't parrot.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Have been doing more experiments with images that are in the mid-size range, dimensions like 500 x 593, 490 x 768, and this is what I am finding:
The SVG wrapper helps to maintain the proper ratio; if only a height=100% or width=100% value is used, the one value causes the image to be uprezzed and the rest of the image is cut off. I tried the max-height and max-width value; this distorted the images. Will try again in an SVG wrapper but will only set one max value and see if that works. Any other suggestions greatly appreciated.Otherwise the default is to leave the images at their native dimensions and say to hell with it. In the dedicated readers and mobile device apps I tested,they all tended to do a much better job of downsizing images to fit when they are not in an SVG wrapper, and in the computer apps the downsampling is of such poor quality that the size issue becomes almost academic. |
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,530
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
With SVG, this works in my browser (Opera): Code:
<div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet"> <image width="600" height="800" xlink:href="images/Cover.jpg" /> </svg> </div> The height="100%" does nothing in Opera, because there's no defined height for the containing block, but it might work in ebook readers. With this, the image is never distorted, and it's always resized (up or down) to maximum possible size. To limit the maximum size, this works too: Code:
<div style="max-width:600px; max-height:800px">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="100%" height="100%" viewBox="0 0 600 800" preserveAspectRatio="xMidYMid meet">
<image width="600" height="800" xlink:href="images/Cover.jpg" />
</svg>
</div>
|
|
![]() |
![]() |
![]() |
#7 |
Read, don't parrot.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Thanks, will try that. I had found something similar on a blog about setting limits within the div style but it didn't give an example of how to actually do it.
I had tried using only one max-height or max-width value but either it had no effect or images were distorted on some devices or apps. Will try to do this today and report back. |
![]() |
![]() |
![]() |
#8 |
Read, don't parrot.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Jellby:
Almost there! Just one last hurdle: My images were centered. In Sigil, this translated into a div class Code:
<div class="sgc-2"> div.sgc-2 {text-align: center;} I tried coding it like this: Code:
<div class="sgc-2" style="max-width:293px; max-height:333px"> Code:
<div class="sgc-2 sgc-3"> Code:
div.sgc-3 {max-width:293px; max-height:333px} I tried this: Code:
<div class="sgc-2"> <div class="sgc-3"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" max-width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" xmlns:xlink="http://www.w3.org/1999/xlink"> <image height="333" width="293" xlink:href="../Images/Angel72.jpg"></image><br /> </svg> </div> </div> I also tried opening the division with Code:
<div class="sgc-2; sgc-3"> Any thoughts? Last edited by eggheadbooks1; 08-16-2012 at 05:01 PM. |
![]() |
![]() |
![]() |
#9 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,720
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
To fix Sigil from changing things to those annoying sgc styles, run Sigil with no files loaded, turn off Tidy and then close Sigil. Now when you run Sigil, Tidy won't run and create those sgc styles.
|
![]() |
![]() |
![]() |
#10 |
Read, don't parrot.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Thanks. Turned off Tidy. But I still can't get my centering back. With
Code:
<div class="sgc-2" style="max-width:531px; max-height:800px"> |
![]() |
![]() |
![]() |
#11 | |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,530
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Your problem is that you don't want centering, but auto margins. Centering, as a text-align value, refers to the alignment of content inside the <div>, but it doesn't specify how the whole <div> will be placed in the page (or screen, or other containing block). That would be done by adding "margin-left: auto; margin-right: auto;" to the sgc-3 style, but readers are allowed to ignore auto margins (and Adobe does). There are some things you could try, one of them is this, that you already tried: Code:
<div class="sgc-2">
<div class="sgc-3">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" max-width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="333" width="293" xlink:href="../Images/Angel72.jpg"></image><br />
</svg>
</div>
</div>
But add "display: inline" to the sgc-3 style. Normally a <div> is "display: block", which is rendered as a "paragraph", ignoring text-align, with "display: inline" you make it behave as "character" (of whatever size), and it should obey text-align. Or you could skip a level and go with: Code:
<div class="sgc-2">
<svg style="max-width:293px; max-height:333px" xmlns="http://www.w3.org/2000/svg" height="100%" max-width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" xmlns:xlink="http://www.w3.org/1999/xlink" >
<image height="333" width="293" xlink:href="../Images/Angel72.jpg"></image>
</svg>
</div>
|
|
![]() |
![]() |
![]() |
#12 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,720
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Turning Tidy off will only help with eBooks Tidy has not already screwed. With the one you already ran through Sigil, the only was to fix things is manually.
|
![]() |
![]() |
![]() |
#13 | |
Read, don't parrot.
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Quote:
And the winner is: Code:
<div class="sgc-2"> <svg style="max-width:293px; max-height:333px" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 293 333" xmlns:xlink="http://www.w3.org/1999/xlink" > <image height="333" width="293" xlink:href="../Images/Angel72.jpg"></image> </svg> </div> Thank you so much! Just out of curiosity: what is the function of the viewBox as opposed to the max width and height of the svg style? When I first saw the SVG code I thought the viewBox would be a constraint of some sort; its name suggests so. Last edited by eggheadbooks1; 08-19-2012 at 05:51 PM. |
|
![]() |
![]() |
![]() |
#14 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,530
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
The viewBox sets the coordinates of the svg canvas, they are not pixels or mm or anything, just numbers. It's telling that one corner is at coordinates (0,0) and the opposite at (293,333), so that when you make your image's size 293×333 it fills the whole space reserved for the SVG picture. You'll see why these numbers don't need to match the real pixel dimensions of the image.
|
![]() |
![]() |
![]() |
#15 | |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,720
Karma: 134319572
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
|
|
![]() |
![]() |
![]() |
Tags |
epub, images cut off, maximum size images, svg |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Image and Pixel size for Childrens Book in EPUB? | Brittany | Writers' Corner | 1 | 09-27-2011 03:15 PM |
Cover Image size | dezignlady | ePub | 6 | 08-04-2011 10:41 AM |
Image Size | benjaminsolah | ePub | 13 | 09-24-2010 11:47 PM |
How to get the maximum image size on a DX? | Diegan | Amazon Kindle | 1 | 08-04-2010 12:05 PM |
Cover Image Size | gr8npwrfl | Calibre | 0 | 12-21-2009 12:49 AM |