Images in Sigil (ePub)

[mmat1]

Originally Posted by bentleymaniac

So, I tried it on my Kobo Glo HD, and was majorly disappointed.
The images display at about a quarter the size of the screen, (1/2 width and 1/2 height), and they have massive page breaks before and after.

What I'm really trying to do is have the image float slightly, so that it displays full screen (on every device) at the next page turn after a particular referenced point in the text. So, for instance, you have the description of an event happening, and the next page turn gives you the illustration full screen, then the next page turn back to text WITHOUT having three quarters of the page before the illustration blank because the image is forced in a particular spot in the text.

Any ideas? I'm stumped.

hi.
I edited your code a bit and deleted some stuff. try

div.inline {
	page-break-inside:avoid;
	text-align:center;
}

div.inline
	img {
		max-height:100%;
		width:100%;
		max-width:100%;
	}

[Notjohn]

What does max-width:100% do that width:100% doesn't?

Keeps it from running off the "page," I suppose, but why would it do that?

[mmat1]

Originally Posted by Notjohn

What does max-width:100% do that width:100% doesn't?

Keeps it from running off the "page," I suppose, but why would it do that?

Hi,
max-width/height are limits, which the picture must not exceed.
width: 100% sets the picture to the maximum size within these limits.

Consider, that there are 4 modes of viewing:
- the picture could be in a landscape or a portrait-shape.
- the user could have his device in portrait oder landscape-mode

the css should be fine for all 4 .

[fbrzvnrnd]

Originally Posted by mmat1

Hi,
max-width/height are limits, which the picture must not exceed.
width: 100% sets the picture to the maximum size within these limits.

Consider, that there are 4 modes of viewing:
- the picture could be in a landscape or a portrait-shape.
- the user could have his device in portrait oder landscape-mode

the css should be fine for all 4 .

No, with your CSS, a high image, higher than wide, would end up off the page.

[mmat1]

Originally Posted by fbrzvnrnd

No, with your CSS, a high image, higher than wide, would end up off the page.

It should not; thats why the max-height attribute is there. You should get an image with the high of the screen and borders at each side.

However, there may be some devices, which mess this up, thats not my fault...

[fbrzvnrnd]

Originally Posted by mmat1

It should not; thats why the max-height attribute is there. You should get an image with the high of the screen and borders at each side.

However, there may be some devices, which mess this up, thats not my fault...

Actually Adobe Digital Edition override the max-height rule with the width one. So, every ebook reader based on Adobe Digital Mobile.

[fbrzvnrnd]

Originally Posted by fbrzvnrnd

Actually Adobe Digital Edition override the max-height rule with the width one. So, every ebook reader based on Adobe Digital Mobile.

(and - again - the height and width % are referred to the containing block, not the page. So, theoretically, the body).

[Turtle91]

It would really be convenient if there was a "page-height/width" or "screen-height/width" to use in CSS....maybe it'll make it into CSS4???

In the meantime, If I need the image to fill the screen, I just wrap it in SVG. If the device/app you are coding for doesn't support SVG in anything but the cover, then I'd ditch the app...lol....or just have individualized css for images that are wider than tall, and those that are higher than wide.

div.inline {text-indent:0; 
            text-align:center; 
            margin:.25em auto;
            page-break-inside:avoid}

div.tall {line-height:5}
div.wide {width:100%}

img {max-width:100%; max-height:100%}
div.wide img {width:100%}
div.tall img  {height:100%}

<div class="inline wide"><img alt="" src="../Images/pic.jpg" /></div>
<div class="inline tall"><img alt="" src="../Images/pic.jpg" /></div>

Of course you would have to adjust the line-height to reflect the relative size of the image to the font-size and it doesn't work so well if you are trying to float the image. If you are doing multiple (tons) images within the book then it might be easier to add that style within the individual <div> tags just to keep track of them all. But I'd try and stick to keeping styling in the css if at all possible.

<div class="inline tall" style="line-height:3em">

[fbrzvnrnd]

Originally Posted by Turtle91

It would really be convenient if there was a "page-height/width" or "screen-height/width" to use in CSS....maybe it'll make it into CSS4???

In the meantime, If I need the image to fill the screen, I just wrap it in SVG. If the device/app you are coding for doesn't support SVG in anything but the cover, then I'd ditch the app...lol....or just have individualized css for images that are wider than tall, and those that are higher than wide.

div.inline {text-indent:0; 
            text-align:center; 
            margin:.25em auto;
            page-break-inside:avoid}

div.tall {line-height:5}
div.wide {width:100%}

img {max-width:100%; max-height:100%}
div.wide img {width:100%}
div.tall img  {height:100%}

There is problem with tall images and ADE, when the page is very high and narrow.

[mmat1]

Originally Posted by fbrzvnrnd

(and - again - the height and width % are referred to the containing block, not the page. So, theoretically, the body).

Yes, but if there is no container with a limited size, then it refers to page.

I agree, that max-height/width don't work as had I expected. (Hell, it would be too easy).

So the easiest solution for the Problem of the OP is to set height/width to 100% separately for each picture according to it's aspect ratio and orientation.

[Toxaris]

Originally Posted by fbrzvnrnd

There is problem with tall images and ADE, when the page is very high and narrow.

Not if you put it in an SVG wrapper with the aspect ratio maintained. Also, height is the height of the container, not the page. That can give strange results.

[fbrzvnrnd]

The real question is: why IDPF still makes us working with WEB tools instead ebook ones?

[bentleymaniac]

