Bookshelf | Reports | Community | KDP Select

Home » Amazon KDP Support » Ask the Community » Formatting

Thread: Question about picture auto resize for different devices.


This question is answered. Helpful answers available: 1. Correct answers available: 1.

Reply to this Thread Reply to this Thread Search Forum Search Forum Back to Thread List Back to Thread List

Permlink Replies: 27 - Pages: 2 [ 1 2 | Next ] - Last Post: Jan 10, 2017 1:27 AM Last Post By: booknookbiz Threads: [ Previous | Next ]
rex lantz

Posts: 46
Registered: 02/13/15
Question about picture auto resize for different devices.
Posted: May 6, 2015 7:34 AM
 
Click to report abuse...   Click to reply to this thread Reply
Is there any HTML code that will auto resize my eBook pictures for different devices? I tried the width and height tags at auto and at 100% but get strange results.

I have the pictures so they center but when I test on different devices the picture size remains fixed or actually shrinks.

Edit:
I found a good solution that seems to work great on every device.

Thanks

Edited by: rex lantz on May 6, 2015 3:04 PM

rex lantz

Posts: 46
Registered: 02/13/15
Re: Question about picture auto resize for different devices.
Posted: May 6, 2015 12:31 PM   in response to: rex lantz in response to: rex lantz
 
Click to report abuse...   Click to reply to this thread Reply
I found a solution
Notjohn

Posts: 19,744
Registered: 02/27/13
Re: Question about picture auto resize for different devices.
Posted: May 6, 2015 1:20 PM   in response to: rex lantz in response to: rex lantz
Helpful
Click to report abuse...   Click to reply to this thread Reply
Perhaps you would share that solution so others can benefit from it?

I've never had any problem with specifying width="100%" in the html.

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Formatting Your E-book for Sale on Amazon (Or Anywhere Else)

The blog: Notjohn's KDP Guide
rex lantz

Posts: 46
Registered: 02/13/15
Re: Question about picture auto resize for different devices.
Posted: May 7, 2015 7:53 AM   in response to: Notjohn in response to: Notjohn
 
Click to report abuse...   Click to reply to this thread Reply
I'd be happy to do so. I searched allot and found no useful information on this and was surprised at the amount of mis-information about how to scale and center images in the eBooks. Printed is simple as it follows the Word doc, but the conversion to the ebook is a challenge.

I also found it interesting that the Look Inside feature shows the pictures right aligned but the actual ebook does not. Seems there is a lot of inconsistency.

I found that just width=100% skewed the pictures between different devices for my testing. So I ended up using this
width=98% height=auto This maintained the aspect of the picture and allowed just a bit of padding.

I ended up making a new class in the head section to center the image and then added the width height information. I tried to use the width / height in the css but it did not work correctly. Knowing this now I would insert the images in my original Word document and specify the percentages there which will save a step.

For some reason I can no post a complete line of the html for the picture ... system deletes it ??

<style type="text/css">
.centeredImage
{
text-align:center;
margin-top:2px;
margin-bottom:2px;
padding:1px;
}
</style>

Corrected typo .... auto

Notjohn

Posts: 19,744
Registered: 02/27/13
Re: Question about picture auto resize for different devices.
Posted: May 7, 2015 8:30 AM   in response to: rex lantz in response to: rex lantz
 
Click to report abuse...   Click to reply to this thread Reply
All you need do is open the html in Sigil and tweak the book there. I have 25 books for sale on Amazon, Barnes & Noble, and Apple (plus a few minor retailers). They all display just fine, with the occasional exception of the cover in the online preview. (Downloaded, the cover too displays perfectly.) I use the width="100%" instruction.

I found that just width=100% skewed the pictures between different devices for my testing. So I ended up using this width=98% height=atuo This maintained the aspect of the picture and allowed just a bit of padding.

That too should work. (Auto, not atuo, of course!) I originally followed the 98% rule, because that was what was first suggested to me, but then somebody on MobileReads asked "Why not 100%?" So I tried that, and it worked just as well, so that's what I use now.

