Complex image handling best practices

[RachelComerford]

From BISG survey

[JayPanoz]

Does complex image means image grids, full-bleed, etc.?

[RachelComerford]

@JayPanoz in answer to your question:

"I’m just referring to the age-old question of handling portrait images in a wide variety of aspect ratios with a best practices approach that will:
▪ provide “high enough” resolution for zooming
▪ (generally) scale to fit in a page view along with a (short or long) caption
▪ meet A11y standards
▪ work across devices

I’ve been chasing this for a long time, and have a semi-working solution, although it’s far from perfect. I’ve seen Jimmy’s wonderful demos; they are awesome (Hi, Jiminy). They also have a lot of moving parts and are complex.

But because this is for a best practices context, what are clear and direct best practices we can provide ebook producers for image handling that provides a good reader experience and meets requirements? If media queries or “progressive enhancement” with fallbacks are included, then we need to offer some practical step-through, because this is anything but clear and easy. And what works across devices is really going to be the driving element, I believe."

[JayPanoz]

Mmmkay so first, the bad news: I wouldn’t rule out landscape/square images either as they can find themselves in a tough spot in some configs i.e. one-page + large line-length/width + landscape orientation, in which they can overflow if there’s no max-height set – BTW this is something quite a significant number of Reading Apps end up doing as an override/safeguard so that it can’t happen.

I would also probably divide best practices into 2:

1. without figcaption
   • global advice
   • landscape/square-specific
   • portrait-specific
2. with figcaption
   • global advice
   • landscape/square-specific
   • portrait-specific

That’s a simplistic outline, obviously, just recording my thoughts there, as something else could well make more sense.

The backbone would probably be what RS have been doing: setting a max-width and max-height for all images, and using object-fit: contain (MDN doc). We obviously can’t rely on polyfills for EPUB so this is a non-option for RSs that don’t support it. This can only solve the “without figcaption” cases when it’s supported though.

Then I’m open to suggestions/opinions/etc.

I’ve been personally working on this for the last 3 years, did extensive prototypes and experiments, and don’t consider that all the issues are – or even can be – solved to be honest. Needless to say, fresh perspectives are consequently greatly welcome.