images on the web

The most basic way to breathe life into your web site is by incorporating images. But images also have their price. Even small images add up, when it comes to K-size. If you're not careful, they can slow your page to a crawl.

Artistic instinct, technical knowledge, and restraint are all keys to effective use of images online. You have to know visually when a graphic is needed, technically how to produce the smallest possible file, and instinctively (or politically, in an office environment) when enough is enough.

2 types of images on web sites:

• Inline images, which are pulled into the web page along with the text and graphics.

• Background images, which are like wallpaper. They're the bottom layer over which all other elements of your site will be laid.

1. inline images These are your basic, run-of-the-mill images on the web. They may be used for logos, buttons, navigation bars, or editorial elements. There are two common ways to enhance images: with image maps and image rollovers:

   • Image maps let you to link from a single image to multiple web pages, depending on where you click.

     The image map on LonelyPlanet (www.lonelyplanet.com) lets you select the corner of the world you want to visit, and brings up the appropriate travel guide.

     

     The logo on Nickelodeon's website (www.nick.com) splatters when you mouse over it, thanks to a rollover. It also makes a "Bwaaap!" sound which kids love.

     

     

   • Image rollovers or "mouseovers" as they're often called are images that change when you mouse over them, revealing a second image.

2. background images aren't used as often as inline images. Most sites just work with a background color. But there are a few interesting uses of background images, which can be produced two different ways:

   • Full-screen backgrounds fill the browser window with a single image, stretched to fit. The most important thing to remember here is file size. Images large enough to fill the browser window can grow quite large in terms of how much memory they require. One smart strategy is to use a small, low-resolution graphic, and stretch it to fill the space available.

   • Tiled backgrounds fill the browser window with rows and rows of the same image, laid one next to the other. The image must be square or rectangle in shape, but it can be any size (as small as a single pixel).