How do you handle double-page spread illustrations?

[graycyn]

I'm working on a scanned book where most of the illustrations are chapter heads, no problem. However, two chapters of the print book have a large interior double-page spread illustration.

I wasn't sure how best to handle this. For text flow and readability, it seemed like a good idea to simply combine each page of the double-page illustration into one single image, and then simply make that image a size that could work in the basic e-reader vertical format, i.e. no more than 600 pixels wide.

That works fine and actually looks pretty good, but the catch is that resizing the image that much smaller does lose a bit of fine detail, especially on e-ink screens. So I was thinking about making a larger version and including it at the end of chapter where the reader could view the larger image by turning their reader to a landscape orientation.

Or is that too disruptive to reading flow? I could also just put these two larger images at the tail end of the book. But as there are only two of these double-page spreads, it seemed like the easiest integration was at the chapter end.

Or should I bother including the larger images at all?

Wondering how others handle this sort of thing!

[DSpider]

I'm a fan of replicating the book as accurately as possible, in PDF form. So I would try to scan the illustration as "complete" as possible - because let me tell you, it's a little tricky using a flatbed scanner to get a good shot between the pages.

Also, it depends very much on the illustration. If it's something simple with most of the details in the middle of the page and a simple colour or colour gradient at the edges, I could just fill it in and none will be the wiser. But if it's a photo or something, I would probably have to crop it so it doesn't look blurred at one edge. But I don't know... I haven't really come across any book with edge-to-edge photos before.

If it's an ePub or Mobi we're talking about here, you could probably get away with hacking both parts together - again, depending very much on the illustration. For instance, most people look at the middle of an image first. So they'll easily spot a big tear right in the middle (or a blur, whatever). Both images would have to line up pretty well.

Alternatively, place one half on one page, crop out the bad part, and when they switch to the next page their minds will automatically fill in the gap. Experiment with this a little. Because it really doesn't matter if 80 px are missing on each side. Crop each half to 600x800 and they won't care. Heck, they probably won't even notice, unless they have the paperback with them and thoroughly check it for details. But I bet the written stuff is much much more important than one illustration. It is a book, after all.

[DaleDe]

Actually most eBook readers would shrink the 800px wide image down to 600px for vertical viewing, so you could just include the one wider image. You may want to experiment with larger images. Some readers will let you double click the image and pan around so if it has some important detail you may want to make it a bit bigger than 800px wide.

Dale

[graycyn]

Originally Posted by DSpider

I'm a fan of replicating the book as accurately as possible, in PDF form. So I would try to scan the illustration as "complete" as possible - because let me tell you, it's a little tricky using a flatbed scanner to get a good shot between the pages.

Whoops, forgot to mention the book I am making is ePub. Actually, I use a handheld wand scanner, and the margins were good enough that I was easily able to get a nice scan of each page.

Also, it depends very much on the illustration. If it's something simple with most of the details in the middle of the page and a simple colour or colour gradient at the edges, I could just fill it in and none will be the wiser. But if it's a photo or something, I would probably have to crop it so it doesn't look blurred at one edge. But I don't know... I haven't really come across any book with edge-to-edge photos before.

Black and white illustration, lots of detail, but otherwise not a bad sort of illustration to reproduce.

If it's an ePub or Mobi we're talking about here, you could probably get away with hacking both parts together - again, depending very much on the illustration. For instance, most people look at the middle of an image first. So they'll easily spot a big tear right in the middle (or a blur, whatever). Both images would have to line up pretty well.

That's more or less what I did. It's fairly obvious still that it's a two page spread, but the images line up and lead into one another. It really looks no different joined into one image than it does in the print spread, because as mentioned, there are decent margins.

Alternatively, place one half on one page, crop out the bad part, and when they switch to the next page their minds will automatically fill in the gap. Experiment with this a little. Because it really doesn't matter if 80 px are missing on each side. Crop each half to 600x800 and they won't care. Heck, they probably won't even notice, unless they have the paperback with them and thoroughly check it for details. But I bet the written stuff is much much more important than one illustration. It is a book, after all.

I thought about this and I may try editing the ePub to try this out and just see how easily my mind fills the gap.

I tried one with putting a large image (that must have the reader be turned horizontally to view) at the end of the chapter, and honestly, not really liking that approach. It feels disruptive. Further, the image is still small enough that while detail is better, it's just not that huge a difference from having the small version in the vertical text flow.

Correct about the written stuff, but the illustrations are by a well-known artist and really are wonderful.

[graycyn]

Originally Posted by DaleDe

Actually most eBook readers would shrink the 800px wide image down to 600px for vertical viewing, so you could just include the one wider image. You may want to experiment with larger images. Some readers will let you double click the image and pan around so if it has some important detail you may want to make it a bit bigger than 800px wide.

Dale

My readers don't do pan and zoom, but that's a good point. Hubby has a kind of zoom on his new T-1, I'll have to try this and see. It might be the best alternative. Thanks.

[Jellby]

Make a single image with a decent resolution, such that no important details are lost, even if it's larger than 600 or 800 pixels, then style it with "max-width: 100%; max-height: 100%;" (the max-height won't really work properly in most cases, though), you can also add "page-break-before: always;"

Originally Posted by graycyn

My readers don't do pan and zoom, but that's a good point.

