Image scaling best-practices

[Notjohn]

Just use a width instruction in the html. I go width="100%" in most instances, and it works fine in Kindle and, from what I'm able to determine, in B&N and Apple etc as well.

Bearing in mind the old Kindles' habit of blowing up every image to full screen or the pixel dimensions, whichever is smaller, I am also conscious of the pixel dimensions of small images. Thus for my publisher's colophon I go width="15%" but also restrict the gif to 100x100 pixels. The result is not ideal on Kindle or Kindle 2 or DX, but it's okay.

[Gregg Bell]

Originally Posted by Notjohn

Just use a width instruction in the html. I go width="100%" in most instances, and it works fine in Kindle and, from what I'm able to determine, in B&N and Apple etc as well.

Bearing in mind the old Kindles' habit of blowing up every image to full screen or the pixel dimensions, whichever is smaller, I am also conscious of the pixel dimensions of small images. Thus for my publisher's colophon I go width="15%" but also restrict the gif to 100x100 pixels. The result is not ideal on Kindle or Kindle 2 or DX, but it's okay.

Thanks Notjohn. I've been exploring this issue a bit. Seems pretty complicated. Thanks for your feedback.

[Hitch]

Originally Posted by Gregg Bell

Thanks Notjohn. I've been exploring this issue a bit. Seems pretty complicated. Thanks for your feedback.

Gregg:

It's not complicated, it's pretty simple. The "right size" images have NO image sizing in them, and the "small" ones do. Your small ones say something like "width = 200" for 200px, and yes, those would be quite, quite small.

