By Professor Nibble ã Nibble University 2000-2007

HyperJump to Types of Graphics , File Names, Transparency , Animated GIFs, Interlacing, Reducing File Size , Be A Pirate , Assignments

INTRODUCTION TO GRAPHICS - Lesson 6

There is a lot of information you need to know about graphics before I teach you the tag required to load an image. Read the following carefully and do your best to let all the information sink in!

TYPES OF GRAPHICS FILES

GIF, JPEG, and PNG

I have read that PNG files are becoming more and more popular, but the author of that book must be talking about web pages in Botswana. I have never seen a PNG file. So, until I need too, I'm shelving PNG's for another time.

Graphics files are saved in different ways to take advantage of file compression - to make the file as small as possible so it will take up less space and load to your browser faster. When files are compressed, the various types of files also handle the colors in the graphic differently. If you're interested in details, find a web site that gives you the nitty gritty, or buy a good book on graphics.

Basically, I go by this rule of thumb - save a graphic, like clip art, or one that doesn't have many different colors, in GIF format. Those graphics that have distinct changes in color from one part of the image to another are great candidates for GIF file compression. Photos, or images that have gradual color changes from one part of the image to another, are best saved in JPEG format. Usually it comes down to - save photos as JPEG and clip art as GIF.

CLIP ART -> GIF

top

FILE NAMES

Now that the gap between PC and MAC operating systems is not as wide, naming files for either system is pretty similar. On PC computers, files have a three-letter extension following the name and separated by a period. In the dark ages, files could only have a name of 8 letters and a 3-letter file extension. Most people are using later versions of the Windows operating system that allow long file names like the MAC. However, there are still systems out there that need file names of 8 or less characters, so I try to keep my file names short and use no spaces in the name. For us PC users, the file name extension for a GIF is .gif and for JPEG is .jpg.

THIS IS IMPORTANT!

Remember when I said that html tags could be in all caps, all lower case, or any combination of the two? Graphic file names are case sensitive. If you write the file name differently from the way it is saved on the hard drive, chances are the image will not load. Look at these file names - none of them are the same.

IMAGE.GIF image.gif Image.GIF Image.gif

My recommendation is to make every letter in all filenames lower case, so you can enter your html code filenames in lower case and never worry about the problem. If you grab a graphic from the Internet that has a filename that is not in lower case letters, rename it before you use it. For instance - change Image.JPG to image.jpg.

 top

TRANSPARENCY

First, GIFs can have transparent colors. JPGs cannot.

The following image has a white background. You can see exactly how large the graphic is, but it doesn't look real great against this black background, does it? Notice it is perfect for GIF. It only has 4 colors - white, light green, black and red. Also, the colors do not have gradual blends from one color to another. The light green goes right to white, black and red with no transition. If I were an artist I'd give you a fancy term for this, but I'm just a computer nerd.

If my background were white, things would look quite different.

I'm not going to teach you how to make colors transparent right now, but later in this tutorial I will. There are many graphics programs available that allow you to re-size, flip, convert from one format to another, make colors transparent, and on and on. In order to make a color we don't want to be seen invisible or transparent, we need to select the color and perform a little magic on it. Once this is done, it doesn't matter what color or pattern you have for a background. The background will show through the transparent color. I'm sure you've used a computer paint program to color a simple picture. What you're doing here is like painting with the color "clear". The ditzy way of getting the same affect is to change your background color like I did above. This will fool the viewers for the moment, but as soon as the image is placed on a different color background you'll be faced with the blocky image look that you see in the first image.

Here is our little dino friend after I make the color white invisible. Notice his white teeth are not invisible. I had to play a little trick to work that out, but you'll learn that in the lesson on making images transparent. His little paws are black, so they don't show up.

It doesn't matter what color the background is now that I've made the image file transparent. We don't get that ugly white block look.

top

ANIMATED GRAPHICS

It has been said that GIFs are fun and JPEGs are beautiful. I don't know who said this. I guess it was me. Remember, I just said that GIFs can have transparent color, but JPEGs cannot? Well, here we go again - GIFs can be animated, but JPEGs cannot. 