so it seems the code needs to make changes depending on the aspect ratio of the screen. so, if the screen is of a wider moving to landscape orientation, then do this, but if a skinny portrait, then do that.

I doubt this would be possible in css, but the next best thing would be to lock it into displaying at a set aspect ratio in portrait, so that there is no chance of the screen shape changing. If you know the screen's aspect ratio, you should be able to set width and height dimensions depending on the ratio of the image.

Problem is, I'm only new to ebook editing and creation, so have no idea how to do that.

I'm also completely illiterate in svg, but I think that setting the display's aspect ratio would allow me to use css for the images.

I think that there would be less danger of setting width=100% if you could be certain of the screen's aspect ratio. (I'm guessing this is needed more for computers and phones/tablets than eInk readers)

[bentleymaniac]

so, I've gone through and changed html for each image depending on the aspect ratio, in the form

<img style="height:100% width:auto" alt="Image_03" src="../Images/Image_03.png"/>

and

<img style="height:auto width:100%" alt="Image_03" src="../Images/Image_03.png"/>

so now my problem is that I still need to set the orientation of the screen to always portrait.

Also, ADE and Kobo are not displaying my embedded fonts (I think I have a coding error there).

Any help would be much appreciated.

The epub is attached (still incomplete, of course)untitled.epub

[Tex2002ans]

Originally Posted by bentleymaniac

1) what image format is best for epubs (jpg, png, svg, etc)

Depends on what the content of the image is.

If the image is realistic, like a "picture" or a "photograph", then JPG is probably your best bet.

If the image is computer-generated, text, or a handful of colors, like a Table/Graph/Chart/Formula/Screenshot/Line Drawing, then PNG is probably your best bet.

I always point back to my post about optimizing image size:

https://www.mobileread.com/forums/sho...45#post2499645

I have a sample of a chart there saved in JPG + varying PNGs.

Originally Posted by bentleymaniac

What I'm really trying to do is have the image float slightly, so that it displays full screen (on every device) at the next page turn after a particular referenced point in the text. So, for instance, you have the description of an event happening, and the next page turn gives you the illustration full screen, then the next page turn back to text WITHOUT having three quarters of the page before the illustration blank because the image is forced in a particular spot in the text.

What you are explaining here isn't possible in EPUB. Your best bet is to just stick the image in a logical position between two paragraphs.

Side Note: I deal with this problem all the time when digitizing PDFs. In physical books, typically Tables/Figures are "floated" to the top/bottom/middle/next page for typography reasons.

Back in 2014 I posted an example with orange boxes highlighting the area:

PDF: https://www.mobileread.com/forums/att...8&d=1392797612
EPUB: https://www.mobileread.com/forums/att...9&d=1392797612

In that case, I just inserted the Fig. 1 directly after the full paragraph. If the Figure is relevant to a specific paragraph on the page before, then in the EPUB you might try to insert the image directly after the paragraph it is referenced in.

Originally Posted by bentleymaniac

so it seems the code needs to make changes depending on the aspect ratio of the screen. so, if the screen is of a wider moving to landscape orientation, then do this, but if a skinny portrait, then do that.

I doubt this would be possible in css, but the next best thing would be to lock it into displaying at a set aspect ratio in portrait, so that there is no chance of the screen shape changing. If you know the screen's aspect ratio, you should be able to set width and height dimensions depending on the ratio of the image.

An SVG Wrapper already handles portrait/landscape and resizing the image while maintaining the proper ratio (just like it does for the SVG Covers).

Using the CSS Method, you run the chance of getting "oompa loompas" (the image gets stretched too wide), or a part of the image may run off the edge of the screen (think skinny/tall image on a cell phone that is landscape). As was explained previously (and in many other threads on this same topic), the way "height" is computed is not what you expect.

Originally Posted by bentleymaniac

I'm also completely illiterate in svg, but I think that setting the display's aspect ratio would allow me to use css for the images.

So if you take a look at the SVG Cover code that Sigil generates, you just have to substitute the X/Y values for each specific image.

Let us take your Image_01 for example. It is 499x767 pixels.

<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 499 767" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="499" height="767" xlink:href="../Images/Image_03.png"/>
</svg>
</div>

The Red text is where your substitute in the specific width/height of your image.

The Blue text is where you point to your specific image.

Originally Posted by bentleymaniac

The epub is attached (still incomplete, of course)

Ouch... your PNGs are seriously bloated. You have some colored speckles all over the place (probably artifacts of the scanning process or if you got it from a color scan where they used cameras instead... or somewhere along the line someone saved it as a lossy format (JPG)).

Image_05 + Image_06 + Image_07 were the absolute worst.

If you zoom in really far into a "white" section of the image, you can see all of the light gray/yellow speckles.

Also, some colors can be introduced in some Anti-Aliasing algorithms. So an image that you think is grayscale is actually full of all different shades of colors.

Here is a super zoomed in image to show you the speckles + colors due to AA:



I was able to do some basic touchups to get rid of the speckles and the PNGs went from 2.08 MBs -> 493 KBs. Even more can be saved if you were to Index the images (I compressed them down to 308 KBs from Indexing the PNGs to 17 shades of gray).

The book seems to be under copyright still, so I can't upload the fixed versions.

There was a lot of discussion of cleaning up Black/White/Grayscale images (here are the last two I remember):

https://www.mobileread.com/forums/sho...d.php?t=225518
https://www.mobileread.com/forums/sho...d.php?t=262301

Everyone has their own methods to cleanup. I personally just use GIMP (and I don't do anything advanced like in the topics above).