Even if zooming is not possible, the image is still there, and more detail will be visible in a larger screen or, in the worst case, the image file can be extracted from the ePub file and viewed somewhere else if needed.

[DSpider]

You never know what resolution e-readers 5 years from now will have. Maybe this 600x800 stuff will be considered "SD" in the future, like the 720x480 that DVDs have vs 1920x1080. So you should think about adding a bigger picture than the standard 600x800 res, even if it may take 0.8 extra seconds to display on first gen devices. If it's in black and white you may consider turning it into a vector image.

Some are opposed to using vector images (probably because of some older devices with dated firmwares which may or may not support it properly), but I think that it's clearly a better choice. They take up less space, support large zoom levels. What's not to like?

Originally Posted by graycyn

I thought about this and I may try editing the ePub to try this out and just see how easily my mind fills the gap.

It probably won't work on you since you're the one who edited the image and saw the extra details. But on someone who never read the paperback version (or read it some time ago), chances are very high that they even won't notice.

[graycyn]

Originally Posted by DSpider

You never know what resolution e-readers 5 years from now will have. Maybe this 600x800 stuff will be considered "SD" in the future, like the 720x480 that DVDs have vs 1920x1080. So you should think about adding a bigger picture than the standard 600x800 res, even if it may take 0.8 extra seconds to display on first gen devices. If it's in black and white you may consider turning it into a vector image.

You could be right. In fact, I'm sure you are! But I also need an old Nook to handle this, since one reason I am making the book is to share with a nephew. So I don't want to go too overboard. I can always do another later with larger images.

Last night I had my Sony 350 freeze on me when I loaded the book with the larger images. It wouldn't open the book at all, and I got a "file invalid" message, even though the same file was working fine on hubby's T-1. I'm not 100% sure it was the larger images that caused this, but I couldn't think what else would have.

I was wondering if it was because one of the chapters that has a spread image also has a chapter head and ending image. Because these were black and white and I couldn't see much difference, I downgraded to a 32 shades of grey PNG instead of the 64 I had been using. That seems to have worked, as the file now fuctions fine on the Sony again.

Hubby's T-1 handled the slightly higher quality and larger filesize images fine in that chapter though. I was using 768x1024 sized images for the spreads. That works well even if you take half the image and zoom it until it fills the screen. And it also worked well in landscape. And should work nicely on 7" reader tablets.

Some are opposed to using vector images (probably because of some older devices with dated firmwares which may or may not support it properly), but I think that it's clearly a better choice. They take up less space, support large zoom levels. What's not to like?

I'm not opposed, I have no idea how to convert my scanned images to vector. Does it require special software?

It probably won't work on you since you're the one who edited the image and saw the extra details. But on someone who never read the paperback version (or read it some time ago), chances are very high that they even won't notice.

Having looked at the spread image on a 6" screen, it's not too bad. With the larger image inside the file, there's now a good option to have it display quite nicely in landscape orientation. So I think for now I am good. For the future, well, that's much less certain, but I will of course retain all my master images, from which I can produce larger images I could drop back into the epub at a later time without much problem.

I'm pretty new to rolling my own epubs, so thanks for the advice!

[graycyn]

Originally Posted by Jellby

Make a single image with a decent resolution, such that no important details are lost, even if it's larger than 600 or 800 pixels, then style it with "max-width: 100%; max-height: 100%;" (the max-height won't really work properly in most cases, though), you can also add "page-break-before: always;"

Even if zooming is not possible, the image is still there, and more detail will be visible in a larger screen or, in the worst case, the image file can be extracted from the ePub file and viewed somewhere else if needed.

That is just what I have done, in fact, before you posted, I had downloaded one of your epubs here (The Prince and the Pauper, love it!) and used that coding and it is working great!

[DSpider]

Originally Posted by graycyn

I'm not opposed, I have no idea how to convert my scanned images to vector. Does it require special software?

Vector Magic, Adobe Illustrator, Inkscape... Vector Magic is probably the best, but Inkscape is open source and can do a very good job for black and white images.

[graycyn]

I gave Vector Magic a shot last night, and it did a pretty good job, but there was definitely detail lost and I felt it just wasn't quite "right" for the character of the drawings in this book. But I will definitely keep this in mind, because for some art, it might work really well. So thanks!

I was also wondering, do images count in the 300kb max chapter size uncompressed? I Googled, but couldn't find out. Just that keeping chapter file size under 300kb and images under 10MB (not a problem) was advised.

[pholy]

Just a guess based on my programming experience, but I'd say that picture size wouldn't count because it would be in a different file - so, a different buffer allocation. After all, to check the rule, we'd have to open the chapter file, then parse it and find file links to all the embedded files, get their sizes and add them all up. A lot of work to no useful end, I suspect.

[graycyn]

Originally Posted by pholy

Just a guess based on my programming experience, but I'd say that picture size wouldn't count because it would be in a different file - so, a different buffer allocation. After all, to check the rule, we'd have to open the chapter file, then parse it and find file links to all the embedded files, get their sizes and add them all up. A lot of work to no useful end, I suspect.

That's more or less what I thought. I'll give a go at future proofing this one with slightly larger images, see what happens. If it doesn't slow things down to much on the Nook for my nephew, I'll run with it. Seems a reader with zoom is heading my way.