Design Tips for Web Imaging

Always with a purpose

Imaging is fun, but it can also be a hassle. You'll be more patient and less frustrated if you work with a clear purpose in mind. Ask yourself, "What information does this image present? Is it really vital to what I'm doing? Is there a simpler way?"

Small is beautiful

Images with a large file size can take a long time to load over the network -- especially over a modem. Keep your images to as small a file size as possible.

Images with larger pixel dimensions tend to have larger file sizes, though there are exceptions, so one way to keep file size small is to keep pixel dimensions small.

Choose the right file format (JPEG for photo-realistic images, GIF for cartoons, logos and line art) and use compression options suitable to your purpose.

Less is more

A Web page chock-full of images will take longer to download than a Web page with only one or two images. Add up the size of your HTML file and all the images it references. If the sum is more than 30 Kb, your page will likely take over ten seconds to download fully over a standard modem. Ten seconds is a long time to wait. You may want to consider a new design.

WYSINWTG: What you see is not what they get

This is the fundamental rule of Web design!

Although more people are getting big, high-color monitors, there is still a significant population who are seeing your page with the old VGA standard: 640 by 480 pixels, and only 256 colors. This has two important ramifications that should factor into your design:

Always include alternate text

Remember that some people will not see your image at all. They may have image loading turned off on their browser (try it some time) or they may be vision impaired. Use HTML to include alternate text for these folks. It's not just a good idea; it's the law.

Archive high-quality originals

Accidents happen, so it's good to have a back-up copy. But there's more to it than that. JPEG compression is cumulative, so each time you re-open, edit and re-save a JPEG file, more of the original data is lost. Keeping your original gives you more options later.


| Basics of Web Imaging | Tutorials