Graphics

Don't link directly to images on another server unless specifically asked to do so. Copy the image to your own server (if the owner has given permission) and embed it in your page with the IMG tag.

How To Use The IMG Tag

The names preceding the '=' signs are called attribute names. Only the src attribute is needed for the image to be displayed, but the W3C standards mandate the use of the ALT attribute (not ALT tag) for accessibility reasons, and anyway it's useful for search engine spiders indexing your site. The hspace and vspace attributes are advisable to ensure there's enough white space between the image and any text flowing around it - enabled by use of the align (left or right) attribute. The height and width attributes allow browsers to layout the page while the image is still downloading, and avoids that the text 'shuffles about' as the images come in. Finally, setting border to "0" prevents the hyperlink border from appearing around the image (purists might prefer not to do that).

Here's a comprehensive example of an image tag. It's linked to a URL; it has plenty of hspace to keep the text away.
<a href = "/Authoring/HTML/Objects/Images.html"> <img src = "/Icons/graphics.gif" width = "108" height = "44" border = "0" hspace = "16" vspace = "8" alt = "Click here for more info!" align = "left" ></a>

Graphics can be very easily overdone. On the other hand, a site with nothing but text is unappealing to most of us. Our own philosophy about this is that there's a sensible middle ground where you construct your page first without any graphics, and when you have done that well (e.g. it has useful content and validates adequately) then add some pretty pictures to spice it up.

Transparent Images

Some images look better if their background color matches the browser window, making the image appear to float in the window. You can't do this by setting the background color of the image, since you can't control how people will configure their browsers. You can control this by using GIF89a images, which have the ability to mark a single color in the colormap as transparent, forcing the browser to use its background color for those pixels in the image.

Anti-Aliasing

Take care about 'anti-aliasing' features, if the icon has a transparent background. Anti-aliasing is a technique used in graphics construction to minimise the 'jaggies' that you can see on lines that are not perpendicular or horizontal. The best way to see jaggies is on circles.

The technique works by inserting pixels of a color intermediate between the object and it's background to 'blur' the edge, and so once done, the object is best viewed against that color background, and less so against others. In particular, icons designed for use on a black (white) background may look bad against a white (black) background.

This icon (courtesy of ProWebSite) was aliased against a light gray background. Against a black background, you still get the jaggies.

GIF Animations

Animated GIFs help to bring static pages to life. A couple of points to note: again, don't overdo it. Some people may find the animation distracting and even annoying.

Animation is popular for banner ads and, when sensibly done they can be eye-catching and help to increase the click-thru' rate. But if the animation is too strong or 'loud' you may alienate the viewer. We once got a couple of complaints within minutes of an advertiser's ad appearing on our site (via an agency link - we didn't see it in advance) because it was black and white, and the animation switched the colors to simulate an explosion. It was extremely annoying.

Elaborate animations may take up a lot of download time. I once had Dan Austin's wonderful Golden Earth animation on our home page - but at 88kbytes it upset too many people.. If you have a 'cool' GIF animation, better to place it elsewhere and let people know where to find it if they want.

Imagemaps Client-side; Server-side

Imagemaps have been one of the major innovations in web interactivity. I first saw them in the dawn of web time, when there was no commercialism on the Internet, and most web pages still had more text than graphics. Now of course, most sites are commercial, and they want to grab their audiences' attention quickly.. tons of text doesn't do that.

Applying Text to Images

• Use a slim sans-serif font.
• Avoid dithering if possible.
• Apply the text last, if possible,.
• Don't resize or resample after adding text.
• Make sure that the anti-alias option is checked when you add your text.
• If your image has many colors try saving as a JPG and compare it to the same image saved as a GIF.

• HTML for Web Graphics
• GrafX Design Web Graphics Tutorials

• Graphics Tools, Techniques, Examples and Resources
• 3d Graphics for the WWW
• Icons'n'Stuff
• Images for Web Pages
• Graphics Resources
• Using Back ground Images on Web Pages, and Resources
• Purloining and Pilfering
• Graphics Tools
• Introduction to Paint Shop Pro 5
• Introduction to Web Design with Adobe Photoshop

Clip Art and Arrows, Buttons, Animated GIFs, etc...

Many 'free graphics' sites offer what is called 'clip-art' - icons, buttons, rules, gizmos, and simple pictures (usually GIF). They may help to 'spruce up' a site somewhat, though novices tend to go overboard and put too many of these images on their pages, often with little or no coordination such as style or color. I've classified these resources according to what they seemed to me to be most concerned with, but please note that many of them are broader in scope and may well be worth checking out for other types of graphics.