WEB STUDIO ZONE'S TRAINING
Web Design Concepts

Back to Main Article | Archived Articles

Graphics And The Web

In this the first session of our lessons on web design concepts and ideas we will deal with the topic of the correct use of graphics as it pertains to use on a website.

Graphic Types And The Web

JPEG, GIF, PNG, TIFF, BMP... There are many types of graphics that "can" be used on websites. However, there are primarily only two types used, and the proper use of these two types makes a remarkable difference in the performance of your website. The first of these are graphics with the .GIF extension which stands for Graphic Interchange Format. This type of image is best used when you have an image that has large areas that use the same color and has little or no variation. An example of this type of graphic would be a cartoon type image where each part of the image uses one flat color (fig. 1).

fig. 1

The other type of graphic used is .JPG or JPEG which stands for Joint Photographic Experts Group. this type of image is best used when you have an image with a considerable amount of variation within the image such as in a photograph (fig. 2).

fig. 2

Why Does It Matter?

You might ask, why is it so vitally important to use care in selecting which format to save your images? Without getting too technical the importance lies in how the compression algorithms work for the two types of images. The type of compression used for GIF images is a "lossless" compression meaning that it can be compressed without loseing any of its image data. In other words, the decompressed image is exactly identical to the original. It is also a compression algorithm that works very well when you have a very repetitive mix of pixels in the image. Thus, as said before, when you have a lot of flat areas of the same color (such as cartoons and line art etc.) the GIF format will reduce the image size much more than is possible if you were to save the same image in another format. One other advantage to useing this format is that, unlike the JPEG format, it supports the use of transparency. This really comes in handy if you are trying to blend an image with its background to make it appear to float and avoid that ugly box appearing around it which results in a very unprofessional looking site.

JPEG images however, use a "lossy" compression. This means that they do lose some of the image data when they are compressed. The fact though that they are being seen on a computer monitor, which has a relatively low resolution itself, makes this loss of data mostly undecernable. However, the way this compression algorithm works makes it far superior to the GIF format when saving photograph type images. In rough terms a photograph saved as a GIF would likely be less than half the file size if it had been saved as a JPEG.

Keep these concepts in mind the next time you crank up your favorite image editing tools. You'll then be one step closer to producing that perfect website!

 

Back to Main Article | Archived Articles