Help Me Understand: Readabilty of Text in Images

[Ecnassianer]

I make a webcomic (CarpeChaos.com for examples), so I produce a lot of images with a fairly extensive amount of text in them. I want to make sure the fonts in those images are as readable as possible. My experience on this topic is just someone who has read a lot about it online, I'm not professionally trained, so some of my assumptions may be flawed, please point them out. I'm using CS2, but my copy of CS5 is in the mail.

Photoshop is the core of our workflow and our PSDs are set up as several layers of image data and several layers of text. We don't rasterize the text at any point. The text is almost exclusively high contrast grayscale (aka black text on white backgrounds). Each PSD is 2880x3240, but we publish at 960x1080 AND 640x720.

What I know about font rendering tells me that fonts are rendered differently at different sizes, and that scaling rasterized text in images smears them into horrible messes.

With that in mind, I've been a bit of a fascist when it comes to our image mastering process. I never flatten text layers, nor rasterize the text in any other way. My assumption is that Save For Web... in Photoshop does the smart thing by resizing first, then rasterizing the text. Therefore, I use the "Image Size" tab in Save For Web dialog to produce the right sized images. Our jpeg compression is usually between 67% and 87%, although on rare occasion it can go as high as 100%. This produces rather crisp text with about as good of readability as I can hope for in a jpeg.

Unfortunately, this process takes a fair amount of time, and I'd love to dump all our PSDs into a script that generates the jpegs automatically.

I've been playing around with File-->Scripts-->Image Processor but haven't yet gotten results that match doing it by hand. And frankly, from the dialogs, I don't trust that it respects my vector fonts as much as I do.

I'm not opposed to switching image formats to png or something else, it just needs to be web friendly.

So I have two questions for the wisdom of this forum:

1) Do you know any way that I can improve readability over what I'm currently doing?

2) How can I get the same results with less work? Is there a way I can get optimal results from an image processor script?

 

[Ecnassianer]

Here's an example of what I'm producing by hand:
http://imgur.com/9Oho4.jpg
The art is crisp and clear, the fonts are readable and it weighs in at 176k.

Here's what Photoshop's Image Processor script produces with a jpeg setting of "8":
http://imgur.com/sUmjo.jpg
There's some clear compression issues in the art, and the font has some blurry bits (check the capital E in Every), AND it's 203k. It's lower quality, but a large file size!

Here's Photoshop's Image Processor script with a setting of 10 (or was it 9?):
http://imgur.com/LrbGJ.jpg
The image quality is about the same as my hand mastered image, but the file size is over 100k larger! And I'm not even sure the fonts are easier to read.

(Make sure your browser isn't scaling these images to fit, or they'll look much worse than they should)

 

[Dezigns Unlimited]

Try wrapping your links in the img tags..

[img]linkhere[/img]

I won't click on links anymore, got a virus two weeks ago and had to reformat... It was a drive by!!

 

[iDad]

Those images and text look fine here

 

[Ecnassianer]

Try wrapping your links in the img tags..

[img]linkhere[/img]

I won't click on links anymore, got a virus two weeks ago and had to reformat... It was a drive by!!

I linked them because when you embed them with forum code my browser (Chrome) rescales them to fit the forum layout (even when I click the "Click here to see the full image" bar). When browser scaling is layered over the effects that I'm talking about, you can't see them, so they're not useful for discussion of my process.

I can't edit my post anymore. Can you please go back and edit them back to links so they people who are willing to click my links can see them at their native resolution?

 

[Dezigns Unlimited]

I can but i think your missing the part where people can click on the photo to view the full size?? If you want me to still reedit it i will but like i said, the forum only makes a thumbnail, it doesn't resize anything, once the image is clicked on it opens up to fullsize..

 

[Ecnassianer]

Those images and text look fine here

While they "look fine" at a glance, my greater concern is in maximizing readability. When reading large sections of text (like the body text of a book) the quality of the font and the way it's rendered is very important when people have to read page after page. Fonts that are less than ideal (even if they look ok) tire the reader's eye and make the reading process less enjoyable. It's sort of a cumilative process, a little blur here and a little blur there doesn't matter on a single page, but after 1000 words, it builds up.

I'm looking for this fairly extreme optimization advice.

 

[Dezigns Unlimited]

Here is an example...

Click on the yellow bar where it says CLICK HERE TO VIEW FULL SIZE

 

[Ecnassianer]

I can but i think your missing the part where people can click on the photo to view the full size?? If you want me to still reedit it i will but like i said, the forum only makes a thumbnail, it doesn't resize anything, once the image is clicked on it opens up to fullsize..

You can test this by right clicking the image and going to "Copy Image URL" and pasting that into a browser window and comparing it to the "full size" that the forum post bar provides. Although I can't guarantee that your browser renders it the same as mine.

Clicking the images themselves does nothing.

 

[Ecnassianer]

The bar should actually be labeled "Click here to view at a larger size".

 

[Dezigns Unlimited]

Oh ok, i see what your saying and you are correct it does not show Full Size. Sorry about that. Nevertheless you could still post the images and the links, a lot of folks will bypass links before they will a photo.. I can see well enough in the size the forum allows.. Text = Fine IMHO...