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.
- generic styles, for everybody (and for devices which don't detect
media queries)
- phone media queries valid for both portrait and
landscape: min-width 320px max-width: 767px
- 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)
- Landscape over 1500px -- when 2 columns, this will look the same as
portrait 768-1024
- 768-1024 portrait -- this probably comprises about 60-70% of the
devices
- 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...
