News Archives

Web Graphics

How to Make them Work for You

PFW.com - 2002 The use of graphics on the web is universal these days, and knowing how to produce them can play a large part in getting visitors to your site and keeping them there. Large graphics will slow down the loading time of a web page, and if a visitor comes to your site and has to wait and wait they will probably not be very happy. A good rule of thumb to follow when making web graphics is this: the smaller the better. Making your graphics small and quick-loading, yet still keeping the quality you need, is easy. This article will help you accomplish this in two areas: file format and graphic size (dimensions).

File Format
The two graphic formats that have become standard on the web are JPG (or JPEG) and GIF. These two formats are supported by all major web browsers and there are many applications available to assist you in producing them.

The main reason that these two formats have become the standard for the web is because they apply compression to your graphics, which produces smaller file sizes but keeps the integrity of the graphic. Most image editors and optimizers allow for you to adjust the amount of compression used; however, too much compression can result in a poor-looking graphic, as the process essentially removes extra data from the graphic. Using an application that lets you preview the effect of the compression on the graphic before you save it can assist you in producing the best-looking graphic with the smallest file size. Each format compresses the data in a different way, so determining which format to go with depends on the characteristics of the graphics being used.

When to use a JPG
Graphics that portray realistic scenes, such as photographs, work best with the JPG format. The way that the format compresses the graphic allows for complexity and color consistency to be maintained. Do not use JPG for text, line art or any graphic that has sharp edges. Areas of flat color tend to look mottled after JPG compression is applied to a graphic, so avoid it when there are large areas of a single color. In fact, the more complex the image the better.

	JPG | 9.55 KB			GIF | 13.53 KB

ORIGINAL	JPG	GIF

In this example, the image works best with the JPG format. Note that although the image quality in the GIF is similar to the JPG, the file size is considerably larger.

When to use a GIF
For buttons and text, GIF is the best format. When a graphic has few colors and gradients, this format produces very small file sizes. Using the GIF format maintains sharp edges, and colors remain crisp and flat. Keep in mind that graphics that use the GIF format are limited to a 216-color palette, which means that when a graphic is compressed using this format it is possible that the colors may shift a little bit.

	JPG | 6.57 KB			GIF | 2.63 KB

ORIGINAL	JPG	GIF

This piece of clipart is a great example of when to use a GIF and when to stay as far away as possible from using JPG. The image is compressed to a relatively small size with JPG, but the image quality is nowhere near the GIF, not to mention that the file size of the GIF is over half as small - 2.63 KB vs. 6.57 KB.

Original
	Scaled Down 2 KB HTML Editor Scaled Down 1 KB Image Editor	Scaled Up HTML Editor Note: A version that has been scaled up in an image editor will not be shown as doing so produces a similar result and is not recommended.

Graphic Size (Dimensions)
It is always best to create your graphics at the size that they will be viewed. Most HTML editors (e.g. Microsoft FrontPage) allow you to visually scale a graphic up or down. Scaling your graphics within the HTML editor does not make the file size of the actual graphic any smaller, but merely reduces the visual size. Doing this may result in a graphic that looks stretched or bitmapped (the pixels are visible in the picture) when scaling up or it may cause your page to load slowly when scaling down. For instance, if you have a large graphic that has a file size of 80K, but you want to reduce the dimensions for the web, rather than scaling it in your HTML editor (when doing so would maintain the file size of 80K) reduce it down to the actual size in a photo editor (remember that an 80K file is quite large for the web). Reducing the dimensions of the graphic will decrease the file size significantly, guaranteeing a faster-loading page.

Conclusion
Web graphics can greatly enhance your web site, but they also have the potential to frustrate your visitors. Making sure that your graphics look nice and load fast will work towards keeping your visitors on your site, rather than turning them away. Utilizing the JPG and GIF formats and using them appropriately can mean all the difference in the world.

When to use JPG

• Photograph
• Painting
• Gradients present
• Blending of colors
• Blending of shades

When to use GIF

• Line art / text
• Cartoon
• Graph
• Icon
• Flat areas of color
• Sharp edges