Fast Loading Images

Why this is not a tutorial on how to draw.

I am a terrible artist. My wife won't even let me play with the kid's crayons. I am not very mechanically inclined, and owe much of my success and longevity to date to avoiding using power tools and limiting my auto repair work to filling the gas tank.

Aware of my weakness, I take advantage of public domain images that meet my needs, or modify them 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 am sure as you have been working on your pages you have been using graphics for one or more of the following reasons:

• To illustrate the subject being discussed on the page.

• To liven things up from an artistic standpoint.

• To have them because everyone else seems to.

As you have been out either harvesting artwork or creating your own, I am certain that you have run across two different types of image files: the GIF and the JPG. (actually, JPG's real name is JPEG, but since the files are normally named 'JPG', we will call it JPG for short!) Now that we know we are not talking about peanut butter, let's 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 are:

• Can have up to 16.7 Million colors in an image.

• Uses a method of compression (squishing) that is called lossy. This means that the image suffers some loss of quality or distortion.

• Most graphics editors allow you to control the trade off between compression and quality.

• Most of the time the controls in the graphics editors that control the trade-offs make no sense to anyone!

• Cannot be made transparent. This is a feature that GIF offers and will be discussed later on.

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 a photograph, JPG 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.

It is important that when you reduce colors that you do not use dithering. The process 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 the small image a link that if selected will then display 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?

I 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 I 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.

• Can also create an effect called interlace where the image is drawn as a blur that comes into focus as the image loads.

• The process is lossless. The image suffers no loss of quality when compressed.

• When created with an animation editor, multiple GIF images can be put together like a set of cartoon cels, allowing for simple moving pictures.

When should I use a GIF Image?

It is very evident that the GIF format is completely different from JPG. As with any tool, picking the right one for the job at hand. 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 I created telling the graphics editor to make the background color purple (which is not a color I used). The image on the right has its background color set to black. Our obedient browser is displaying the images just as I intended.