Charlie has evidently experienced a problem with skinny images being distorted if only the width is called for, but I've never seen that. Holding my Fire HD horizontally makes the image shrink to fit the height of the screen. Similarly, when Kindle4PC is set to show a single, wide view, the image goes from top to bottom of the screen, with white space on either side.

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Formatting Your E-book for Sale on Amazon (Or Anywhere Else)

The blog: Notjohn's KDP Guide
rex lantz

Posts: 46
Registered: 02/13/15
Re: Question about picture auto resize for different devices.
Posted: May 7, 2015 10:36 AM   in response to: Notjohn in response to: Notjohn
 
Click to report abuse...   Click to reply to this thread Reply
Thanks for pointing the typo ... fixed.

Seems odd I found nothing in my searches for the information on the forum. I spent some time on it and finally went to my webpage and looked to see how I had done it there and used my old FrontPage SW or Calibre to edit.

Odd too that the forum cuts out any HTML code I put in as an example of the use .... picky I guess.
Sofia

Posts: 4
Registered: 05/10/15
Re: Question about picture auto resize for different devices.
Posted: May 17, 2015 2:47 AM   in response to: rex lantz in response to: rex lantz
 
Click to report abuse...   Click to reply to this thread Reply
Hi! I have just posted my ? regarding fixed layouts. Would you help me with my children's picture book sizes solution? On my direct publishing account the illustration look very small, and I don't know how to change the size. In reality, the illustrations are in A3, and on the kindle previewer look normal.

thanks

Sofia
Notjohn

Posts: 19,744
Registered: 02/27/13
Re: Question about picture auto resize for different devices.
Posted: May 17, 2015 3:27 AM   in response to: Sofia in response to: Sofia
 
Click to report abuse...   Click to reply to this thread Reply
In reality, the illustrations are in A3, and on the kindle previewer look normal.

The paper size is irrelevant. What matters is their dimension in pixels. I upload images 800 pixels wide, but I also add a width="100%" instruction to the html, since even 800 pixels is going to look small in a 9-inch Fire HD tablet.

Images used to be auto-zoomed (unless they were very small) in the e-ink Kindles, but that stopped with the HD tablets.

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Formatting Your E-book for Sale on Amazon (Or Anywhere Else)

The blog: Notjohn's KDP Guide
rex lantz

Posts: 46
Registered: 02/13/15
Re: Question about picture auto resize for different devices.
Posted: May 17, 2015 8:03 AM   in response to: Notjohn in response to: Notjohn
 
Click to report abuse...   Click to reply to this thread Reply
Your reply is not clear except to you perhaps.

Certainly you realize that 99.9% of the folks do not have much knowledge about HTML and rely on system software conversion..
Notjohn

Posts: 19,744
Registered: 02/27/13
Re: Question about picture auto resize for different devices.
Posted: May 17, 2015 8:42 AM   in response to: rex lantz in response to: rex lantz
 
Click to report abuse...   Click to reply to this thread Reply
Perhaps you should read up on e-book formatting.

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Formatting Your E-book for Sale on Amazon (Or Anywhere Else)

The blog: Notjohn's KDP Guide
rex lantz

Posts: 46
Registered: 02/13/15
Re: Question about picture auto resize for different devices.
Posted: May 17, 2015 11:38 AM   in response to: Notjohn in response to: Notjohn
 
Click to report abuse...   Click to reply to this thread Reply
Perhaps you should be a bit more helpful instead of coming across so smug? Your last post is a perfect example.

I don't have the problem and when I did have an issue you were not helpful at all. Actually, after reading several of your posts you seem to give a quick one-off comment, rather than offering useful assistance. That really isn't helpful most of the time in contrast to the Charlie fellow who actually tries to give folks usable information.

Maybe you just want to run up your posting history or promote your "blog" - I don't know, but why bother if you aren't interested in helping. Just let it pass instead and help those you choose. I am confident you are more than capable.

Sorry, that's my take on it now.
Charlie S

Posts: 2,996
Registered: 01/19/14
Re: Question about picture auto resize for different devices.
Posted: May 17, 2015 7:39 PM   in response to: Notjohn in response to: Notjohn
 
