You Can’t Write for the Web without Working with Visuals

  • Posted on: 16 May 2011
  • By: admin

What would the web be without images? Pretty boring, right? Consider using relevant visuals on your web pages to enhance the meaning of the copy that you have written. Here are a few important tips to follow:

  • There are three main file formats for images that you can currently use on the web: GIF, JPG, and PNG. GIFs work well for icons and other graphics with large areas of simple colors, but because GIFs are limited to 256 colors, they are a poor choice for photographs. JPEG (or JPG, as they are commonly called) is a lossy format (like MP3s) that supports millions of colors and can work well for photographs. In fact, JPG is likely the default file format that your digital camera uses. Beware. The more JPGs are compressed to reduce file size, the more image quality (information) they lose. PNG is a lossless format that can support both a small range of colors, like GIFs and millions of colors in photographs, like JPGs, only without any visual quality loss (but larger file size). Given all these considerations, you may need to experiment saving your images in the different image file formats to determine which provides the quality you need at the lowest file size. (If you want to learn more, see Patrick Lynch and Sarah Horton’s excellent article on graphic file formats on the web.)
  • Make sure your visuals are appropriate and relevant to what the rest of the text says on the page. Don’t pick a visual just because it looked “cool” when you found it. Visuals should enhance the meaning.
  • Make sure your images are good quality. JPG “artifacts” and pixelated images (caused by making a very small original image larger) look unprofessional and sloppy. A good rule of thumb is to stick with the “high” setting (60 or more) when saving JPGs.
  • Crop images to remove unnecessary information (e.g., when creating screenshots, remove the browser window) and to focus the reader’s attention on what is important in the visual. Cropping an image to exclude extraneous detail can dramatically improve the image’s effectiveness.
  • Beware of stretching images out of proportion if you prepare them in an image manipulation program. Don’t make your images look like they came from a distorted reflection in a fun house mirror.
  • Provide captions when using multiple visuals in longer web texts. Captions will orient the reader to your reason for including the visual. Otherwise, readers have to guess your intentions.
  • Reduce very large images using a graphics program. While HTML provides a method for defining the width and height of an image, this method does not change the file size. You don’t want your reader to have to wait for that 5MB image file to load when you could have easily resized and resampled the image to 50k or less. Almost any stand alone or web-based image program can be used to reduce your image file sizes and the results can dramatically increase the speed at which your pages load. (See the next section for more information on image programs.)