Image upscale

[Elvys]

I've been looking for a solution for this with no luck…

I have a Physics book filled with images containing lots of formulas and symbols in rather poor quality. I've used an upscaling software, and the results are surprisingly good.
The problem is that the formulas now appear at 4 times the original size, and it's quite annoying. Is there a way for Sigil to include the original image size in the code so that once the images are replaced, they occupy the same container?

I hope I have explained myself well
Thank you very much in advance!

[DiapDealer]

If the images are sized via css in the epub, replacing the images will not change how they display. If they were not sized via css in the epub, there is no magic pill that I know of that will fix it. The only thing I know to do is to make note of the dimensions of the original images and then add css that will constrain the new ones to that size.

No doubt someone will come along shortly with a better solution.

[Vanguard3000]

Closest I could suggest would be to add a class/style to all of your images to clamp them to the screen's dimensions, so they don't spill outside the page. I often use something like:

img {
width:100%;
max-height:100%;
object-fit:contain;
}

Sometimes I'll change the max height to 80% or so if you want to leave some room for a caption. But if you've got images that are floating left or right, varying widths and so forth and there's no existing styling, you may have to go through it manually and add a few of your own classes.

[Turtle91]

I use something similar. I’ll set the % of the screen I want to use but also limit the maximum to roughly the size of the images dimension. This helps a lot to prevent over-expanding the image and making it fuzzy.

CSS:
img     {max-height:100%; max-width:100%}
div.image {width:50%; margin:1em auto}
div.image img {max-width:600px}

HTML:
<div class="image"><img alt="" src="../Images/test.jpg"/></div>

**set to the actual dimension of the image. 

[Elvys]

Thanks a lot for the answers. The solution of giving all images a fixed 100% or less size won't do the trick. Some images are too small for that, IMO.

Looks a little overkill think



There are more than a thousand images, so adding the sizes manually for all of them is out of the question.

Maybe I can find some kind of script that parses the dimensions of all images and then doing some kind of find/replace

[DNSB]

I would suggest something like using a style to set the image size relatively close to the text size. Change the height to get your best match.

Something like:

.formula {
height: 1.5em;
width: auto;
}

And in the text files, use something similar to the following:

<img alt="formula name" class="formula" src="../Images/formula002.jpeg">

I suspect that Regex will be your best friend for this task.

[Elvys]

Originally Posted by DNSB

I would suggest something like using a style to set the image size relatively close to the text size. Change the height to get your best match.

Something like:

.formula {
height: 1.5em;
width: auto;
}

And in the text files, use something similar to the following:

<img alt="formula name" class="formula" src="../Images/formula002.jpeg">

I suspect that Regex will be your best friend for this task.

I'm afraid that wouldn't work either, some formulas are several lines height.

[JSWolf]

Originally Posted by Elvys

I've been looking for a solution for this with no luck…

I have a Physics book filled with images containing lots of formulas and symbols in rather poor quality. I've used an upscaling software, and the results are surprisingly good.
The problem is that the formulas now appear at 4 times the original size, and it's quite annoying. Is there a way for Sigil to include the original image size in the code so that once the images are replaced, they occupy the same container?

I hope I have explained myself well
Thank you very much in advance!

You could use one of the various math formula creators on the web that saves to SVG and go that route to replace the low-res images.

[DNSB]

Originally Posted by Elvys

I'm afraid that wouldn't work either, some formulas are several lines height.

There is not going to be a magic one size fits all solution.

[Elvys]

Originally Posted by JSWolf

You could use one of the various math formula creators on the web that saves to SVG and go that route to replace the low-res images.

More than a thousand formulas on the book. Too much work

[JSWolf]

Originally Posted by Elvys

More than a thousand formulas on the book. Too much work

Return the eBook and buy the pBook version instead.

[Elvys]

Originally Posted by DNSB

There is not going to be a magic one size fits all solution.

Every image has metadata in it, including the size in pixels.
There must be a way to extract it…

[JSWolf]

Originally Posted by Elvys

Every image has metadata in it, including the size in pixels.
There must be a way to extract it…

Not easily and not such that it would come out as the code you need for an ePub.

[DNSB]

Originally Posted by Elvys

Every image has metadata in it, including the size in pixels.
There must be a way to extract it…

Probably but will it be less work than breaking the formulas into 1 line/2 line/etc though the example you gave of kg-m/s2 could easily be expressed as kg-m/s<superscript 2>.

[Elvys]

Originally Posted by DNSB

Probably but will it be less work than breaking the formulas into 1 line/2 line/etc though the example you gave of kg-m/s2 could easily be expressed as kg-m/s<superscript 2>.

There are more than a thousand formulas. Many look like this:



Too much work to do manually.
It would be faster to enter the size of each one