Graphics for Web Design

The old cliché, "A picture is worth a thousand words", is very applicable to web pages. However, before you get carried away with putting images on your page, remember they can take up a lot of server space which may cause a page to load slower. If photos and graphics are done properly and file size kept small, they will add spirit to your page, and won't have an adverse affect on load time.

GIF - pronounced jiff or giff (hard g) stands for graphics interchange format, a bit-mapped graphics file format. GIF supports color and various resolutions. GIF files use 256 colors or less, can be animated, and generally display edges, lines, and details more clearly than JPG files. Use GIF files for images where edge clarity and overall sharpness are needed, for small size images such as buttons for navigation, black and white images, animations, and transparent images. Note: This last feature alone can create some very interesting visual effects on a web page.

PORTABLE NETWORK GRAPHIC (PNG): A format for graphics that is useful primarily on the World Wide Web. PNG graphics can contain millions of colors and can be transparent, and are compressed without degradation of the image. However, some web browsers can not display them.

JPeG - Short for Joint Photographic Experts Group, and pronounced jay-peg. JPEG is a lossy (it loses quality as it is compressed) compression technique for color images. Although it can reduce files sizes to about 5% of their original size, some detail is lost in the compression. JPG files should be used for photographs, images that should be natural looking, when a large number of colors is needed or great detail, or for images with large dimensions.

In preparing a graphics file for use on a web site, there are several things to keep in mind. How an image is scanned to begin with will help control the overall size of the file. For a photo that will be used strictly on a web page, scanning at 150dpi is sufficient. The higher resolutions only make a difference when printing. Also cropping anything on the edges that isn't essential to the image will make the image smaller in dimensions and file size. Compression when saving the file will also decrease the file size. You may need to experiment with the amount of compression. Note: Save your original image with no compression, and give subsequent tests a new name. Also, remember that each time you make changes and re-save a JPG, additional compression is applied, eventually resulting in very poor quality.

Next take a look at art work or simple graphics. These can be logos, clip art, or combinations of art and text that can be made into a graphic image. Usually these files are GIF images. When wanting to reduce file size, remember that GIF images are saved in horizontal rows. A GIF image with horizontal stripes is generally smaller than one with vertical stripes. So when possible, have the image run horizontally. If you do not have photos of your own to use, there are numerous sites online where you can find stock images at a very reasonable cost. If you find a photo at another site, remember: You can't just take/save it to use. That is stealing. Ask permission from the site owner.

Image Editors 

With an image editor, numerous tools and effects can be applied to an image. Paint brushes, flood fills, line and basic shapes tools, as well as effects like drop shadows, bevels, 3-D, and distortion or deformations are all usually part of an image editing program.

Adobe Photoshop is a very popular program The full version is quite expensive, but well worth the price if you have a digital camera, you'll find yourself using it for all your photo enhancement. If the price is out of your budget, Adobe makes a "little sister" to Photoshop called Photoshop Elements.  The Elements version will be adequate for a simple web site. Adobe also has a Photo Album program for organizing your digital photos. Help and tutorial sites abound, as well as numerous books.

Paint Shop Pro is one program that is quite reasonable in price and rich in features. There are several sites online that have Paint Shop Pro tutorials for different effects, and the Web Developers Virtual Library has an extensive 'from the beginning' tutorial to get you started. Even if you use a different image editing program, many of these sites will possibly give you some ideas. Warning: Designing graphics can be extremely addictive, as you can tell by the number of webrings and graphics sites on the Internet.

GIMP is a free downloadable editor that has become quite popular. GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

With a wide variety of image editing programs available in a wide range of prices, you're sure to find one that will fit your budget and skill level. Most will allow you to enhance your image but several do a less than adequate job with optimizing the images for file size. Regardless of which program you use, the most effective web graphics follow an ABC rule - Appropriate (to the site), Brief (in loading) and Clear (in quality).