Bringing Your Images to the World
The World Wide Web offers unparalleled access to visual information. Never before could one so easily and inexpensively bring pictures, color, beauty and information to the 25 million other people.
Let us focus on one part of that equation, creating and adapting your visual message to this medium. There are a lot of ways to make your images stand out in this crowd and there are very good inexpensive programs to work with. As this will be a continuing series let me introduce you to some basic concepts and techniques. You needn't run right out and use the information tomorrow. Do follow along though, I promise you a clearer understanding of what you are looking at when surfing the web and an improved grasp of what will work best for your situation.
File format .gif or .jpeg?
At this point there are two types of images that are fully supported by web browsers, gifs and jpegs. What is the difference? Both are methods of storing and compacting the visual information of a picture or a photograph. The compacting part is important for web usage because there will always be a compromise between file size (equates to download time) and quality of the image. Without going technical use this as a rule of thumb. If you have a photograph it should be saved as a .jpeg image. If you have a drawing, logo or clip art type of image it should probably be a .gif.
Let's compare the two.
Below is a photograph of a snowy
egret saved as a .jpeg at different quality/compression levels. The key is that
it is an image with millions of tiny color variations and .jpegs support that
well. That is pronounced JAY-peg by the way. All those fine distinctions
between the whites and grays of the feathers, different shades of green in the
background should say .jpeg to you immediately.
Now note the file sizes. The first, best quality image is 18k, with file sizes reduced from 5k to 2k as the compression is increased. Note the major drop with just 30% compression. This illustrates the value of .jpeg compression. For screen viewing the second image would often be just fine. Some situations require a very high quality image and your viewers will wait. In another example a quick and dirty very compressed file might convey the information sufficiently. The faster download may be an acceptable trade off. Do remember that as the designer of your pages this is your option. Just be reasonable, nobody wants to sit around looking at plain text or a blank screen waiting for a 60k image to download. A good reference is to keep the entire page, all images and .html within about 30k to 40k.
 |
 |
 |
 |
| 18k image no compression |
5k image 30% compression |
3k image 60% compression |
2k image 90% compression |
| Quick Tip Always use height and width tags in your img src tags. This will allow your pages to format and the text to be placed while the image is still downloading. I am much happier with something to read while waiting for images. |
Onto .gifs, below is a simple birthday design. This image combines lines, type and flat areas of a single color. Gifs work best here, pronounced with hard or soft G - your choice. Gifs use only 2 to 256 different colors and the files get smaller as you reduce the number of colors and when there are large areas of single colors. The first image uses the full palette of 256 colors. Next, reduced to 16 colors and finally to the smallest file 2 colors black and white. Again, quality variations vs. download times.
 |
 |
 |
| 7k image 256 colors |
3k image 16 colors |
2k image 2 color image |
You can also choose an adaptive palette with .gifs or a standardized palette. The adaptive palette uses the best combination of 256 colors needed to reproduce the image. A standardized palette uses a selection of colors supported by Mac and PC monitors that can only display 256 colors. Using the standardized palette will allow you to best control the results to every viewer. An adaptive palette will allow finer color distinctions and specific color choices. Below is a logo saved in two different palettes. The top is an adaptive palette, using 256 colors that best create the image. The bottom uses a standardized palette. The standardized palette only chooses from the limited 256 colors and in this example it only used 24 colors to reproduce the logo. The other 200+ colors were not suitable. Hmmmm some color shifts here. Yes, the top is better looking - but look at the file sizes, since the standardized file is only using 24 colors it is 12k smaller. A difficult decision.
 |
| 22k image, adaptive palette 256 colors |
 |
| 10k image standardized palette using 24 of 256 colors |
| Quick Tip Different computer monitors display a different number of colors. For the best quality on and off the web set your monitor to the highest number of colors supported. Most PC and Mac monitors purchased in the last few years will display 16 million colors. Beware though, they often come configured at 256! Take a visit to your control panel to check and make the change to true color or high color. You'll be amazed at the difference. |
Just for the fun of it here is a the same flat color image that should be a .jpeg saved as a .gif and the photo that should be a .jpeg saved as a .gif. Do you see the problems here? This is what makes the WWW so great - just being able to show you the "don't" images has probably gone farther in explanation than all my words above. Do use to learn how to use and convey the visual portion of your message to the world. This very visible portion of the quotient is what will make your pages both shine and produce.
 |
 |
| 7k .gif image using 256 color standardized palette |
5k .jpg image the the quality is poor |
Paint Shop Pro is a product produced by Jasc Inc. You can download it for a free thirty day demo from their web site and it sells for about $69. For the price, this program cannot be beat. It has been well designed and works easily with web images and there are a number of books available for more information. Photoshop is the ultimate tool, the price of admission and learning curve are much steeper.
More Information
The best discussion of designing web graphics is by Lynda Weiman, coincidentally she is the author of many books about Designing Web Graphics from New Riders Press. Do visit www.lynda.com and spend some time. In particular she has a great deal of information and examples of different file formats and the best discussion of palettes available. Also visit my Virtual Tour with links to many great web design tools and resources.
www.gemlake.com
all contents copyright ©1995-2000
Gem Lake Design & Amelia Spruill
amelia@gemlake.com
Annapolis, Maryland, USA
