Bookshelf | Reports | Community | KDP Select

Home » Amazon KDP Support » Ask the Community » Formatting

Thread: using css media queries to render interior images


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

Permlink Replies: 30 - Pages: 3 [ Previous | 1 2 3 | Next ] - Last Post: Jan 14, 2018 3:52 PM Last Post By: booknookbiz
hapax_bookguy

Posts: 48
Registered: 11/25/07
Re: using css media queries to render interior images
Posted: Nov 6, 2017 12:43 PM   in response to: hapax_bookguy in response to: hapax_bookguy
Click to report abuse...   Click to reply to this thread Reply
Sorry, another quick reply.

Using media queries and breakpoints is a good solution that does make the code a little hard to read. I've seen some css shorthand which might simplify things. MIGHT.

I had some interesting issues with my image-heavy Soldier Boys ebooks. I have several other ebooks down the road which will use images extensively; that's why we really need better support for images on Kindle and other systems.

I would never expect pixel-perfect rendering for ebook these days, but I think the person reading expects graphics to be rendered reasonably well (and floated if possible).

Edited by: hapax_bookguy on Nov 6, 2017 12:49 PM
Notjohn

Posts: 23,733
Registered: 02/27/13
Re: using css media queries to render interior images
Posted: Nov 6, 2017 12:54 PM   in response to: hapax_bookguy in response to: hapax_bookguy
Click to report abuse...   Click to reply to this thread Reply
Kindle Unpack doesn't need Python. I don't have Python on my computer and wouldn't know how to use it if I did! It's been a couple years since I used Kindle Unpack, but at that time it yielded up both a KF7 and a KF8 book, complete. Now it probably also yields up a KFX (Kindle Format Ten) book. And I understand that if you upload a Word doc, you also see your original document.

I don't use media queries. I usually go for a width="100%" instruction on images, and KF 7 does that by default. The result is good. I have two books in which I used either a "sort" at a 12 percent width or mug shots at 20 percent, and those I finessed by uploading a gif or a jpeg physically small enough that the image as reproduced looked okay.

I also have a colophon for my publishing imprint, so I upload my entire title page as a gif file, which IMHO looks more professional anyhow, and is just what most Big Five publishers do.

(Don't trust KDP to publish a print edition. Don't trust CreateSpace to publish an ebook.)

Good luck! -- NJ

Notjohn's Guide to E-Book & Print Formatting

The blog:
http://notjohnkdp.blogspot.com
William Thompson

Posts: 1,129
Registered: 07/06/14
Re: using css media queries to render interior images
Posted: Nov 6, 2017 4:32 PM   in response to: hapax_bookguy in response to: hapax_bookguy
Click to report abuse...   Click to reply to this thread Reply
I also have a plugin that will convert any html doctype to a full epub. I haven't released this Sigil plugin to the general public on MR yet because I think it might be contentious -- might release it in the near future. This plugin should convert a valid html doc from DocBook directly to full epub format. And even though it will not format floating images, this plugin should do everything else for you including create stylesheets, split the html into xhtml files, create a valid TOC and Nav TOC etc. In other words, this plugin should help to save you a heck of a lot of time in your own manual conversions using DocBook or HTMLBook.

If you want to try the plugin -- ConvertHTML2Epub -- then just get my email from my KDP profile and drop me line and I will be happy send you the plugin. And if you have any problems with it -- just let me know. Oh...and if you use this plugin then, after running it, you must remember to delete the original DocBook HTML file from Sigil's Book Browser otherwise it will cause Epubcheck errors. Other than that, this plugin is very easy to use.
William Thompson

Posts: 1,129
Registered: 07/06/14
Re: using css media queries to render interior images
Posted: Nov 6, 2017 5:16 PM   in response to: Notjohn in response to: Notjohn
Click to report abuse...   Click to reply to this thread Reply
Notjohn said...
I don't have Python on my computer and wouldn't know how to use it if I did!

You don't have to install Python now on your op system to run a Sigil plugin because Sigil already comes with its own internal or bundled Python(since v9.0 I think.). Just tick the Use Bundled Python option in Sigil's Plugins > Manage Plugins and you should be able to run most, if not all of the plugins available now in the Sigil Plugin Index(including all my plugins).
Notjohn

Posts: 23,733
Registered: 02/27/13
Re: using css media queries to render interior images
Posted: Nov 7, 2017 2:40 AM   in response to: William Thompson in response to: William Thompson
Click to report abuse...   Click to reply to this thread Reply
You don't have to install Python now on your op system to run a Sigil plugin

Indeed. Not now, not for the five years that I have been using Sigil. What I was telling the poster.

