Quote:
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:
Code:
<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:
Code:
<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.