Images inside ebook stretched after converting

[mshubes]

This is driving me crazy! I converted an AZW3 file to an EPUB and the Calibre viewer shows the images just fine. But when I send that EPUB to my Kobo device, the images are stretched and resized. Why??? I've also tried sending it as a KEPUB and that doesn't change a thing. Tried converting it to a KEPUB first and sending that to the device, also no change. The images look fine on my Kindle Paperwhite, but I can't them to look right on my Kobo!

How do you convert an ebook so that all images (not just the cover) keep their aspect ratios?

[Karellen]

Can you open the book in the Editor.
Go to one of your images and paste the code for the image here.
Might also help if you paste the same code from the AZW3 file to see what is changing.

[theducks]

FWIW Calibre (and others) use common WEB tools that are very forgiving of bad code.
A common poor practice is

width: auto;
height: auto;

in the CSS for the image (style)
This is valid, just not ideal for e-readers.
Attach the CSS (Do NOT post the book unscrambled) and the line of code for a badly rendered image

[DNSB]

You might also want to try using the KindleUnpack plugin to convert azw3 to epub. It doesn't change the CSS and structure nearly as much as calibre ebook converter does.

[JSWolf]

Originally Posted by DNSB

You might also want to try using the KindleUnpack plugin to convert azw3 to epub. It doesn't change the CSS and structure nearly as much as calibre ebook converter does.

And then load the epUb into the editor and run epubcheck to fix the errors. There will be some errors.

[mshubes]

Using KindleUnpack plugin did nothing different than the regular Calibre conversion to epub. Below is a snipit of the code for one of the images. It has actual sizes!! So now I'm thinking I need to be asking this question in a Kobo forum rather than the Calibre forum!

<img align="center" border="0" width="533" height="480" src="../Images/image00023.jpeg"/>

[theducks]

Originally Posted by mshubes

<img align="center" border="0" width="533" height="480" src="../Images/image00023.jpeg"/>

AFAIK That is not valid coding.
Images go inside Block level (that is what gets the text-align:center)

AFAIK there is no align:. it is text-align: (see above)

Kobo's are fussy about the rules and will ignore things in broken code

[mshubes]

After seeing these responses, I did a little reading on Kobo EPUB Guidelines and discovered that images with both width and height properties can be distorted on the Kobo. The original AZW3 file had a lot of invalid coding, as pointed out above, including a bunch of empty divs trying to use "page-break-after:always" (which was NOT working). The file also had only one HTML (unsplit) and used all inline styles rather than a stylesheet.

The solution was to convert the AZW3 file into a new EPUB and let Calibre split it. Then edit the CSS in the stylesheet to remove all width properties from any image styles. This not only fixed the image aspect ratio problem, but now page breaks are working properly, as well.

It's interesting to see how the two devices—Kindle Paperwhite and Kobo (received recently as a gift)—handle ebook files so differently. I prefer the freedom of the Kobo (tired of jumping through hoops to get my books to work outside of the Amazon universe), but the Kindle does seem to be a lot more forgiving when it comes to reading code.

Thank you all for your responses that led to a working solution. Still learning!

[theducks]

Welcome to the world of different Device Makers do it their way.
(I am glad I don't have to coded books professionally )
Various models have their unique foibles.

That said, that code still had errors. W3C schools is a great references