Well, I’ve got something that works, anyhow…
Converting to SVG vector drawing is a no-go: maybe in the future, with another book, but right now it’s more work than seems worth it (also the images won’t appear on older Kindles).
I’ve got PNGs scaled down to a maximum size of 1200×1600 pixels, and with their internal resolution set to 300 dpi. I could probably have chosen 1080×1440 at 300 dpi, since no e-reader I know of has a higher resolution than the new Kindles, but it’s a difference of only a few kilobytes. I’ve also gotten conflicting suggestions on PNG
vs. GIF, and searching this forum doesn’t yield anything that looks authoritative. PNG it is for now, unless I get a good reason to change.
As for the code, I think I’ve put something together that works. Following the suggestion in the thread
E-Book Formats › ePub › Image size, I’m using @media inquiries to switch between the SVG wrapper and straight image inclusion. (If I’m told that
max-width and
max-height are better supported on EPUB-based readers than the SVG wrapper, I can add that back too.) The only trouble is that ADE (
delenda est!) chokes on
@media not, so I’m going with this:
Code:
/* Images */
.img {
page-break-inside: avoid;
text-indent: 0; padding: 0; margin: 0;
text-align: center;
clear: both;
}
/* Defaults: ADE chokes on @media not */
.kf8-epub-default { display: inline; }
.mobi-fallback { display: none; }
@media amzn-mobi {
.kf8-epub-default { display: none; }
.mobi-fallback { display: inline; }
}
@media amzn-kf8 {
.kf8-epub-default { display: inline; }
.mobi-fallback { display: none; }
}
and
Code:
<div class="img">
<div class="mobi-fallback">
<img alt="Rachel’s steeplechaser" src="../Images/Steeplechaser.png"/>
</div>
<div class="kf8-epub-default">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="100%" viewBox="0 0 1200 1440" preserveAspectRatio="xMidYMid meet"><image width="1200" height="1440" xlink:href="../Images/Steeplechaser.png"/></svg>
</div>
</div>
(Yes, the
@media amzn-kf8 rule is redundant with the default rule. But I may want to change one or the other in some way, and this lets me remember that they’re distinct.)
The CSS is based on suggestions in the thread
E-Book Formats › ePub › Images in Sigil (ePub), with some additions I’m too tired to experiment with removing again.
This at least works on the Kindle Previewer in all models and in ADE 2.0 on Windows. I still need to test it against some Android EPUB readers and get feedback regarding actual Kindles and Nooks. I hope this example of putting different suggestions together is useful to someone in the future.