Image scaling best-practices

[Gregg Bell]

Originally Posted by jhowell

When you leave out the width/height styling entirely for those images in your book the KFX coding generated becomes width:39.063%, producing a 234x351 pixel image on your 600x800 device. I can't explain why this occurs. I do not understand all of the heuristics used during KFX conversion.


Yes.

In the Amazon Kindle Publishing Guidelines section 9.4.2 (Image Size and Quality Standards) the minimum recommended size for a full page image is 1200x1800 pixels. So if you want your covers to occupy approximately 1/4 of the width of a screen the minimum image width should be 1200/4 = 300 pixels. Using 400 wide would be a good choice.



In section 9.4.3 (Image Dimensions for Responsive Layouts) has guidance for how to style the images: "Amazon recommends that block and float images be styled using a percentage value for the width style attribute. This will ensure that images always occupy the same percentage of space on the screen irrespective of device resolution."

They fail to mention that this won't work well on older devices that only handle mobi7 format. For the best results across all devices I think that you should use media queries to have different coding for mobi7 (pixels) and kf8/kfx (percent) devices.

Thanks, jhowell, for the very concise helpful reply. (I loved your "yes.") Full disclosure: I am just a writer, so a lot of this stuff is very close to being over my head. That said, for simplicity's sake, I'm tempted just to make all my backmatter images just like this:

<div class="center">
    <img alt="Saving-Baby400X600" src="../Images/Saving-Baby400X600.jpg"/>
  </div>

That would let KFX do it's 39.063% thing and, as you said, the image would be 234X351 on a 600X800 screen. Ah, but on a 1800X2700 screen I would need an image at least 703 pixels wide (and 1055 high) or it will blur my 400 wide image.

What if I use an image that is 800X1200? That would cover a screen that was even 2000 wide. (780X1170)

So:

<div class="center">
    <img alt="Saving-Baby800X1200" src="../Images/Saving-Baby800X1200.jpg"/>
  </div>

I'm going to study media queries too. There is a CSS school entry on it. And maybe SlowSmile's plugin would be a good way for me to go? https://www.mobileread.com/forums/sh...d.php?t=288294

Thanks again.

[Hitch]

Originally Posted by Gregg Bell

Thanks for finding the thread, Hitch. I too looked for it and couldn't find it.

I knew the Previewer in KDP changed but I didn't not know there was a downloadable Previewer 3. But you said, in that thread, it's pretty much worthless, right?

I thought Dion's

img {width:75%; max-width:250px}

might be the ideal solution. KF7 wouldn't work with that? It wouldn't recognize the 250 limit?

No, otherwise we'd all do that, instead, wouldn't we? KF7 does not use/recognize CSS. It runs off of HTML commands, essentially, so you have to hard code the image size (fixed, maximum, whatever) in the image tag itself. That's why Slowsmile's plugin works, it codes each image twice. Once for KF8, once for KF7.

I wanted to try SlowSmile's plugin, https://www.mobileread.com/forums/sh...d.php?t=288294 but didn't know if I had Python 3.4. (screenshot) Does that mean I have 3.4 or do I have to get it? (And if I have to get it, where would I get it?)

Thanks.

If you're running other plugins that use Python, it's probably already installed, no? Why not just install the plugin, and run it? It will either work, or it won't. Right? Doesn't work, you probably need to install 3.4. If it does, hooray. I'm big on the KISS method.

Hitch

[DNSB]

Originally Posted by Gregg Bell

I wanted to try SlowSmile's plugin, https://www.mobileread.com/forums/sh...d.php?t=288294 but didn't know if I had Python 3.4. (screenshot) Does that mean I have 3.4 or do I have to get it? (And if I have to get it, where would I get it?)

Just make sure the Use Bundled Python checkbox is checked when you open Manage Plugins. No need to install an external Python interpreter.

[DiapDealer]

Originally Posted by DNSB

Just make sure the Use Bundled Python checkbox is checked when you open Manage Plugins. No need to install an external Python interpreter.