In one instance, you allowed the image to render to its full size (assuming that there wasn't any cascading CSS that would restrict it) and in the other, you restrained it to 200px wide, which is TINY in 99% of the newer Kindles.

That's all. No black magic.

Hitch

[Gregg Bell]

Originally Posted by Hitch

Gregg:

It's not complicated, it's pretty simple. The "right size" images have NO image sizing in them, and the "small" ones do. Your small ones say something like "width = 200" for 200px, and yes, those would be quite, quite small.

In one instance, you allowed the image to render to its full size (assuming that there wasn't any cascading CSS that would restrict it) and in the other, you restrained it to 200px wide, which is TINY in 99% of the newer Kindles.

That's all. No black magic.

Hitch

Thanks Hitch. There is no cascading CSS in my ebooks. (And for clarification's sake, the "tiny" images display in my 6" Kindle Touch as .625" by 1". screenshot 34) All my back matter images (except for my author photo, which is 325px by 244px) are 200px by 300 px. 200 pixels is 2.08" and 300 pixels is 3.125". If displayed at their full size, how would those images be tiny on any Kindles? It seems to me 200px by 300px would be too big on a 6" Kindle Touch and just about right size on a ten inch tablet. (These are just backmatter images of covers of my other ebooks. screenshot 50 is of a "right" size image--actual size of 1.25" by 1.75")

Even the images that display bigger and look right are not displayed as 2.08" by 3.125". At least not on my 6" Touch Kindle where they are displayed as 1.25" by 1.75." If they displayed as 2.08" by 3.125" they would take up more than half the screen and be too big (in my opinion anyway).

An added (mind bending) complication. (Now all this refers to updated versions of my ebooks I'm delivering from Amazon's Manage Your Contents and Devices "Content" tab to my 6" Touch Kindle via Whispersnyc.)

What I've found is that when I download, as opposed to using the Whispersync, the actual file of the updated ebook to my Downloads folder and then hook up a USB cable and upload the file to my Kindle, the images display larger (1.25" by 1.75") and "right" size, if you will.

It seems that, at least on my Kindle, the Whispersyncing may be sending the .625" X 1" image sizes for some reason. (Why, I have no idea.)

Could it be that my images with the height and width information specified (screenshot 20) are actually being displayed properly on regular first time purchases?

[Hitch]

Originally Posted by Gregg Bell

Thanks Hitch. There is no cascading CSS in my ebooks. (And for clarification's sake, the "tiny" images display in my 6" Kindle Touch as .625" by 1". screenshot 34) All my back matter images (except for my author photo, which is 325px by 244px) are 200px by 300 px. 200 pixels is 2.08" and 300 pixels is 3.125". If displayed at their full size, how would those images be tiny on any Kindles? It seems to me 200px by 300px would be too big on a 6" Kindle Touch and just about right size on a ten inch tablet. (These are just backmatter images of covers of my other ebooks. screenshot 50 is of a "right" size image--actual size of 1.25" by 1.75")

Inches are utterly irrelevant, in the way that you're using them. Your images are displaying pixel-for-pixel, on the devices, except when instructed otherwise. If memory serves, the touch has the old 600x800 resolution, is that right? That would mean that 200pixels would be 1/3rd of the width of the screen, 25% of the height. Your coding, per your screenshots, (which I can't see when I reply, which is seriously annoying) says something like 300px high, I believe. That, then, is how it displays, period.

On an HD Kindle, which can have a screen resolution of, say, 1024 px wide on a Paperwhite, 200pixels in width is going to be ~1/5th of the screen, and tiny. Understand?

I'm not sure what you're doing, here: "200 pixels is 2.08" and 300 pixels is 3.125" or where you got it from or what you're thinking? 200px is what I mentioned, above, if I have the right generation of the device, the 600x800.

Even the images that display bigger and look right are not displayed as 2.08" by 3.125". At least not on my 6" Touch Kindle where they are displayed as 1.25" by 1.75." If they displayed as 2.08" by 3.125" they would take up more than half the screen and be too big (in my opinion anyway).

An added (mind bending) complication. (Now all this refers to updated versions of my ebooks I'm delivering from Amazon's Manage Your Contents and Devices "Content" tab to my 6" Touch Kindle via Whispersnyc.)

What I've found is that when I download, as opposed to using the Whispersync, the actual file of the updated ebook to my Downloads folder and then hook up a USB cable and upload the file to my Kindle, the images display larger (1.25" by 1.75") and "right" size, if you will.

What are you talking about here? Vis-a-vis "whispersynch," I'm not sure what you're talking about. Are you talking about copies of your for-sale books that you're downloading from the KDP, as your purchases? Or copies of your books that you've revised, that you think you're sideloading, or what? Can you please clarify exactly what you're doing? You should not see any difference in the display of a purchased book, no matter how it gets to your Kindle, if it's sent from Amazon. If, however, you are talking about the difference between how your revised book looks, in how YOU send it to a Kindle, that's explicable.

It seems that, at least on my Kindle, the Whispersyncing may be sending the .625" X 1" image sizes for some reason. (Why, I have no idea.)

Perhaps it's just me, but I don't understand what you mean, in terms of the difference, when you say "whispersynch." Are you trying to say that if you manually download the file, from Manage Your Content and Devices, it looks different than if you "synch" it from the device itself? (As you can tell, I never use the myriad cute "functions" that Amazon uses to describe "move file from Amazon to Kindle." This includes the falsely-named "wifi" nonsense.) My next question would be, okay, once you have the file on your computer, how do you get it to the device? Be very specific in how you answer, because the transmission method CAN be problematic and cause differences in image appearance. You don't mean that faux WiFi thing, on the File Browser, do you?

Could it be that my images with the height and width information specified (screenshot 20) are actually being displayed properly on regular first time purchases?

This, I can answer, and the answer is no. First, second, re-downloads, doesn't matter. They'll get the same file, assuming that they asked for the revised file. Otherwise, they'll always get the version that existed when they bought it.

Please clarify EXACTLY what you are doing, in the download option, and how you get it on the device after you've downloaded it, and confirm what you mean when you use the term "whispersynch." Whispersynch has to do with the audible books--switching back and forth between the Kindle book and the Audible version, so you are badly confusing me.

Hitch

[ilovejedd]

Originally Posted by Hitch

Please clarify EXACTLY what you are doing, in the download option, and how you get it on the device after you've downloaded it, and confirm what you mean when you use the term "whispersynch." Whispersynch has to do with the audible books--switching back and forth between the Kindle book and the Audible version, so you are badly confusing me.

Note, Whispersync is not limited to Kindle-Audible. It's the same terminology Amazon uses for syncing reading progress, bookmarks, highlights and notes across Kindles/Kindle apps.

[Hitch]

Originally Posted by ilovejedd

Note, Whispersync is not limited to Kindle-Audible. It's the same terminology Amazon uses for syncing reading progress, bookmarks, highlights and notes across Kindles/Kindle apps.

Yeah, but I've seen people use it to mean the "send by wifi" option that you see on Windows File Browser systems, which is NOT wifi. It's the old Document-sending system, the email system that worked with the dedicated Kindle emails, right? When I tested it, the file results that came out were KF7 MOBis, not KF8, and that makes a huge difference in the results.

In fact, Amazon itself will tell you that "send to Kindle" and side-loading won't emulate the for-sale MOBIs.

That's why I'm asking him to be precise, about how he gets the files from the download (to his computer, presumably) to the KTouch. It makes a difference.

Hitch

[Gregg Bell]

Originally Posted by Hitch

Inches are utterly irrelevant, in the way that you're using them. Your images are displaying pixel-for-pixel, on the devices, except when instructed otherwise. If memory serves, the touch has the old 600x800 resolution, is that right? That would mean that 200pixels would be 1/3rd of the width of the screen, 25% of the height. Your coding, per your screenshots, (which I can't see when I reply, which is seriously annoying) says something like 300px high, I believe. That, then, is how it displays, period.

On an HD Kindle, which can have a screen resolution of, say, 1024 px wide on a Paperwhite, 200pixels in width is going to be ~1/5th of the screen, and tiny. Understand?

Yes. I understand now. I got the inches from an online converter. I realize now the size of the display depends on the screen resolution. Thanks.

Originally Posted by Hitch

I'm not sure what you're doing, here: "200 pixels is 2.08" and 300 pixels is 3.125" or where you got it from or what you're thinking? 200px is what I mentioned, above, if I have the right generation of the device, the 600x800.

It's a Kindle 7 Touch. screen resolution 600X800

Originally Posted by Hitch

What are you talking about here? Vis-a-vis "whispersynch," I'm not sure what you're talking about. Are you talking about copies of your for-sale books that you're downloading from the KDP, as your purchases? Or copies of your books that you've revised, that you think you're sideloading, or what? Can you please clarify exactly what you're doing? You should not see any difference in the display of a purchased book, no matter how it gets to your Kindle, if it's sent from Amazon. If, however, you are talking about the difference between how your revised book looks, in how YOU send it to a Kindle, that's explicable.

I'm talking about my ebooks that I've revised and I want the updated version on my Kindle ereader from KDP. The old way of getting them was emailing KDP and saying, 'please send the updated version of my ebook to my Kindle.' Now I can go to my Amazon account. Use the dropdown to go to Manage Content and Devices. Then under the Content tab (screenshot 21), I can select a book and then use the Deliver button to send the book to my Kindle. That is what I was thinking was the Whispersync delivery.

Originally Posted by Hitch

Perhaps it's just me, but I don't understand what you mean, in terms of the difference, when you say "whispersynch." Are you trying to say that if you manually download the file, from Manage Your Content and Devices, it looks different than if you "synch" it from the device itself? (As you can tell, I never use the myriad cute "functions" that Amazon uses to describe "move file from Amazon to Kindle." This includes the falsely-named "wifi" nonsense.) My next question would be, okay, once you have the file on your computer, how do you get it to the device? Be very specific in how you answer, because the transmission method CAN be problematic and cause differences in image appearance. You don't mean that faux WiFi thing, on the File Browser, do you?

Hopefully I already answered this. On the Manage Your Content and Devices, I can either 1) Click on the Deliver button and choose to have the file delivered to my Kindle (I don't know how they do it but that's all I have to do.) 2) Choose to download the file to my computer and then sideload it to my Kindle.

And this isn't even the problem issue. Because all of the previewing I've done makes the image size look good. (I wouldn't publish it if the images were tiny.) It's only after I click on the Publish button in KDP and check the books the next day when Amazon sends me an email saying your book is live, that when I get the book via the "Deliver" button that the image size is small and when I get the book from downloading (in Manage Your Content and Devices) and then sideloading to my Kindle that the image is the "right" size.

[/QUOTE]

Hitch, granted, this has become a labyrinthine, but ultimately, I just have two questions.

1) Am I right to be entering the image size (screenshot 20) with the Height and Width quantities specified (the highlighted stuff). (as opposed to leaving that info out eg:screenshot 22)

2) What is the optimal size for backmatter cover images?

Thanks

[ilovejedd]

Originally Posted by Hitch

Yeah, but I've seen people use it to mean the "send by wifi" option that you see on Windows File Browser systems, which is NOT wifi. It's the old Document-sending system, the email system that worked with the dedicated Kindle emails, right? When I tested it, the file results that came out were KF7 MOBis, not KF8, and that makes a huge difference in the results.

In fact, Amazon itself will tell you that "send to Kindle" and side-loading won't emulate the for-sale MOBIs.

That's why I'm asking him to be precise, about how he gets the files from the download (to his computer, presumably) to the KTouch. It makes a difference.

True. I think there's a way to get KF8 personal docs but you have to use dual-format MOBI for email to Kindle. I have absolutely no idea what other processing KDP does for books that will be published. I only email to Kindle for personal docs.

@Gregg Bell
Here are the physical dimensions of a 200x300 image on various Kindle models.

Kindle (basic): 167 ppi
1.2" x 1.8"

Kindle Paperwhite 1/2 (5th/6th gen): 212 ppi
0.9" x 1.4"

Kindle Paperwhite 3/4 (7th/10th gen): 300 ppi
0.7" x 1.0"

Perhaps instead of using pixels, use percentages to define the size? Alas, I'm not familiar enough with HTML/CSS to know the proper coding.

[Turtle91]

My .02...

If you are going to use % (which I do) then also include a max-width in your css so small pics don't get overblown and fuzzy on large screens.

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

This will make it 75% of the screen width up until that 75% exceeds 250px...then it stays at 250px. You set the values you are comfortable with depending on the quality of the image and how much zooming you are willing to allow.

Cheers,

[jhowell]

I can account for why the image in your book is smaller when delivered directly to the device from Amazon as compared with transferring via USB.

The USB copy will be in KF8 (azw3) format and will have the same HTML coding that you placed into the book. In this case the image will be displayed 200x300 pixels on a 600x800 pixel screen or 1/8 of the screen area.

The copy sent directly by Amazon will be in KFX format for newer Kindles, including the Kindle 7th gen with up-to-date firmware. This is the format used for delivery of most books these days and enables enhanced typesetting features such as hyphenation and page flip.

During conversion to KFX format Amazon applies several fixups to the book's original formatting intended to increase readability. Images coded with dimensions in pixels are converted to percent instead to promote consistency of display across devices with widely varying screen resolutions. The exact details are complex and I don't understand all of the rules, but in the case of your book the new size is width:23.4375% which happens to be 300 (your image height) divided by 1280 (typical HD screen height).

The result is that the image is displayed at 23.4375% of the screen width on all devices. For your Kindle 7 that will be 140x210 pixels or 1/16 of the screen area, so that the image appears about half the size of the KF8 version.

[DNSB]

Originally Posted by Gregg Bell

Hitch, granted, this has become a labyrinthine, but ultimately, I just have two questions.

1) Am I right to be entering the image size (screenshot 20) with the Height and Width quantities specified (the highlighted stuff). (as opposed to leaving that info out eg:screenshot 22)

