Web Dev, Linux, WordPress & More

Designers: Use Images Wisely!

by eric on August 31st, 2006 in: Web Design

Pictures and images can make or break a site. Using imagery well can guide an audience, reinforce website copy, and solidify your brand.

On the web, pictures are “worth a thousand words” because they can illustrate a concept in milliseconds, provide visual interest, and break up the monotony of text.

Here are three ways NOT to use images on your site:

Use images for all text on a website.

While embedding text in images offers extreme control over presentation including size, color, and positioning, it reduces accessibility, increases load times, and can be a royal pain when you want to change text.

Also, search engines can’t read text embedded into images, although they do read alt attributes.

CSS allows precise presentational control of any element on a page. So body text need not be embedded in an image, but can be cleverly positioned around, or over, it.

CSS may not render exactly the same in every browser, but for usability, accessibility and search engine friendliness, it can’t be beat.

Ignore image file sizes.

If small is good, large must be better, right? Not necessarily.

Using tools like Photoshop, Fireworks, and the Gimp, you can optimize a picture so that its physical, and file, size will work well for users on all types of connections.

If you don’t have photo optimization software, consider using a free service like Flickr that will automatically create different sizes of any picture you upload.

Making sure that all of your image file sizes are tailored for use on the web will speed up download times and reduce your bandwidth usage.

Use images as your navigation.

Far too many sites use a series of images and javascript to create rollovers. While this may look nice, it limits accessibility and increases maintenance times.
Every time you need to add a navigation item, you have to duplicate or edit the image, find the same font to create the new image, and incorporate the script. It also adds unnecessary bloat to your page code.

Using CSS, you can easily design attractive navigation systems that are much more flexible. You can even incorporate images in the background to make it look more professional.

If your the navigation isn’t likely to change much over, image-based navigation is okay – especially if you use image replacement techniques to keep the design accessible. It can still be a hassle to change, but it looks nice and may be worth the extra work and reduced flexibility.

Test the images on your site

Try turning off images in your browser to see what the site looks like. This is a good test of accessibility.

Instructions on how to disable images in Firefox.

The Wrap

Images are very powerful tools. Learning to use them wisely can save you time, increase the usability and accessibility of a site, reduce maintenance costs, and better serve your users.

Leave a Reply

%d bloggers like this: