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.)
Free Image Editing Programs You Can Use
If you need an image manipulation program to crop or resize your visuals, don’t feel like you have to buy Adobe Photoshop. Almost any contemporary image program will work. In particular, there are free desktop graphics programs you can can download and install on your computer such as Paint.Net (Windows) and GIMP (Windows, Mac, Linux).
While not as powerful as Adobe Photoshop (the industry standard used by commercial photographers and graphic artists), these programs are more than sufficient for a new web writer/designer. Later on, should you have access to working with Adobe Photoshop, the skills you learn from GIMP or Paint.Net will transfer.
If you just need a one shot tool to do a quick resize or crop, or to reduce the size of a graphics file, and you don’t want to install a program, online graphic editing programs such as Aviary or pixlr are becoming more powerful and should work just fine.
Source: Writing Spaces Web Writing Style Guide, available under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) License.