Click to report abuse...   Click to reply to this thread Reply
Notjohn wrote:
Charlie has evidently experienced a problem with skinny images being distorted if only the width is called for, but I've never seen that.
Not exactly. The problem is that if you use the same 100% width code with ePubs that are displayed on Adobe Digital Editions software (some Nooks and Sony units use this) and you have images that are much taller than they are wide, they will get cut off at the top and bottom using ADE.

~~~
eBook Pioneers Formatting We do print books too!

"A box without hinges, key, or lid, yet golden treasure inside is hid." ~J.R.R. Tolkien
Charlie S

Posts: 2,996
Registered: 01/19/14
Re: Question about picture auto resize for different devices.
Posted: May 17, 2015 7:47 PM   in response to: rex lantz in response to: rex lantz
 
Click to report abuse...   Click to reply to this thread Reply
Let's not get testy fellas. Take a breath.

Rex,

I can confirm that what NJ says about 100% width working on all KF8 devices. The first two generation of Kindles (including DX) will ignore the command and display the images at full size. At any rate, 100% width should not "skew" the images. I wonder if perhaps you're using the HTML 100% width command rather than the CSS 100% width command? There's also a CSS code for 100% max-width, and max-width works a little differently.

I also wonder if maybe you had both the image's actual size listed along with 100% width at the same time? I've never done it, but maybe that would cause them to get pulled out of whack somehow.

Lastly, is this a fixed layout? Placing images and making them work correctly in a fixed layout is extremely tricky until you've done several.

~~~
eBook Pioneers Formatting We do print books too!

"A box without hinges, key, or lid, yet golden treasure inside is hid." ~J.R.R. Tolkien
Notjohn

Posts: 19,744
Registered: 02/27/13
Re: Question about picture auto resize for different devices.
Posted: May 18, 2015 3:25 AM   in response to: Charlie S in response to: Charlie S
 
Click to report abuse...   Click to reply to this thread Reply
My html instruction is in-line (that is, in the html, not in the style sheet). Probably I should build two styles, one for images that should be full screen, another for those that don't. But even with the "don't" ones, like my publishers' colophons (logos), I would still need to specify a width. (That specification of course doesn't work on the old Kindles or on the iPad--though it seems to on my iPhone!)

Sigil generates a cover image that has both fixed and width="100%" dimensions. It seems to work, though perhaps the KDP simply rips out the html. (It does NOT work on the Nook online preview, which is truncated, but displays okay on the Nook when downloaded.) Those dimensions of course are huge, since I use the same cover image as I do for the product image. Perhaps I should stop doing that.

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Formatting Your E-book for Sale on Amazon (Or Anywhere Else)

The blog: Notjohn's KDP Guide
Charlie S

Posts: 2,996
Registered: 01/19/14
Re: Question about picture auto resize for different devices.
Posted: May 18, 2015 9:36 AM   in response to: Notjohn in response to: Notjohn
 
Click to report abuse...   Click to reply to this thread Reply
For Kindle books I use both the HTML and CSS instructions for 100% width, although I don't remember why I do that anymore. I think the HTML width is for iOS devices though:

<img width="100%" style=" width: 100%;" alt="photo description" id="image1" src="../Images/image1.jpg"/>

For ePub you have to get much more intricate:

<span><img alt="photo description" id="image1" src="../Images/image1.jpg" style=" height: 100%; max-width: 100%; max-height: 100%;" /></span>

The empty spans make the images center properly in certain devices. The max width and max height instructions keep the images from getting cut-off at the top and bottom if they're much taller than they are wide, but that doesn't work with ADE, so I just make sure that images that are very narrow and a 100% height attribute instead of width. I still keep the max width and height instructions though just because they aren't hurting anything.

~~~
eBook Pioneers Formatting We do print books too!

"A box without hinges, key, or lid, yet golden treasure inside is hid." ~J.R.R. Tolkien

Edited by: Charlie S on May 18, 2015 9:37 AM
Legend
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums