image optimization

[chessbot]

What is the best way to have text appear sharp and readable in an image saved for a website? The images are aboua 100-150 square. Meaning what extension, how to alter it, etc...
I have access to Photoshop CS.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

 

[Dweezel]

If you're in photoshop then the anti-aliasing makes a big difference to the readability of text, especially if it's small. You'll see it in the top menubar when you have the type tool selected, it's a selection box with 'aa' next to it. I usually find setting it to 'sharp' or 'crisp' makes it more readable.

If there is lots of flat colour in the image then you'll be better of saving as gif rather than jpeg. But if the colours are more complex and you need to use jpeg on an image with small text then you'll have to use fairly low compression, and make sure the 'blur' setting is 0.

If you don't need the text to be in a stylised font, then you may want to consider putting the text in over the image using css.

 

[pixl8r]

If you want it to be very readable select "none" from the anti aliasing drop down list. (note: will NOT look good for all fonts).

 

[MikeBarone]

Another reason for fonts becoming degraded is because they are resized in INDEX mode (flat image). If you need to resize an image change it to RGB mode first and it will be less degraded than otherwise.

Mike Barone

http://www.cgiscript.net

FREE CGI/Perl Scripts & JavaScript Generators

 

[chessbot]

The main problem was that the images were uploaded at different sizes than they were used. This resulted in the browser resizing the images and making them illegible. With a resize in photoshop and a re-upload, the images are readable.

Thanks for all your responses; I will keep them in mind for the future.

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

 

[pixl8r]

Browser resizing is always bad!

 

[chessbot]

I noticed that... eventually

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

 

[hotfusion]

And the final (?) word:
Always use gif or png to encode images containing text, as then the edges of the font are not disrupted.
JPG is bad for images containing sharply contrasting areas, such as the edges of fonts - don't use it for anything other than photos or graphics with gradually changing colours.

Regards, Andy.
**************************************
My pathetic attempts at learning HTML can be laughed at here:

http://myweb.tiscali.co.uk/andyspatch/index.htm

 

[chessbot]

Thanks!

Always use gif or png...

Which is better?

--Chessbot

"See the TURTLE of enormous girth!"
-- Stephen King, The Dark Tower series

 

[SPYDERIX]

chessbot,

If you are resizing images on the fly then you can look into using php and the gd library to make smooth images. Also you question about gif or png varies. PNG is better b/c it support 8 but alpha transparency (varying leverls of transparency) gif does not (it only has 256 colors). BUT - png24 files do not work in IE at all. It all depends how you use them.

Hope this helps!

NATE

http://www.mainframehosting.net

Got a question? Search G O O G L E first.

 

[chessbot]

Thanks.
These images will be used in HTML email newsletters (not my choice, I've already been through the pros and cons). Therefore, they will only appear in one place each, most likely. PHPGD shouldn't be necessary, then, but I will look into it if it becomes so.

Thank you for your comments about png vs gif. It seems that gif is preferable in this case since transparency isn't needed and ie-compliability is.

Out of curiousity, do you (or anyone) know why ie doesn't support png?

--Chessbot

 

[SPYDERIX]

Well careful now - I should really clarify for you.

IE does support pngs. It supports both PNG-8 and PNG-24 - however if your PNG-24 uses alpha transparency in hopes for you to blend into whatever background is there etc it won't work as desired. IE for some reason adds a grey matte color to the transparency even though you specify it to be transparent. It's a bug. IE for PC is the only browser I've found that does this. IE for Mac doesn't do this. Why the mac version works and the PC version doesn't is beyond me. You can use pngs all you want but be careful when using transparencies in your pngs.

Hope this helps!

NATE

http://www.mainframehosting.net

Got a question? Search G O O G L E first.

 

[chessbot]

Thanks, will keep that in mind.

--Chessbot