GIFs have been around for a while. When they first came out animation was not possible. Later the GIF89a format was created that allows animation. In some graphics programs you find yourself faced with saving your image as a GIF or GIF89a. Choose the one that allows animation - GIF89a. Most of the newer graphics programs just say GIF, but they will actually be using the newer GIF89a format.

Now that we have that bit of trivia out of the way, let me tell you how an animated GIF works. There is special software that allows you to make animated GIFs. What you actually do is create a mini cartoon. To show an animation of a student sitting at his desk raising his hand, you would draw a series of pictures. The first picture would be the kid sitting there. The second one would show him with his hand starting to be raised. The third picture would have his hand even higher until the final picture drawn shows the student with his hand all the way up. The number of pictures and the degree of change from one to the other and the frames per second will distinguish how jerky or smooth the animation is. The animated GIF program saves all the pictures into one file, so it looks no different than any other GIF until it is viewed in a browser.

Those of you who have used Word to make a web page know that the animated GIF doesn't move until it is viewed from a browser or other program that recognizes the GIF89a format. You place animated GIFs on your web page just like any other image. Keep in mind they are often larger in file size than other GIFs because they are actually several images compressed into one file. The larger the file size the longer it takes for the graphic to be loaded into the browser.

top

INTERLACED AND PROGRESSIVE GRAPHICS

If you have a fairly large image to be loaded on your web page, it may take several seconds for a browser to load it. If the viewer has to wait too long, he/she will get impatient and possibly leave your page. To help prevent this, use Interlaced or Progressive graphics whenever possible. GIFs are Interlaced and JPEGs are Progressive, but it means the same thing to the viewer. Let's talk about Interlaced Graphics and you can just remember I'm talking about Progressive Graphics as well.

When you are viewing an image in a graphics program (we will be using Irfan View for these lessons), and you click on SAVE AS, you will see an OPTION box. Click on the option box and you will have an opportunity to check a box to save as Interlaced or Progressive - depending on the type of file. Other good graphics programs will give you the option of checking a box to save the image in this way.

top

FILE SIZE

If you have a large picture, but you don't need the whole thing to create the affect you are after, you can crop the part you want and throw away the rest.

Another thing you can do is decrease the dimensions of the whole image. You use a graphics program to do this and re-save the file with its new dimensions. We'll be doing this later. Some people get fooled by file size. They think they're doing something really intelligent, but they certainly won't get the last laugh. What is he talking about? OK. Those of you who have inserted a graphic into a WORD web page and decreased the size of the graphic by dragging in the corners, are not really decreasing the size of the file. You are only decreasing the viewing size. Now, we will be using HTML tags to place our images on our page. When you learn how to do this, you will see that often two numbers are displayed about the graphic - width and height. If you decrease each of these numbers, you will decrease the file size, right? No Way! You only decrease the viewing size. The graphic will take the same amount of time to load regardless of the viewing size you choose. To speed up loading, YOU MUST DECREASE THE PHYSICAL FILE SIZE in a graphic program and re-save the image with its new dimensions.

The third way to speed up the loading of a graphic is to reduce the colors. You need a graphic program for this as well. If the file is saved at 256 color quality and only has a few colors, you may be able to re-save the image with a color depth of 16 with no loss of quality and a great saving on file size. We'll play around with this later, too.

If you have several photos to put on your web page, think about making thumbprints for each photo. A thumbprint is a mini picture that has its longest dimension (width or height) at 100 or less pixels. Thumbprints are easy to create in Irfan View, the Graphics Program we will be using for this tutorial. It won't take long for several thumbprints to load on a single page. Then, you put one regular size photo on a single page, and give the viewer the option of which regular size photos he/she wants to see. You make each thumbprint a link to the full size picture.

top

HOW TO BE A GRAPHICS PIRATE!

Remember the above information. In the next lesson I will teach you how to use the image tag.

top

Table of Contents

Lesson 7