Expert: Glen Demers - 8/5/2008

Question
Hi Glen,

I am hoping you can help me out.  I have been given four different images that I need to post on a website.  The original images were created in Photoshop CS2 Mac and have the following dimensions: 2325 pixels by 3150, 300 dpi, 24 bit color.  The files are roughly 3.5MB in size each.  I have tried several times to downsize the files for the web.  The difficult part is that half of the page is on a blue gradient background with white text that is small in font size.  When I resize the file to 72 dpi, 640 pixels tall and apply an unsharp mask the image shrinks to 200KB (still too big) and the text is unreadable.

I own CS3 but have not yet installed it or learned how to use it.  I have an intern who has CS3 on her home computer.  Would you be able to give me detailed instructions how we can resize these pictures so that they fit on a screen display set to 1024 x 768 and have legible text and are as small as possible?

One idea I had was to contact the graphics artist and ask them to create files with a solid background (no gradient) while using a larger font.

Thanks so much for your help!  I am under a really tight time schedule.

Charles

Answer
Hi Charles,

The best way is to use the save for web feature in Photoshop, this gives you great control over the look and size of an image. The bad news is that type set at 32 pt reduces to about 8 pt. this is about the limit of legibility for the web, anything smaller than 30 pt at 300 dpi will be unreadable at 72 dpi. 8 pt. type at 72 dpi is legible if it's upper and lower case and a common font - no scripts, display fonts or old english - Arial or Helvetica would be very legible at small size.
If the image is just a gradient and type you may get better results by saving as a GIF image.
Ideally your graphics artist could eliminate the text from the images and you could place it separately on your website over the image. I would not apply unsharp mask as this may cause 'halos' around the type and decrease legibility.
As long as there is sufficient contrast between the type and background the gradient or solid should not affect legibility - the Apply Now image in the AllExperts header shows how small type can be as an image.
Save for Web, High quality jpeg compression, no unsharp mask, large sans font.

Hope this helps,
Glen Demers
Adobe Certified Expert, Photoshop 7
Prepress Technician, Best Printing Online
www.bestprintingonline.com

For more Photoshop tips please visit our help pages <a href="http://www.bestprintingonline.com/photoshop.htm">here</a>