Calibre is not resizing images

[etrnlflame]

For some reason Calibre isn't resizing my images when I convert a .docx to an epub format. All of the forums that I find say it will automatically resize, but I've tried .png .jpg and .svg versions of the same image and they haven't been resizing. Instead they appear off the page. This doesn't really help, considering the main problem-image is a map.

The images will resize on an iPhone, iPad and MacOS iBooks, but not a Kobo ereader, even though the output type is set to Kobo.

My book is a novel with only black and white images and reflowable text. Help would be appreciated!

[GeoffR]

Originally Posted by etrnlflame

For some reason Calibre isn't resizing my images when I convert a .docx to an epub format. All of the forums that I find say it will automatically resize, but I've tried .png .jpg and .svg versions of the same image and they haven't been resizing. Instead they appear off the page. This doesn't really help, considering the main problem-image is a map.

The images will resize on an iPhone, iPad and MacOS iBooks, but not a Kobo ereader, even though the output type is set to Kobo.

My book is a novel with only black and white images and reflowable text. Help would be appreciated!

Calibre only resizes the image file, it doesn't change the CSS or HTML styles for the images. This means that the image will only be displayed at the resized size if there are no CSS or HTML styles affecting the size. If the size is being set in CSS or HTML then all that happens is that the downsized image gets scaled up again resulting in a poor quality rendering on screen.

First of all don't set the output type to "Kobo", because this refers to the original ancient Kobo devices that had extremely low resolution screens. Instead use "Tablet" so that the image file doesn't get resized.

Second, you will usually need to edit the CSS or HTML styles so that the image displays at the size you want. E.g. if you want a map to fill the avaliable screen (i.e. changing the aspect ratio to match the available screen) then use height:100%; width:100%; for the img object. Or if you want to display the image as large as will fit on the screen but retaining the original aspect ratio then use height:100%; width:auto; max-width:100%; for images with a taller aspect ratio than the screen, or height:auto; max-height:100%; width:100%; for images with a wider aspect ratio than the screen. Alternatively you can use <svg> styles to resize the image which gives more control than <img>.

(If you don't care about the aspect ratio and the only problem is that the images are too big for the screen then you might get away with just adding img {max-height:100%; max-width:100%;} to the book's stylesheet.)

[un_pogaz]

I asked more or less the same question
https://www.mobileread.com/forums/sh...d.php?t=313771

tldr: Try setting the output profile to tablet.

It's work.

[etrnlflame]

Thanks so much for the reply! It's my first self-published eBook and I'd like to get everything right.

I put the style code into Look at Feel > Styling:

img {max-height:100%; max-width:100%;}

I also put it into tablet export (so much nicer, thanks for that tip).

However the image is still going off the page vertically. It seems to fit horizontally but not vertically now. It it maybe not possible to win both?

[GeoffR]

Originally Posted by etrnlflame

Thanks so much for the reply! It's my first self-published eBook and I'd like to get everything right.

I put the style code into Look at Feel > Styling:

img {max-height:100%; max-width:100%;}

I also put it into tablet export (so much nicer, thanks for that tip).

However the image is still going off the page vertically. It seems to fit horizontally but not vertically now. It it maybe not possible to win both?

That could be caused by a top-margin or -padding style on the img or on body, if that is the case then you need to either remove the margin/padding, or reduce the image height to allow for it. But you can't do everything by tweaking the Calibre conversion parameters without messing up other things in the book, so you will likely need to edit the ePub.

Here is a simple example of styles for a full-page image using <img>:

stylesheet.css:

body.full-page-image { margin:0; padding:0; }
div.full-page-image { margin:0; padding:0; text-align:center; }
img.full-page-tall { margin:0; padding:0; height:100%; width:auto; max-width:100%; }
img.full-page-wide { margin:0; padding:0; height:auto; max-height:100%; width:100%; }
img.full-page-stretch { margin:0; padding:0; height:100%; width:100%; }

map.html

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Map</title>
  <link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body class="full-page-image">
  <div class="full-page-image">
    <img alt="Map" src="map.jpg" class="full-page-stretch"/>
  </div>
</body>
</html>

[etrnlflame]

Thank you very much for helping me figure out which direction to go! I'll focus on the epub rather than Calibre.

Thanks again!

[etrnlflame]

Originally Posted by GeoffR

That could be caused by a top-margin or -padding style on the img or on body, if that is the case then you need to either remove the margin/padding, or reduce the image height to allow for it. But you can't do everything by tweaking the Calibre conversion parameters without messing up other things in the book, so you will likely need to edit the ePub.

Here is a simple example of styles for a full-page image using <img>:

stylesheet.css:

body.full-page-image { margin:0; padding:0; }
div.full-page-image { margin:0; padding:0; text-align:center; }
img.full-page-tall { margin:0; padding:0; height:100%; width:auto; max-width:100%; }
img.full-page-wide { margin:0; padding:0; height:auto; max-height:100%; width:100%; }
img.full-page-stretch { margin:0; padding:0; height:100%; width:100%; }

map.html

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Map</title>
  <link href="stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body class="full-page-image">
  <div class="full-page-image">
    <img alt="Map" src="map.jpg" class="full-page-stretch"/>
  </div>
</body>
</html>

Thank you so much again! I know code less than I'd like and can't seem to figure out how to apply your code to the image on this page:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Elemental Links</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="stylesheet.css" rel="stylesheet" type="text/css"/>
<link href="page_styles.css" rel="stylesheet" type="text/css"/>
</head>
<body class="calibre">
<p class="block_15" id="calibre_pb_3"><img src="images/Southern_Elabrium_map_eBook.jpeg" alt="Image" class="calibre6"/></p>
</body></html>

One last bit of help would be very appreciated

[DNSB]

Originally Posted by etrnlflame

Thank you so much again! I know code less than I'd like and can't seem to figure out how to apply your code to the image on this page:

One last bit of help would be very appreciated

Open the stylesheet.css or whatever it's name happens to be and copy/paste the four classes Geoff supplied into it.

Convert your single line showing the map:

<p class="block_15" id="calibre_pb_3"><img src="images/Southern_Elabrium_map_eBook.jpeg" alt="Image" class="calibre6"/></p>

to:

<div class="full-page-image">
<p class="block_15" id="calibre_pb_3"><img src="images/Southern_Elabrium_map_eBook.jpeg" alt="Image" class="full-page-stretch"/></p>
</div>

Replace the full-page-stretch with whichever of the three classes works better for you.

Personally, I prefer to use an svg wrapper for full screen images.

<style type="text/css">
@page {padding: 0pt; margin:0pt}
            body { text-align: center; padding:0pt; margin: 0pt; }
</style>
</head>

<body class="nomargin">
  <div class="svg_wrapper">
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1500" width="1000" xlink:href="../Images/cover.jpg"/></svg>
  </div>

In the stylesheet:

.nomargin {
    display : block;
    text-align : center;
    margin : 0 0 0 0;
}
.svg_wrapper {
    display : block;
    margin : 0 0 0 0;
    padding : 0 0 0 0;
    text-align : center;
}

I prefer to have images in an Images directory, text in a Text directory, etc. hence the paths shown in my sample.

Change the height/width in both places to match your image and it will be fitted to the full screen. And yes, the multiple margin and padding settings are redundant but they work around some oddities in epubs I've edited.