Site Map
Your Current Location is in Yellow
Graphics
Graphics
Many people discover, to their dismay, that the nifty photos, animated gifs, cartoons, buttons, etc. they have placed on their page take a very long time to load. Many do not discover this until a friend visits the page and points it out, because the page “loads fine for me.” Actually, what is loading at a brisk clip is the cached version of the page, so the creator is getting in a few moments (from his own hard drive) what will take 15 or 20 minutes to load over the phone line.
Now, some web page creators, when confronted with this fact, will simply take the attitude that “this is great art, and people will just have to wait.” News Flash! They won’t.
So what do you do? How do you get graphics without the long wait? The answer is: know your craft, apply your knowledge, create in your head before you put it on the page. At least have a rough idea of what you want to do.
A page consisting of 16 poses of your goldfish accompanied by brief “cute” captions is not likely to capture the hearts and minds of your visitors. Use graphics sparingly. Make those bytes count!
Another consideration: animated gifs are generally cool the first time you see them, and mildly irritating thereafter. A good animated gif can be a lot of fun even after the first viewing. But a dozen animations on a site more likely will only make the visitor dizzy. Use animations sparingly or not at all. By the way, this also applies to Java gewgaws. I've seen pages that consisted only of a title and three or four of those undulating water reflection things. Booorrrring!
Actually, what I said in the last two paragraphs points out from another perspective the biggest challenge to writing a good webpage: creating content. Sometimes that requires research, sometimes it requires real writing skill. But the content is what makes a page worth visiting.
Now, how to tame those graphics files? It depends on the graphic. The file size of any graphic can be reduced by simply reducing its physical size. On web pages, a rule of thumb is that 72 pixels will be about one inch of screen space on average — this will vary by screen size and resolution. I point this out because while a photo with a 1200 dpi resolution may look great on paper, it will be way too large for most web pages, and the file size will likewise be way too large — unnecessarily. Those 72 pixels will always be the same width on the screen, so a higher resolution graphic (more dots or pixels per inch) will simply take more space on the screen. When scanning or sizing your graphics, think in terms of pixels. For example, if you want the picture to cover half the width of the screen, use about 400 px for the width. You can also reduce the size of a graphic by trimming away unnecessary background. You can often reduce the file size of a graphic by 40K by simply doing some judicious cropping. These comments are not meant as a thorough tutorial on resizing graphics, but simply as starting points for you to explore as you experiment with resizing your graphics and taming them for use on your web page.
- Animated GIF
- Usually, you find these on somebody’s site and, ummmm . . . acquire them. These borrowed gifs will likely be about as efficient as they are going to get. If you make your own animations, or if you want to edit one you have downloaded, you will need an animation editor, because you will have to edit the graphic of each frame, then stick it all back together. For those of you who don't know, an animated gif is a set of still graphics (frames) combined with a set of controls (playing instructions) that are executed by the browser.
- GIF
- A gif has a maximum color depth of 255 colors. That may seem like a lot, but many photos will look truly awful in this format. GIF format is best used for black and white photos, color or black and white cartoons, buttons, or drawings. If you want a transparent background, you must use the GIF format. You can often reduce the file size of gifs by reducing the color depth. For example, if you have a button that uses a dozen colors (that's a colorful button), you can reduce the color depth to 16 without affecting the appearance of the graphic at all. Many people suggest using the JPEG format for background images, but I have found that most background graphics can easily be reduced to 16 colors without affecting the quality, but still make the file size much smaller than the JEPG version (but see the comments below on JPEG Cruncher).
To reduce the color depth without affecting the look of the graphic: in your graphics editor, open the graphic file, then choose “reduce colors” or something similar from the appropriate menu. Choose 16 colors, and if you have the choice, pick the “Optimal Palette” or some similar term. You want to use a palette that most closely represents the colors in the original graphic. Avoid “Default Palette” or dithering. By the way, if your graphic is a black and white line drawing, reduce the color depth to mono — black and white. I should mention that other savings are possible in further color reductions, but that is accomplished by customizing the color palette by hand. If you know how to do that, and it is appropriate — for example, your graphic has only four colors — by all means reduce the colors as far as you can. In a 16 color palette, one of your “four” colors would be copied to all unused color blocks on the palette, so that you have only four colors in use.
- JPG or JPEG
- This is usually the best format for color photographs or color-intense graphics. JPG graphics use the full spectrum available (over 6.5 million colors). The color depth cannot be reduced in JPG files. However, a good graphics program will allow you to vary the quality or compression of the jpg graphic. When optimizing your jpg images, experiment till you find the most acceptable balance between file size and picture quality. While a high-definition photo that takes 20 minutes to load is unacceptable, the graphic that loads in 5 seconds, but makes your favorite person (or animal) look like raw hamburger is not what you want either. You can often cut the file size in half without any perceived loss of quality. The degree to which you can successfully compress the file without sacrificing quality depends in some measure on the background. A dark, non-descript background in a photo can easily be compressed. On the other hand, a graphic that makes use of every speck of space will likely look pretty rough if you reduce it more than a tiny bit. Again, don't forget to crop the picture or resize whenever possible.
If you lack the patience or the experience to reduce your graphics, you could try the graphics editors available online. Some charge fees, others will give you a free trial, and still others will do it all free. I personally prefer GIFCruncher (and the associated JpgCruncher). If you want to see the difference between the original and reduced versions of a photo, look at this example.
Here are some of the better known sites:
Graphics Optimizers
- GIF Optimizer
- GIF Wizard
- GIF Cruncher and JPEG Cruncher
Graphics Editors — free trial or shareware
- MGI PhotoSuite (good utility editor)—select PhotoSuite, PhotoSuite SE, Demo in the three boxes
- PaintShop Pro (best for buttons, seamless backgrounds, hand-made graphics)
- GIF Construction Set (easy animation, banners)
[Note: If you are having no-show graphics problems, see the HTML FAQ]
Copyright © 1999 Carlton Higginbotham, Meade Street Productions.
No part of this site, including graphics and text, may be reproduced without
written permission. Please post questions and comments on the
Forum
Last updated GMT