Gregg's using Linux. The Bundled Python checkbox isn't relevant to Linux users (unless they're using one of my standalone versions). Linux Sigil relies on the system Python.

What's your Linux flavor/version again, Gregg? I forget. I'd be surprised if you didn't have at least Python3.4. EDIT: in fact I know you have 3.4 (or higher) installed. Sigil wouldn't function at all otherwise. So it's merely a matter of making sure the recommended Python modules are all installed for a fully-functioning Sigil plugin framework.

[DNSB]

Originally Posted by DiapDealer

Gregg's using Linux. The Bundled Python checkbox isn't relevant to Linux users (unless they're using one of my standalone versions). Linux Sigil relies on the system Python.

Just checked and the version I have under Linux is one of yours. The install was about a year ago and I had a couple of posts about a missing icon. I'd forgotten all about where it came from.

[Gregg Bell]

Originally Posted by Hitch

No, otherwise we'd all do that, instead, wouldn't we? KF7 does not use/recognize CSS. It runs off of HTML commands, essentially, so you have to hard code the image size (fixed, maximum, whatever) in the image tag itself. That's why Slowsmile's plugin works, it codes each image twice. Once for KF8, once for KF7.

Thanks Hitch. I get it now.

But what about jhowell's idea (post #26) of anything that's in the html image tags without the "height" and "width" stuff added (like the attachment but with 800X1200 instead of 200X300) is displayed at 39.063%. So at 600X800, the Kindle 7 Touch resolution, the image would be displayed at 234pxX351px, which is 1.36"X2.05", which is good. On the Amazon Fire HD8 tablet it would be 312pxX468px, which would be 1.65"X2.48", which would also be good and so on.

Originally Posted by Hitch

If you're running other plugins that use Python, it's probably already installed, no? Why not just install the plugin, and run it? It will either work, or it won't. Right? Doesn't work, you probably need to install 3.4. If it does, hooray. I'm big on the KISS method.

Hitch

I don't have 3.4 I only have 2.7.12. I'm researching how to get 3.4.

[jhowell]

Originally Posted by Gregg Bell

But what about jhowell's idea (post #26) of anything that's in the html image tags without the "height" and "width" stuff added (like the attachment but with 800X1200 instead of 200X300) is displayed at 39.063%. So at 600X800, the Kindle 7 Touch resolution, the image would be displayed at 234pxX351px, which is 1.36"X2.05", which is good. On the Amazon Fire HD8 tablet it would be 312pxX468px, which would be 1.65"X2.48", which would also be good and so on.

That was not meant as a suggestion! I recommend against leaving out styling for your images.

The 39.063% that appears in KFX if you use no styling for a 200x300 image is not a constant. It depends on the image size. If you use a 400x600 image with no styling you get width:78.125% as a result instead. I can't explain why these occur and do not recommend relying on them.

Percentage width should be used. And if you are concerned about the best look for older, non-KF8/KFX devices, also using height/width in pixels via media queries to cover that case.

[DiapDealer]

I moved the Linux Sigil plugin framework setup conversation back to the Sigil forum.

[Hitch]

Originally Posted by jhowell

That was not meant as a suggestion! I recommend against leaving out styling for your images.

The 39.063% that appears in KFX if you use no styling for a 200x300 image is not a constant. It depends on the image size. If you use a 400x600 image with no styling you get width:78.125% as a result instead. I can't explain why these occur and do not recommend relying on them.

Percentage width should be used. And if you are concerned about the best look for older, non-KF8/KFX devices, also using height/with in pixels via media queries to cover that case.

Thanks. As I said, Gregg. I didn't tell you to use the fallback styling for s&gs, I told you because that's what you need to do. If you just slap the image in there, without setting % or pixels, then on the older devices, all the images will be blown up to the largest possible size--the full size of the width of the device, if it can be. I strenuously recommend AGAINST that.

Hitch

[Gregg Bell]

Originally Posted by jhowell

That was not meant as a suggestion! I recommend against leaving out styling for your images.

The 39.063% that appears in KFX if you use no styling for a 200x300 image is not a constant. It depends on the image size. If you use a 400x600 image with no styling you get width:78.125% as a result instead. I can't explain why these occur and do not recommend relying on them.

Percentage width should be used. And if you are concerned about the best look for older, non-KF8/KFX devices, also using height/width in pixels via media queries to cover that case.

Thanks jhowell. I figured the 39.063% was too good to be true. Here's the result of a backmatter image (in my Kindle Touch 7) that was simply:

<img alt="ManofGodNewFinal800X1200" src="../Images/ManOfGodNewFinal800X1200.jpg"/>

see attachment

Kind of big and from what you're saying that would swamp the older Kindles.

Right now I'm thinking of this (for backmatter images):

<img alt="ManofGodNewFinal400X600" src="../Images/ManOfGodNewFinal400X600.jpg"/>

Does that sound sane? It shouldn't overwhelm the old Kindles and shouldn't be too tiny on the bigger Kindles and tablets.

Then if I can figure it out, I'll try the percentages and media queries.

[Gregg Bell]

Originally Posted by Hitch

Thanks. As I said, Gregg. I didn't tell you to use the fallback styling for s&gs, I told you because that's what you need to do. If you just slap the image in there, without setting % or pixels, then on the older devices, all the images will be blown up to the largest possible size--the full size of the width of the device, if it can be. I strenuously recommend AGAINST that.

Hitch

Thanks Hitch. But what about this for a backmatter cover:

<img alt="ManofGodNewFinal400X600" src="../Images/ManOfGodNewFinal400X600.jpg"/>

So it gets blown up on older Kindles. That's not that big at 400X600. And it won't be so tiny on the bigger stuff.

[jhowell]

Originally Posted by Gregg Bell

Does that sound sane?

It's your book. Do what works for you.

[Hitch]

Originally Posted by Gregg Bell

Thanks Hitch. But what about this for a backmatter cover:

<img alt="ManofGodNewFinal400X600" src="../Images/ManOfGodNewFinal400X600.jpg"/>

So it gets blown up on older Kindles. That's not that big at 400X600. And it won't be so tiny on the bigger stuff.

You want to be your basic know-nothing (technical) author, loads Word files, lets the chips fall where they may, GREAT. Then do that. But don't waste everyone's time, asking for the RIGHT solutions, when you're not going to bother to implement them. I mean, it's too hard? (Although slowsmile's plugin does ALL the work...) You can't be bothered? GREAT. But don't sit there and try to convince me that it's not going to look like crap.

And worse, then tell us all you're going to do X, and ask us if that's "okay" or to give our nod of approval. If we thought the shortcuts were "okay" in the first place, don't you think we would have said that?

The DX is 1200x824. Think about how that will look on THAT. URGh, why the hell did you even ASK us, if you have zero interest in really learning how to fix it? Why???


Hitch

[Gregg Bell]

Originally Posted by jhowell

It's your book. Do what works for you.

Thanks. Yeah. You're right.

[Gregg Bell]

Originally Posted by Hitch

You want to be your basic know-nothing (technical) author, loads Word files, lets the chips fall where they may, GREAT. Then do that. But don't waste everyone's time, asking for the RIGHT solutions, when you're not going to bother to implement them. I mean, it's too hard? (Although slowsmile's plugin does ALL the work...) You can't be bothered? GREAT. But don't sit there and try to convince me that it's not going to look like crap.

And worse, then tell us all you're going to do X, and ask us if that's "okay" or to give our nod of approval. If we thought the shortcuts were "okay" in the first place, don't you think we would have said that?

The DX is 1200x824. Think about how that will look on THAT. URGh, why the hell did you even ASK us, if you have zero interest in really learning how to fix it? Why???


Hitch

That's not fair, Hitch. I'm not here just to waste anybody's time. I started this post because I was freaked out by the tiny images (that I now know come from KFX). That was the problem that needed to be overcome. I figured it would be easy.

And yeah, I'm a little intimidated by all that's involved with overcoming it the right way. I'm afraid of screwing up or not knowing if I'll ever fully understand what I'm doing. Plugins. Media queries. You're used to them. To me they're foreign.

A big part of my fear is not (I should get a Kindle Fire HD8 today) knowing what the heck these images will look like on anything other than my Kindle Touch 7.

Honestly, without knowing, it seems like 400X600 should look good on DX's 1200X824 screen. That's the way it seems to me. You know better because you've seen it.

I'll try Slowsmile's plugin. It sounds cool. If you think I can handle it, I'm sure I can.