5

I am happy to see that the Kindle Formatting Guide is accepting high resolution image files for interior images and downconverting as needed.

I was wondering if other ebook distributors are doing something similar. Or do other distributors require some sort of media query for smaller and larger screens (with low resolution and high resolution image files included in the same epub file).

Is there any reference guide about image specifications for each vendor? Thanks.

UPDATE: I didn't find any answers to this question, but I realized that the question essentially boils down to how to make sure images work with retinal and non-retina displays.

1

Egad, I'm sorry that no one answered this very important question. I shall try to answer it by myself with what I've learned over the past week. I'm still testing and will add more information as needed.

The ipad Asset Guide 5.1 Revision 2: https://itunesconnect.apple.com/docs/iBooksAssetGuide5.1Revision2.pdf

Images within the epub cannot exceed 3.2 million pixels. Apple recommends providing images that are at least 1.5 the intended viewing size.

For Kindle Formatting guide v 2015.2 (not my question, I realize, but still important to mention): http://kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf

3.62 Maximum size of an individual image file is 5MB. You will obtain the best results by optimizing your image to the highest quality possible within the file size limit before inputting your files into Kindlegen. If the automatic file conversion is unsatisfactory, try optimizing the images before feeding them to Kindlegen.
3.64. Make sure that input photos are at least 600x800 pixels in size unless you optimize them according to 3.62

The key here is using media queries to differentiate screens with retina display and screens without retina display because they render graphics differently. Also, if you have high enough resolution graphics to begin with, you don't need to worry about them looking like crap in in ibooks with retinal display. (In my case, my original graphics don't meet the minimal requirements listed above, so I am experiencing major problems trying to upconvert everything).

Resources that I found helpful:

Simulating retina display on chrome browser: http://www.marksenff.com/front-end/you-already-have-a-retina-screen-emulator/

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ media queries for various android and ipad devices

http://mydevice.io/devices/ screen resolutions

media queries specific to ebooks https://medium.com/@sandersk/responsive-ebook-design-a-primer-8bba01328219

http://stephen.io/mediaqueries/ apple-specific media queries how to target retina displays.

The key thing from the last link is the apple-specific nonstandard css:

 @media only screen 
 and (min-device-width : 768px)  and 
(max-device-width : 1024px) and
 (-webkit-min-device-pixel-ratio: 2) {
> /* STYLES GO HERE */}

(I believe that other browsers have also nonstandard css for specifying different pixel ratios. But I have no evidence that any of the ebook reading software supports them).

UPDATE: I ended up writing unique media queries at certain breakpoints. These breakpoints fit my need to make my graphics work. Your own graphics might require different breakpoints/thresholds. Please note that I did not use queries specific to android or ios and I did not need to specify device-pixel-ratio.

  1. generic styles, for everybody (and for devices which don't detect media queries)
  2. phone media queries valid for both portrait and landscape: min-width 320px max-width: 767px
  3. phone media queries valid only for landscape 768 to 1500 px landscape (because we assume 2 columns, this is basically the same as Phone/Portrait)
  4. Landscape over 1500px -- when 2 columns, this will look the same as portrait 768-1024
  5. 768-1024 portrait -- this probably comprises about 60-70% of the devices
  6. 1025-up portrait -- future proofing, just in case

I probably will have 3 queries for Kindle: one for e-ink, one for Kf8, and one for 10 inch KF8. I haven't tested on them yet; maybe I need to add one more kindle query? I'm still working on that...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.