Limiting image size in ePub

[eggheadbooks1]

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):

<p class="sgc-1"><img alt="" height="100%" src="../Images/1_Bookmark.jpg" /></p>

and this:

<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>

I also read you can set max-height or max-width but not only does it not work to limit the image size, some of the images become distorted.

Is there a way to do what I want?

[JSWolf]

If you can, make the images larger.

[eggheadbooks1]

Not possible in this case. So the question remains, is there a way to limit the uprezzing to the actual pixel dimensions?

[mmat1]

Originally Posted by eggheadbooks1

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.

1. You may try the max-width - attribute
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...

[eggheadbooks1]

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.

[Jellby]

Originally Posted by eggheadbooks1

I tried the max-height and max-width value; this distorted the images.

Did you try with only max-height (for instance), no width, no max-width, just max-height.

With SVG, this works in my browser (Opera):

<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 numbers in "viewBox" and the image "width" and "height" must match, but they don't need to be the real pixel dimensions of the image, or even the same ratio.

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:

<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>

Now the "max-width" and "max-height" in the div are the image pixel dimensions. It also works (in Opera) if the style is put in the <svg> element instead of the <div>.

[eggheadbooks1]

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.

[eggheadbooks1]

Jellby:

Almost there! Just one last hurdle:

My images were centered. In Sigil, this translated into a div class

<div class="sgc-2">

whereby sgc is

div.sgc-2 {text-align: center;}

I tried coding it like this:

<div class="sgc-2" style="max-width:293px; max-height:333px">

but Sigil then changes each style to a div.sgc and I end up with this

<div class="sgc-2 sgc-3">

whereby sgv 3 is

div.sgc-3 {max-width:293px; max-height:333px}

but the ereaders ignore the centering. So I get my max width or height (THANK YOU!) but I lose my centering.

I tried this:

<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 it didn't work.

I also tried opening the division with

<div class="sgc-2; sgc-3">

but that didn't work either. I'm not a programmer and I am out of ideas.

Any thoughts?

[JSWolf]

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.

[eggheadbooks1]

Thanks. Turned off Tidy. But I still can't get my centering back. With

<div class="sgc-2" style="max-width:531px; max-height:800px">

the ereaders ignore the class and only read the style.

[Jellby]

Originally Posted by eggheadbooks1

I tried coding it like this:

<div class="sgc-2" style="max-width:293px; max-height:333px">

but Sigil then changes each style to a div.sgc and I end up with this

<div class="sgc-2 sgc-3">

whereby sgv 3 is

div.sgc-3 {max-width:293px; max-height:333px}

That's OK, both things mean the same and should be rendered the same.

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:

<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>

(remove that <br/>, it's not doing any good, I'm not even sure it's allowed in SVG)

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:

<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>

That is, set the maximum size for the <svg> element directly (again, it works in Opera). You could also try with class="sgc-3" instead. I'm not quite sure this is really compliant, but nothing is lost trying.

[JSWolf]

Originally Posted by eggheadbooks1

Thanks. Turned off Tidy. But I still can't get my centering back. With

<div class="sgc-2" style="max-width:531px; max-height:800px">

the ereaders ignore the class and only read the style.

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.

[eggheadbooks1]

(remove that <br/>, it's not doing any good, I'm not even sure it's allowed in SVG)

Sorry about that. That was just lazy cutting and pasting...

And the winner is:

<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>

Yeah!!! Works in ADE, Aldiko on Kindle Fire, Kobo Touch, Sony for PC, Nook for PC. (I had to take out the "max" in "max-width="100%" for a reason I don't understand. If it were left in some of the images didn't shrink correctly).

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.

[Jellby]

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.

[JSWolf]

Originally Posted by Jellby

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.

Originally, Calibre had is using the numbers to fill the screen and if they were not the numbers for the image, the image would come out with the incorrect aspect ratio even if the code said to make the aspect correct. I pointed this out to Kovid and he fixed it so when Calibre generates the SVG code for the cover, it uses the numbers for the resolution of the cover. This could be a bug in ADE. But since most ePub is read using ADE, using different numbers (other then the resolution) may not work well.