2) What is the optimal size for backmatter cover images?

Thanks

1. I would specify the width in percent not absolute pixels. Setting the width to 33.3% would keep the image to approximately the same size regardless of the screen resolution (on a 600x800, 33.3% would be 200 pixels, on an Oasis 2, 33.3% would 421 pixels but the amount of screen used would be the same. Absolute units should be banned, IMNSHO.

2. The back/font cover image size? Personally, I like larger images. Using width=95%, a 1200 by 1800 image would pretty much fill the screen without pixelating on the higher PPI devices. On my personal devices which use epub ebooks, I use a SVG wrapper to display the image so it automagically fills more or less full screen however I suspect that while a KF8 ebook would be happy with this technique a KF7 (mobi) would tend to upchuck over the screen. I seldom do much with Kindle book creation hence the uncertainty.

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

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

In an epub3, you have to add the svg property in the content.opf file.

[Hitch]

Originally Posted by jhowell

I can account for why the image in your book is smaller when delivered directly to the device from Amazon as compared with transferring via USB.

The USB copy will be in KF8 (azw3) format and will have the same HTML coding that you placed into the book. In this case the image will be displayed 200x300 pixels on a 600x800 pixel screen or 1/8 of the screen area.

The copy sent directly by Amazon will be in KFX format for newer Kindles, including the Kindle 7th gen with up-to-date firmware. This is the format used for delivery of most books these days and enables enhanced typesetting features such as hyphenation and page flip.

During conversion to KFX format Amazon applies several fixups to the book's original formatting intended to increase readability. Images coded with dimensions in pixels are converted to percent instead to promote consistency of display across devices with widely varying screen resolutions. The exact details are complex and I don't understand all of the rules, but in the case of your book the new size is width:23.4375% which happens to be 300 (your image height) divided by 1280 (typical HD screen height).

The result is that the image is displayed at 23.4375% of the screen width on all devices. For your Kindle 7 that will be 140x210 pixels or 1/16 of the screen area, so that the image appears about half the size of the KF8 version.

THERE it is. I was sort of plowing my way toward this, but I thought it would be a KF7/KF8 thing; I don't have this mad depth of KFX expertise that @jhowell does, but I thought it would be something like this. I used to have these issues with the "send to kindle" and the faux WiFi-xfer functionality. Or, to be more accurate, I didn't, but our clients did, and it was a major source of aggro for me.

So, now--about percentages versus fixed-units. @DNSB--if he's serious about making MOBI files, he doesn't really have a choice--he has to use fallback coding that specifies the precise pixels, due to the KF7 devices that are still out there. If he doesn't, and uses percentages, that's ignored in the KF7, and his image can/will be blown up to the size of the screen, which sucketh when you have a small image. There's a thread--a very long, very tedious thread--somewhere here in the Sigil forum, in which slowsmile/William and I had a heated discussion about his plugin that creates the fallback coding for this very purpose. You (Gregg) can now ignore the heated part, but look at the info that his plugin provides--it does the heavy lifting for you.

@Gregg--you should be sizing your images primarily by the use of percentages, not pixels (for the KF8s) as that's more consistent in terms of look/feel. However, you do also need the fallback stuff for the KF7s. And honestly, speaking as a highly-paid perfesshnul (ha), only God knows why KFX is "fixing" the coding and changing the damn size. That one just makes my head hurt.

HOWEVER, bear in mind that what that means is that what you refer to as the "whispersynch" version is what other people are seeing--so break out the codebook, and write your media queries--you can use slowsmile's plugin's coding as a starting point.

HTH.
Hitch

[Gregg Bell]

Originally Posted by ilovejedd

True. I think there's a way to get KF8 personal docs but you have to use dual-format MOBI for email to Kindle. I have absolutely no idea what other processing KDP does for books that will be published. I only email to Kindle for personal docs.

@Gregg Bell
Here are the physical dimensions of a 200x300 image on various Kindle models.

Kindle (basic): 167 ppi
1.2" x 1.8"

Kindle Paperwhite 1/2 (5th/6th gen): 212 ppi
0.9" x 1.4"

Kindle Paperwhite 3/4 (7th/10th gen): 300 ppi
0.7" x 1.0"

Perhaps instead of using pixels, use percentages to define the size? Alas, I'm not familiar enough with HTML/CSS to know the proper coding.

Thanks ilovejedd. Yeah, I'm considering percentages. I'm considering everything at this point.

[Gregg Bell]

Originally Posted by Turtle91

My .02...

If you are going to use % (which I do) then also include a max-width in your css so small pics don't get overblown and fuzzy on large screens.

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

This will make it 75% of the screen width up until that 75% exceeds 250px...then it stays at 250px. You set the values you are comfortable with depending on the quality of the image and how much zooming you are willing to allow.

Cheers,

Thanks Dion. Your method sounds good. And on the really big screens I'd be satisfied with 250 px width. And so doing it your way, there's no need to have "height=300" and "width=200" in the image html tags, right?

And why would a small image get overblown? And not sure what you meant by how much zooming I'm willing to allow.