(Don't trust KDP to publish a print edition. Don't trust CreateSpace to publish an ebook.)

Good luck! -- NJ

Notjohn's Guide to E-Book & Print Formatting

The blog:
http://notjohnkdp.blogspot.com
hapax_bookguy

Posts: 48
Registered: 11/25/07
Re: using css media queries to render interior images
Posted: Jan 11, 2018 11:30 AM   in response to: Notjohn in response to: Notjohn
Click to report abuse...   Click to reply to this thread Reply
I just wanted to mention that the latest Amazon Publishing Guidelines specifically says: "KindleGen performs automatic image conversions to
optimize the content for Kindle."

For example, on the table they are recommending a 600x900 pixels 300 dpi image for something intended to fill 1/4 of the display.

Check page 32 of this guide: https://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf

On page 33, they say: Some images, such as historical photographs, may not be available at 300 ppi or greater. In these
situations, provide the best image quality possible. Amazon strongly recommends images meet a
minimum of 300 ppi. Any images below 72 ppi will cause the book to fail conversion.
booknookbiz

Posts: 4,188
Registered: 03/04/10
Re: using css media queries to render interior images
Posted: Jan 11, 2018 11:53 AM   in response to: hapax_bookguy in response to: hapax_bookguy
Click to report abuse...   Click to reply to this thread Reply
hapax_bookguy wrote:
I just wanted to mention that the latest Amazon Publishing Guidelines specifically says: "KindleGen performs automatic image conversions to
optimize the content for Kindle."

For example, on the table they are recommending a 600x900 pixels 300 dpi image for something intended to fill 1/4 of the display.

Check page 32 of this guide: https://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf

On page 33, they say: Some images, such as historical photographs, may not be available at 300 ppi or greater. In these
situations, provide the best image quality possible. Amazon strongly recommends images meet a
minimum of 300 ppi. Any images below 72 ppi will cause the book to fail conversion.

Hapax:

It's contained that language for at least three+, four years. I know for a fact that it was in the 2014 guidelines. There's nothing new about that language. The slight clarification, about the 300ppi, is newish, but the original language was added in Revision 2014.2, so..that's not what's affecting your images. At least, not in any new sense.

HTH.

Hitch
We produce eBooks
An Amazon Professional Conversion Service : http://amzn.to/29pWZSg
www.Booknook.biz

hapax_bookguy

Posts: 48
Registered: 11/25/07
Re: using css media queries to render interior images
Posted: Jan 11, 2018 5:48 PM   in response to: booknookbiz in response to: booknookbiz
Click to report abuse...   Click to reply to this thread Reply
Aha, I stand to be corrected -- somewhat.

The 2015.2 version of the document does not have the image size and quality standards table and verbiage.

But the 2017.2 version does have this section.

I don't have any other versions lying around. But it's probably fair to say that the material in this section is "somewhat new."
booknookbiz

Posts: 4,188
Registered: 03/04/10
Re: using css media queries to render interior images
Posted: Jan 11, 2018 6:17 PM   in response to: hapax_bookguy in response to: hapax_bookguy
Click to report abuse...   Click to reply to this thread Reply
hapax_bookguy wrote:
Aha, I stand to be corrected -- somewhat.

The 2015.2 version of the document does not have the image size and quality standards table and verbiage.

But the 2017.2 version does have this section.

I don't have any other versions lying around. But it's probably fair to say that the material in this section is "somewhat new."


The table is new-ish, but the verbiage has been around for at least 3 years. Just sayin'.

Hitch
We produce eBooks
An Amazon Professional Conversion Service : http://amzn.to/29pWZSg
www.Booknook.Biz
MR R J LAIDLER

Posts: 912
Registered: 09/26/16
Re: using css media queries to render interior images
Posted: Jan 12, 2018 2:49 AM   in response to: hapax_bookguy in response to: hapax_bookguy
Click to report abuse...   Click to reply to this thread Reply
They do keep upping the image size don't they? :) When I put my first book together the advice was "use the best image you have" which I didn't take literally as the original images were all around 15MB. I resized them to around 1800px wide and got the size down to around 400KB. I've just tried resizing one of the images for my next book to 3200px wide and it came out at 7MB. As the book will have probably around 200 images this isn't going to work as the 650MB limit for an ePub would soon be used up. I tried reduced the image quality to 50% in PS. This got the file size down to 1.8MB which is more manageable but I need to do some experimenting I think. :)
William Thompson

