Converting scanned images for use in epubs.

[jwes]

I am converting OCR text of old magazines into epubs and have some questions.

1. How should I balance image quality and size? What size should I try to keep my epubs under to be easily usable? The images are not fine art and often not even good art. I have been downsampling and saving with reduced quality, but do not want to go too far.

2. Some of the pictures have text in blank spaces and I don't know if I can do that in html. I am attaching one of the more extreme examples and I would like to know what other people would do with it. It is two pages.

[j.p.s]

Brushing or erasing large areas of the background to pure white wiould reduce file size a lot.

[jwes]

Originally Posted by j.p.s

Brushing or erasing large areas of the background to pure white wiould reduce file size a lot.

I'm no graphic artist, and I'm trying not do things that would offend people who have an eye for art. I'm pretty sure my ham-handed attempts to change the background would be one of those things.

[JSWolf]

Originally Posted by jwes

I'm no graphic artist, and I'm trying not do things that would offend people who have an eye for art. I'm pretty sure my ham-handed attempts to change the background would be one of those things.

Editing the background to make it white would give the images more contrast.

[j.p.s]

Originally Posted by JSWolf

Editing the background to make it white would give the images more contrast.

Except that there are all those half toning dots all over the background.

[Turtle91]

There are basic 'eraser' type tools in most graphics programs that allow you to first, select the primary object, second, invert the selection so everything BUT the object is selected, and third, hit the delete key to remove everything but the object.

Then you can either leave it as a transparent channel .png, or fill the background with pure white and save as a .jpg .

Then you can get your hands dirty and play around with changing the levels… if you mess something up, there is always 'undo'.

There are also plenty of YouTube videos that demonstrate how to remove the background using whichever software you have.

Personally, I would also stitch those two images back into a single image. That makes it much easier to flow the text around or otherwise manipulate.

[jwes]

Originally Posted by Turtle91

Personally, I would also stitch those two images back into a single image. That makes it much easier to flow the text around or otherwise manipulate.

How do I get the text to flow into the two blank areas on top right and bottom right of the combined image?

[DNSB]

Originally Posted by jwes

How do I get the text to flow into the two blank areas on top right and bottom right of the combined image?

I did a quick search on "L-shaped images wrap text site:mobileread.com" and it came up with multiple hits. See Text wrap around irregular shapes as an example.

[JSWolf]

Have a look at the eBook Three Men in a Boat available on MR. There are three L-shaped images and you'll be able to see the code for these images.

https://www.mobileread.com/forums/sh...ad.php?t=48377

[Tex2002ans]

Originally Posted by jwes

I am converting OCR text of old magazines into epubs and have some questions.

1. How should I balance image quality and size? What size should I try to keep my epubs under to be easily usable? The images are not fine art and often not even good art. I have been downsampling and saving with reduced quality, but do not want to go too far.

There was a few topics way back in:

• 2013: "What’s your “image rehab” routine?"
• 2015: "Image cleanup tips"

Some people prefer manual image cleanup/steps.

Like others already said though, it sometimes helps to:

• Convert backgrounds to pure white
  
  • By adjusting the contrast/levels.
• Convert lines to pure B&W or grayscale
  
  • 256 or less shades of gray.

that will severely cut down on filesize.

See some of my discussion here on some potential tools/methods/examples:

• 2020: "How to handle images in books while doing OCR of books?"
• 2020: "Optimize PDFs from archive.org for E-Ink devices"

That covers a lot of the "yellowed pages" and similar issues.

Personally, I have zero image editing skills, so I mostly rely on the semi-automated tools to get me an "okay" image out of the original scans.

Originally Posted by jwes

2. Some of the pictures have text in blank spaces and I don't know if I can do that in html. I am attaching one of the more extreme examples and I would like to know what other people would do with it. It is two pages.

For oddly shaped images—like one with text below the horse's hooves—it's best to completely cut the text out of the images and replace with pure blank background.

Like DNSB + JSWolf said, from there, you could mess with code for "L-shaped images", but those are very tricky to make work, plus each image will require manual code/tweaking.

- - -

Side Note: In the future, there might be better support for this type of thing with CSS3 Shapes + automatic shapes based on the image's alpha/transparency:

• MDN: "Shapes from images"
• MDN: shape-image-threshold
• CSS Tricks: shape-image-threshold

but for now, that advanced code probably wouldn't work well in most ereaders.

- - -

Side Note #2: For more, similar discussion, also see:

• 2021: "Background Image w/ Text on Top"

Originally Posted by Turtle91

Personally, I would also stitch those two images back into a single image. That makes it much easier to flow the text around or otherwise manipulate.

Yep! Exactly! Merge the left/right halves of the horse together into a single image.

Then you could just plop the image into the ebook and treat it like a normal rectangle. :P

But to try to recreate some of these advanced two-page-spread layouts in an ebook... probably not the best idea!

[retiredbiker]

I've done a lot of old magazine OCR from Internet Archive stuff. I use OCRFeeder, a front end for Tesseract, for the OCR. It lets me select blocks of text around images, avoid adverts, and deal with the dreaded "continued on page nn" right up front, so I don't have a mess in the text file to fix.

I use Gimp to edit individual images, but I'm no expert. I size full-page images for the resulting epubs with the longest dimension around 1200 px, and around 150 px/in resolution. This gives PLENTY of quality for zooming in on my Kobo, if needed. It keeps the file size reasonable, too. Of course if an image in the magazine is small, I just leave it that way, and eye-ball how to make it look on the reader; see below.

I do some cleanup, it depends on the image. Anything muddy in the original will be just terrible on e-ink. So going to grayscale and playing with contrast are common options. Color images are completely different, and frankly I struggle there, if the original is bad. But again, getting higher contrast is good for e-ink. Turning spotty backgrounds to white is definitely worth it for many old/yellow/brown images.

Those two-page title spreads I always stitch together into one image and take out any text, so the result is a plain rectangle for a title image. Never try and get text into some odd-shaped image, e-readers just won't do it.

Put the images into the epub with a css class that gives % height or width, and the other "auto". Never code them in with hard dimensions.

And if you are doing books for general consumption, have a heart for us old nearly blind folks...test your book on e-ink at really huge text sizes, like 24 or 36 points on the reader. That is like 3 or 4 words per line. A lot of fancy stuff that looks good at small text sizes just falls apart when you do that.