Bookshelf | Reports | Community | KDP Select

Home » Amazon KDP Support » Ask the Community » Formatting

Thread: BW Bitmap on Fires


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

Permlink Replies: 4 - Pages: 1 - Last Post: Nov 4, 2013 12:48 PM Last Post By: linsherman
Steve Roth

Posts: 3
Registered: 09/20/13
BW Bitmap on Fires
Posted: Nov 4, 2013 9:19 AM
Click to report abuse...   Click to reply to this thread Reply
I have a black and white image in my book (not grayscale) that includes text that needs to be readable. Here it is:

http://princehamlet.com/timeline/Hamlet%20timeline%202.0.gif

It's from an object-oriented Adobe Illustrator file, so I can output the bitmap at any size and resolution.

To start, I used a 600x677 image, with the following html:


On e-ink devices (both my original physical kindle and in Mac Previewer Paperwhite and DX), this looks decent on the page and quite readable when clicked/zoomed.

But on the Fires (I've only tested in Mac Previewer, not physical devices), 1. the image is quite small on the page, and 2. very jagged/ugly when clicked/zoomed.

The first one makes technical sense (higher-resolution screens), but is there a scaling solution that will work on all devices?

The second seems crazy; why would it look worse on a more-capable device? Displaying BW on a grayscale or color screen should not be a problem, should not require integral pixel ratios, for instance.

I've tried larger image sizes up to 1000x1052 (trying to conserve file size) without much or any improvement.

So question: how would you set up the image size and HTML img width/height attributes to make this image:

1. Display at a reasonable size on the page in every device (can I specify img size in percent or ems?), and

2. Display nicely/readably when clicked/zoomed?

Thanks!
Steve Roth

Posts: 3
Registered: 09/20/13
Re: BW Bitmap on Fires
Posted: Nov 4, 2013 9:22 AM   in response to: Steve Roth in response to: Steve Roth
Click to report abuse...   Click to reply to this thread Reply
Here's that code without the angle brackets:

img align="BOTTOM" name="graphics2" src="/ckeditor_assets/pictures/25918/content_hamlet_timeline_600x677.png" style="border-width: 0px; border-style: solid; width: 600px; height: 677px;"
jtbigtoad

Posts: 9,229
Registered: 08/01/10
Re: BW Bitmap on Fires
Posted: Nov 4, 2013 10:30 AM   in response to: Steve Roth in response to: Steve Roth
Click to report abuse...   Click to reply to this thread Reply
Kindle doesn't like PNG! try GIF!

I know squat about HTML (AKA The Zombie Plague)

To display Html You have to convert all of your < 's to Printable form ...

convert them to the following code... & lt; (note the semicolon at the end and close the gap and you get < :)

Try that!

also the Fires have a higher resolution -- that is why the images display smaller!

JT

;)

Edited by: jtbigtoad on Nov 4, 2013 10:31 AM

Ok so I goofed -- I tell you -- ZOMBIE PLAGUE! :(
Notjohn

Posts: 5,602
Registered: 02/27/13
Re: BW Bitmap on Fires
Posted: Nov 4, 2013 10:59 AM   in response to: Steve Roth in response to: Steve Roth
Click to report abuse...   Click to reply to this thread Reply
To get a full-screen (well, it fills what is normally the text area) on the HD tablets, I add width="100%" to the html pointer to the image.

JT used to be known as Big Toad, but now we call him Big Tablet because he is the only owner we know of with a 8.9 inch Fire. (Will I get modded for that?)

Good luck! -- NJ

The book: Notjohn's Guide to Kindle Publishing: Ten Steps to Selling Your E-book on Amazon (Or Anywhere Else) (Third Edition)

The blog: Notjohn's KDP Guide
linsherman

Posts: 187
Registered: 05/12/12
Re: BW Bitmap on Fires
Posted: Nov 4, 2013 12:46 PM   in response to: Steve Roth in response to: Steve Roth
Click to report abuse...   Click to reply to this thread Reply
Hi Steve,

Time for some tasty CSS media queries!

I would create two versions of this GIF, one at 600x800 and one at 1200x1600 (edit -- or appropriate for your image -- these would be maximums). You'll need to code two <img> tags, one for each, and assign them unique id= attributes, e.g.

<img id="small-hamlet".../>
<img id="big-hamlet".../>

Then you'll need some CSS to control which one gets displayed. (The best way to do this is with an external style sheet -- I recommend using Sigil to package everything together in an EPUB file).

Sample CSS:

img#big-hamlet { display:none; }
@media screen and (min-width:1200px) {
img#small-hamlet {display:none}
img#big-hamlet {display:block}
}

The default is to display the smaller version of the image. Devices that don't support media queries will always show the smaller one. KindleGen will use the smaller image in the package it generates for the older Mobi 7 Kindles and use both images in the one it generates for the KF8 Kindles, which support runtime media queries.

Cheers :)
Lin
Simplified HTML & CSS for E-Books (Easy E-Book Formatting Vol I)
From DOC to EPUB (Easy E-Book Formatting Vol II)

Edited by: linsherman on Nov 4, 2013 12:46 PM

Edited by: linsherman on Nov 4, 2013 12:47 PM
Legend
Helpful Answer
Correct Answer

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