Limiting image size in ePub

[eggheadbooks1]

Interesting, thanks.

A new but related question: I do not own a smartphone, just a tablet, so I cannot test... do the smartphone apps (Sony, Nook, Kobo, ADE) also cut off images not placed within an SVG wrapper but left at their original dimensions?

[Kaylee Skylyn]

Hey all,

I thought the code here in post 13 would solve some major issues for me (I really really want something like this!) but I'm still running into issues. It works fine on the desktop, looks great in Calibre (after epubing) and in firefox (before epubing). Passes epub check but on the reader (both Sony PSR 350 and Android phone with Aldiko and BlueFire Reader) it puts each image on a separate page. I can see no reason for this. It seems to re-size the images like I wish but even a small two or three line high divider is given its own page. That is just not going to work.... I tried removing the DIV and it still gave each image its own page.

Any ideas why the SVG would give each image its own page?

I was really loving this resizing until now...ugh.

[Jellby]

height="100%" width="100%" might have something to do.

[Kaylee Skylyn]

Ok I mayhave misunderstood the thread then.

Removing one or the other may work....for now I'll keep width=100% and see if it works

Still darn annoyed the ePub does one thing on the desktop but totally different on the reader....this is exceedingly tiresome to transfer to the units to check every minor change. But eReader unpredictability is a different rant. :P

[eggheadbooks1]

Jellby:

Urgent: just when I thought I had it all done: the SVG wrapper that we devised is working great except for one thing that has just revealed itself: it causes the image to always start on a new page. That was fine with large images but I just tried to put a smaller image (my logo) in a wrapper and now the logo sits on its own page. Not what I had intended. I have tried putting in a style="page-break-before:avoid" value in but to no avail. Any ideas?

[eggheadbooks1]

I should add that the only solution I have come up with so far is that for images smaller than a mobile phone screen (the smallest screen the ebook would be viewed on) is to not put the image in a wrapper but to set a fixed pixel dimension.

[eggheadbooks1]

Also, when I did my original tests, if two images were back to back, and if they fit two to the page, they appeared as such. This starting on a new page only happens when the images is bookended with text.

[Jellby]

Unfortunately, SVG support is usually weak, and there are many issues in different readers. Moreover, there are many tricky interactions between HTML, CSS and SVG... Can we see you code? maybe there's something with it.

[eggheadbooks1]

Hi Jellby:

This is the code we eventually came up with:

<div class="Main" style="text-align: center;">
  <svg style="max-width:300px; max-height:600px"
 xmlns="http://www.w3.org/2000/svg" height="100%" width="100%"
 preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 300 600"
 xmlns:xlink="http://www.w3.org/1999/xlink" ><image height="600" width="300"
 xlink:href="../Images/Image1.jpg"></image>
  </svg>
</div>

It works great in that it achieves its objective of downsizing images on small screens while limiting the potential upsizing of small images beyond their native dimensions, and it allowed me to center the images, but all surrounding text is pushed off screen. So something like my logo on my title page I have had to simply set a fixed pixel dimension. I can also do a percentage of screen height.

When I first did these tests, I had only images in my test file. Two small images would display together on the screen so I did not imagine that surrounding text would not behave the same way. Wrong. The SVG wrapper is essentially behaving like text jump text wrap.

If there's nothing that can be done, so be it. It's still the lesser of two evils. But if there is a way to fix this that would be great.

[Jellby]

I assume you change the 600 and 300 numbers for each image in the three places (image size, viewbox and max dimensions).

I don't see right off what could be causing your problem, except that maybe max-width and max-height are not working in your reader, or there's something in the "Main" class. You could try adding borders to the <svg> and <div> styles and see if that helps with debugging (they would tell you the true size of the elements).

[Kaylee Skylyn]

I was having similar issue but once one of the height="100%" width="100%" was removed it works fine. In my situation the images are all wider than tall so I removed the height="100%" from the code and it works fine on my Sony and Aldiko android app.
I think...can't find the right code at the moment....

I think this is the code that worked for me...For the opening banner, as it was much wider than tall:

<div class="cenimage">
    <svg style="max-width:576px; max-height:288px" xmlns="http://www.w3.org/2000/svg" width="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 576 288" xmlns:xlink="http://www.w3.org/1999/xlink" >
      <image height="288" width="576" xlink:href="images/masterpostbanner-1.png" ></image>
    </svg>
</div>

Where the div is just:

div.cenimage {text-align: center;}

[eggheadbooks1]

Kaylee: removing the height in this case worked perfect. Thanks!