Posts: 1,129
Registered: 07/06/14
Re: using css media queries to render interior images
Posted: Jan 12, 2018 6:32 PM   in response to: MR R J LAIDLER in response to: MR R J LAIDLER
Click to report abuse...   Click to reply to this thread Reply
There are some useful tricks that you can use if you have alot of images in your ebook.

You could convert your images from jpeg to gif format using a graphics app like irfanview. GIF format only uses 8 bit color whereas jpeg uses 16 bit color so doing this will help to considerably reduce your image file size. Most indie authors know about this one.

You could also use an optimizer like File Optimizer (free download from SourceForge). This will normally reduce all jpeg images by between 10% and 20%. File Optimizer is also very easy to use.

You might also consider making some of your ebook images smaller. Doing this will also help you to reduce image file size..
MR R J LAIDLER

Posts: 912
Registered: 09/26/16
Re: using css media queries to render interior images
Posted: Jan 12, 2018 11:45 PM   in response to: William Thompson in response to: William Thompson
Click to report abuse...   Click to reply to this thread Reply
William Thompson wrote:
There are some useful tricks that you can use if you have alot of images in your ebook.

You could convert your images from jpeg to gif format using a graphics app like irfanview. GIF format only uses 8 bit color whereas jpeg uses 16 bit color so doing this will help to considerably reduce your image file size. Most indie authors know about this one.

You could also use an optimizer like File Optimizer (free download from SourceForge). This will normally reduce all jpeg images by between 10% and 20%. File Optimizer is also very easy to use.

You might also consider making some of your ebook images smaller. Doing this will also help you to reduce image file size..

I just accept the 35% royalty option. With so many images I would have to sacrifice a lot in terms of quality and size to get the book down to a size I could opt for 70% royalties. Most of the images are landscapes and I like them to be as big as possible.
But I'll take another look at it. I would need to get the images down to below about 50Kb each. Of course the images I upload are compressed again by Amazon. Most of them are reduced to about 100Kb making the Kindle file readers download typically 22Mb. To get near 70% royalties at the planned selling price I would need to get below 10Mb as the next book looks like it is going to have around 200 images. But even this would only give me the same amount as I would get at 35% with no delivery charges.
Ideally they could drop delivery charges but I don't think that is going to happen. :)
Notjohn

Posts: 23,733
Registered: 02/27/13
Re: using css media queries to render interior images
Posted: Jan 13, 2018 1:42 AM   in response to: MR R J LAIDLER in response to: MR R J LAIDLER
Click to report abuse...   Click to reply to this thread Reply
Ideally they could drop delivery charges but I don't think that is going to happen

No, they're not, but be aware that you can sell the book on Apple, B&N, etc etc and get 60 or 70 percent royalty with no download fee.

(Don't trust KDP to publish a print edition. Don't trust CreateSpace to publish an ebook. Each does one thing well and the other thing poorly.)

Good luck! -- NJ

Notjohn's Guide to E-Book & Print Formatting (2018 edition)

The blog: https://notjohnkdp.blogspot.com
Andy Clark

Posts: 4
Registered: 01/05/18
Re: using css media queries to render interior images
Posted: Jan 13, 2018 3:20 PM   in response to: hapax_bookguy in response to: hapax_bookguy
Click to report abuse...   Click to reply to this thread Reply
Just swapped my book over to use this technique, it's a top tip.

I uses 100% / height Auto for most images but I've got some "icons" which I run at 25%

Thanks hapax_bookguy
Notjohn

Posts: 23,733
Registered: 02/27/13
Re: using css media queries to render interior images
Posted: Jan 13, 2018 4:39 PM   in response to: Andy Clark in response to: Andy Clark
Click to report abuse...   Click to reply to this thread Reply
Just to follow up on this, the vast majority of my images are 800 pixels wide, width="100%", and no larger than 127 KB. They look good even on a hi-rez Kindle.

And they certainly aren't 300 ppi!

Come to that, the original standard of 450-pixel-wide images still look pretty good. I've not been inspired to rebuild any of the books I uploaded in 2007-2010.

I generally squash them by using the Save For Web feature in Photoshop Elements. Then, when the resize window comes up, I specify 800 pixels width, maintain aspect ratio. Since the vast majority of images aren't skinny, letting the height be determined automatically works just fine. I don't think I've ever run across an image that had to have the height specified. (If one holds the device in landscape mode, even with width="100%" the height rules in every device and app I have used.)

(Don't trust KDP to publish a print edition. Don't trust CreateSpace to publish an ebook. Each does one thing well and the other thing poorly.)

Good luck! -- NJ

Notjohn's Guide to E-Book & Print Formatting (2018 edition)

The blog: https://notjohnkdp.blogspot.com
Legend
Helpful Answer
Correct Answer

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