You need to liven up your web site design with professional looking photos or illustrations.
The right photo or illustration can support your web site's design and convey its message with visual impact. Consider this checklist when browsing through the myriad sources of artwork that you can add to your design.
Copyright and usage restrictions
Your first consideration should be what rights you have to use an image on your site. As you'll see in more detail in Recipe 5.5, there's little to be done to prevent web surfers from taking an image from one site and using it on another. Images you find on someone else's site typically belong to someone, so take the time to find the owner and ask for permission to use the image on your web site. Even public domain images from government sites, though copyright free, usually require some acknowledgement of the source.
Images from subscription-based sites such as ClipArt.com and EyeWire may come with usage restrictions. For example, you may need to pay a higher price for an image that you can use online and in a printed newsletter, or for a version of the image that you can manipulate significantly from the original. Spend some time thinking about your graphics needs before downloading the first great image you find.
Combining graphics or photos of two or more artistic styles is one of the most common mistakes novice designers make. When you use icons or standalone images to set the tone for your web pages, consistent style is importantbut it's also hard to manage (see Figure 5-10). Using a watercolor-style graphic for one icon and a pen-and-ink style for an adjacent will give your web pages an unprofessional look. One way to avoid this is to look for plain black and white graphics to which you can apply your site's color scheme.
Figure 5-10. Varying styles of clip art is a warning sign of novice web design
Strive for uniqueness
Try to avoid the graphical clichés that plague the web these days. The acrobatic envelopes that invite email communication and tireless construction workers on unfinished web pages have lost their distinctiveness. And although the inclusion of human faces have a timeless quality in all sorts of design, the visual tropes of ladies with headsets and men shaking hands need to be retiredalong with the older couples staring expectantly at brandless laptops.
Choose the right file format and resolution
Graphics for web site use are typically offered at 72 dpi, although only the overall height and width in pixels truly matters. (See Recipe 4.3 for more about the surprisingly wide variety of screen resolutions on your visitors' computers.) If the image you've download is already in a compressed format, such as GIF or JPEG, then you're limited in how much you can resize or otherwise customize the image. A 100 pixel by 100 pixel graphic can't become a 200 pixel by 200 pixel graphic without significant loss in image quality. Higher resolution or uncompressed files can be more easily manipulated. You can add or remove backgrounds, enlarge the image or crop in on details, or change colors in specific areas before you optimize the image.
Anyone who has browsed through a clip art or stock photo collection looking for the right image to add to a publication or web site knows that the signal-to-noise ratio is pretty high. Outdated hairdos and "Schoolhouse Rock"style caricatures seems to be more the norm than the exception, especially in the budget bin. Use a "less is more" approach when adding images from these collections to your site. Make sure each addition is just thata way to extend and enhance your web site's design, not detract from it.
Search several online stock photo catalogs at one time with Fotosearch (http://www.fotosearch.com/). Recipe 5.1 discusses various image file formats, and Recipe 4.3 will help you match image text to your web site's text.