graphics

Thinking about adding graphics to your site? Keep these things in mind:

• Images should be used only if they add to your site's message.
  Images add to the download size of your page and can slow down rendering substantially, if they're not presented properly. Sometimes a picture's worth a thousand words, such as when you're presenting products or trying to get your point across visually.
• When presented properly, images really add to a site.
  This is the flip side of the point above -- images are like the little girl with the little curl in the middle of her forehead -- when they're good, they're very, very good, but when they're bad, they're ... a great reason to leave your site. If you haven't got the experience in working with images, it's well worth the effort to find someone who is.
• Don't commit copyright infringement. It's against the law.
  Just because you find an image online, doesn't mean it's yours for the taking. Many of the images you find online are the intellectual property of their creators. Copyright is a serious issue, and more and more people are enforcing it. A image can be a company logo which conveys their branding -- and they may vigorously defend that brand with lawsuits against people who use their logo/images without their permission. Or an image may be the personal work of an artist whose livelihood depends on the integrity of their work. Any way you look at it, helping yourself to images which are not yours, and using them however you like, is not cool. Better to find an image subscription service like Photos.com or Clipart.com who offer you full access on a subscription basis to royalty-free photo stock.
• Keep your images as small as possible.
  Not "small" in terms of dimensions (pixels high x pixels wide), but small in terms of file size. Each object you include on your page requires a server connection in order to be rendered on-screen, and if an image is over 5-6Kb, it can take multiple server connections, for the entire image to be rendered on-screen. Some folks "carve" large images into a number of smaller ones, then place them side-by-side on the screen, so the page renders faster. Sure, you can do this, but it takes time and energy. Better, to be judicious with your use of images and focus on your site's content, rather than its pictures.
• Always use ALT tags.
  ALT tags are additional tags which go inside your <IMG SRC=""> tags. They display text in place of your image while a page is loading, and they allow sight-impaired users who surf the web with page readers to hear a description of your image. <IMG SRC="mycompanylogo.gif" ALT="company logo"> Additionally, they make your site friendlier towards search engines, which is a good thing.
• Specify image height and width where possible.
  This lets the browser "understand" the dimensions of your page, so that your layout doesn't "jump around" while the page is loading. Be forwarned, however, that if you "swap out" one image of one size with another image of another size, you'll have to change the height and width settings of the second image, or it will be stretched and may not render properly. Browsers are literal with height and width -- what they see in your code is what your end-users get.

Find graphics software and tools and images for your site on our Extras page.