You Don't Have to be a Computer Genius to... Use a GIF versus a JPEG!!!

Previous Article<<< Next Article>>>

So, you were just getting comfortable using acronyms such as AOL amd WWW. Even HTTP and HTML roll right off the tongue. Think you've really mastered the computer lingo? I thought I had until I decided to create my own webpage. I had to wade through a litany of new terms, such as...FTP, CGI, ASP, XML, SMTP and POP. Just when I thought I'd conquered them all, I realized it was just the beginning. If you really want your website to look professional you have to learn how to use images and if you want to use images you have to understand GIFs and JPEGs. I broke out my Photoshop5.5. and do you know what I discovered?...YOU DON'T HAVE TO BE A COMPUTER GENIUS TO...Use a GIF versus a JPEG!!!

Summary:

The cardinal rule of web design is to make sure your web pages download quickly. A fast, basic website will win hands-down over a slow, beautiful website every time. Images are often to blame for slow downloads. Before using an image or several images on a page, you will need to "compress" the images so they take up as little file size as possible. In fact, your whole web page, including images should probably not exceed 40k (kilobytes). Two universally used Internet Graphics formats are GIF and JPEG. There are differences between the two worth learning.

GIF: GIF stands for Graphics Interchange Format, and is pronounced with a hard "g" as in "gh-i-f" (though some people pronounce it with a soft "g" as in "j-i-f." That distinction could warrant an article of its own!) A GIF is a "lossless" format which means the program that creates a GIF compresses the original image so that it does not lose any data. A GIF uses a simple substitution method of compression, which, to mere mortals, means that a flat colored image (with lots of repetition) will compress better than a more complex, non-repetitive image. The bottom line is that large areas of pixels that are all exactly the same color are compressed very efficiently by GIF.

JPEG: JPEG stands for Joint Photographic Experts Group, the original name of the committee that wrote the standard, and is pronounced "jay-peg." JPEG is a "lossy" format which means that the decompressed image isn't quite the same as the original. Basically, a JPEG saves space by throwing away parts of the image. A JPEG achieves much greater compression than is possible with "lossless" methods like a GIF. JPEG is designed to be read by the inexact human eye. Thus, JPEG is intended for compressing images that will be looked at by humans, not machines. Small errors introduced by JPEG are virtually undetectable by the naked eye. NOTE: The human eye is more sensitive to brightness (gray scale data) variations than to hue variations. JPEGs can compress the hue variations more.

The degree of "lossiness" can be varied by adjusting compression parameters. This means that you can trade off file size for image quality. You can make "extremely" small files if you don't mind poor quality and conversely, if you aren't happy with the output quality, you can lessen the compression settings to increase the output quality.

When to Use GIF Format

1. Use a GIF: Use a GIF when you have an image with only a few distinct colors. That is, flat color objects and natural images.
   
   
2. Examples: Lettering or text images, simple cartoons, logos, icons with few colors, or line drawings.
   
   
3. When GIFs Are Better: It takes less time to decode and view a GIf image. GIFS compress large areas of pixels that are exactly the same color more efficiently than a JPEG can and also without introducing visible defects. GIFS are better than JPEGs when it comes to very sharp edges, i.e., a row of pure-black pixels next to a row of pure-white pixels. Always use a GIF with plain black and white images.

When to Use JPEG Format

1. Use a JPEG: Use a JPEG to make your image files smaller and to store 24-bits/pixel instead of 8-bits/pixel. Use a JPEG when you have natural, complex images. JPEG is designed for compressing either full-color or gray-scale images of natural, real-world scenes.
   
   
2. Examples: Scanned photographs and artwork.
   
   
3. When JPEGs Are Better: JPEGs will represent highlighted or shaded areas better than GIF. JPEGs can easily provide compression of full color (i.e., 24-bit/pixel or 16 million colors) data in a ration of 10:1 to 20:1 without visible loss bringing the storage requirement down to 1 to 2 bits/pixel. Compressions of up to 100:1 are feasible with small to moderate defects. A GIF can only compress at about 2:1 to 3:1. For example, when a JPEG file is made from a full color photo, the JPEG will typically be a factor of four or five times smaller than a GIF file made from the same photo. NOTE: Gray scale does not compress by such large factors.

1. GIF Problems:There are problems with GIFs. One is that they are limited to a palette of 256 colors versus a JPEG's inherent 16 million colors. That means GIFS are not able to handle variations in color. GIF can only store 8-bits/pixel whick is OK for inexpensive PC monitors which can't display more than 256 colors at once, but not good for more sophisticated hardware.
   
   
2. JPEG Problems: The lossy compression method can generate unwanted effects such as false color and blockiness if not used correctly. A JPEG is always 24-bit color so on a monitor that is not 24-bit color the image will be "dithered" (i.e., made to conform to 8-bit) by the browser. It takes longer to decode and view a JPEG so you give up some time in order to store or transmit an image using less space or "k" (kilobytes.) JPEG images cannot be animated and, finally, a JPEG does not allow transparency.
   
   
   
   

Copyright © 2000-2001 Marlene Hollander.  All rights reserved.