SCANNING & GRAPHICS    

"Graphics" is a science and an art unto itself. The objective of page is to provide some insight, advice and pointers in both selecting the right format for the task at hand, and to promote some understanding so you can use the available formats to your best advantage.  Our goal is to learn to strike the proper balance between beauty and speed.

This is not a tutorial on how to draw.
I am a terrible artist. I've been red-green colorblind all my life. I never could draw anything "pretty." But I learned to use a camera back in the '50's with my first Brownee Bullseye. I bought my first Pentax in 1968. Now, I own a digital camera … which is very easy to use.

I take advantage of my cameras and all the public domain images on the Internet that meet my needs. If I have an image that doesn't meet my needs, I modify it using various effects to achieve my desired result.  No matter how good or bad an artist you are, the basic technical aspects of images must be understood to create effective web pages.

So what are we doing here?
I'm sure you'll enjoy using graphics and pictures on your Web Pages and look forward to sending your family and friends your best "pictures" as attachment to your E-mail to. You'll need a rudimentary appreciation of graphics files and their formats in order to do this. When you make your web pages, you'll want:

• To use the right type of graphic for the desired effect / portrayal.
• To liven things up from an artistic standpoint.
• To have them on your web pages . . . because everyone else seems to.

As you have been out either harvesting artwork or creating your own, you'll find two different types of image files:
the GIF and the JPG. (actually, JPG's real name is JPEG, but since the files' lastname are normally named 'JPG', we will call it "J-PEG" for short!) Now, let's try to make this rather complex subject simple by using real life examples.

What is a JPG image?
A JPG image file is a format created by the Joint Photographic Expert Group. JPG files are best suited for complex images such as photographs and very intricate graphics. The features of JPG files are:

• They can have up to 16.7 Million colors in an image.
• They use a method of file compression to reduce their 'file size' when the picture file is written to a disk. This compression algorithm deteriorates the image a little more each time the file is "saved." This property of a .JPG is called lossy. Again, this means that the image suffers some loss of quality or distortion each time it's saved.
• Most graphics editors allow you to control the trade off between compression and quality.
• .JPG's cannot be made transparent. Transparency is a feature of GIF's and is discussed below.

As a general rule, a complex image with many colors will be smaller as a JPG than a GIF file.
So if you are presenting or working with a photograph, the JPG format is usually the way to go.

What can I do to make my JPG images load faster?
Take a close look at the two identical pictures below. You can see that they are very detailed and colorful. Are you sure they are really the same?

Don't start playing Where's Waldo! The difference between the two pictures is that the one on the left contains about 27,000 distinct colors and the one on the right only 256. The file on the left is 34,000 bytes and the one on the right about 17,000. This means that the picture on the right will load twice as fast as the picture on the left. The difference in quality is very hard to detect, but you just saved your reader some time when it's loaded in a web page.

It is important that when you reduce colors that you do not use dithering. Dithering can actually wind up increasing the size of your picture file.

Another trick is to reduce the size of your image, not with the HEIGHT/WIDTH attributes of HTML, but with your graphics editor. Be careful of distortion and color loss.

You can also present what are referred to as thumbnail images. These are tiny pictures representing the full size ones. You then make a hyperlink on the small image to the larger image that the viewer can click on if they want to see the larger image. This way you give your reader a choice as to whether they want to see the big picture. (pun intended)

Why can't I use JPG for everything?
In the example below are two images. The one on the left is a JPG and the one on the right is a GIF. If you look closely you will see that there is a substantial amount of distortion in the JPG image. The GIF image is crystal clear and quite attractive.

But wait, there's more! The JPG picture is almost three times the size of the GIF. 6,000 bytes vs 2,000 for the GIF. Why?

As mentioned earlier, JPG is good for compressing complex, detailed pictures. It is also lossy which means that some details are lost when the image is compressed. In the case of simple graphics, the JPG format is obviously the wrong choice.

What is a GIF Image?
The GIF format is another form of image compression. There are two GIF standards, the one we are working with is called 89a. As you can see from our last example in our JPG discussion, it is great for simple graphics. It also has the following features, and limitations:

• The image can contain up to 256 colors and no more.
• You can reduce image size by using less colors.
• One color can be selected to be the background color which allows the underlying page color to show through. This is called transparency.
• You can also create an effect called interlace where the image is drawn on your screen as a blur that gradually comes into focus as the image loads.
• The process is lossless. The image suffers no loss of quality when compressed with "subsequent "saves."
• When created with an animation editor, multiple GIF images can be put together like a set of cartoon cells, allowing for simple moving pictures.

When should I use a GIF Image?
It should be evident that the GIF format is completely different from the JPG. And, as with any tool, picking the right one for the job at hand makes all the difference. GIF is the ideal choice of format in the following situations:

• Nice, bold page banners.
• Simple icons, especially arrows and such.
• When you want a transparent background.
• If you need animation.

What is this transparent background you keep mentioning?
The GIF-89a standard allows you to pick one color that for practical means, is invisible to the browser and allows the underlying color or image to show through.

Then two images above are in fact identical, except for one minor detail. The image on the left was created telling the graphics editor to make the background color black. The image on the right has its background color set to "transparent." Our obedient browser is displaying the images . . . just as intended.

Return to Top

Return to our Master Menu