E-mail this pageWeb Graphics: Some Theory
Web pages can often become more compelling through the use of a stylistically consistent set of icons and images. This happens, most obviously, when there is an immediate connection between the image at hand and the subject matter, but even when the relationship is a little bit tenuous, the inclusion of images often gives your site's visitors a point of association: your site's content becomes more memorable when it can be associated with a visual element.
The most common formats for web images are currently GIF (Compuserve's Graphics Interchange Format) and JPG (or JPEG, Joint Photographic Experts Group image format). On the horizon is the PNG format (Portable Network Graphics), and while this is a promising new contender, you should use it cautiously until you can be confident that most browsers used by your site's visitors are able to handle it--at the moment, only the more recent Internet Explorer and Netscape versions can contend with the PNG format.
A little bit on compression
The big difference in the varying formats lie in color depth, compression ratios, and image degradation. Ideally, you'll want the pictures you put on your web site to be as small as possible without sacrificing image quality along the way. In GIF files, compression is done using an algorithm that replaces multiple identical pixel patterns with a single code: for instance, take the following sentence:
"...who do you, what do you, why do you do?"
If I were to emulate a GIF compression mechanism on this excerpt from "Clowntime Is Over," I'd isolate the following patterns and assign a single value to each of them:
wh = 1
do = 2
you = 3
I'd then reassemble the sentence in its compressed form as follows,
"...1o 2 3, 1at 2 3, 1y 2 3 2?"
The compressed sentence has 31 characters. The uncompressed sentence has 44. On the much larger scale of an entire graphic image (or an entire file, for that matter) the GIF compression mechanism (a LZW algorithm, if you're keeping score), allows a substantially greater compression rate than my example demonstrates. The example serves to illustrate, nonetheless, not only how the GIF format compresses files, but notably that the GIF compression algorithm is lossless. When the file is decompressed, no information is lost that was part of the original. The only limitation is that the GIF format doesn't support more than 256 colors.
For images with 256 colors or fewer, your best bet is likely to be GIF files, as you'll get reasonably high compression without sacrificing image fidelity.
For true color images (images with a color depth that ranges up to 16 million colors), you're best served by the JPG format. The JPG compression works in a slightly different way, compressing its materials in part through the mechanism of tossing out details that it deems insignificant to the eye--differences in a color's tone are deemed less visible than differences in a color's brightness, so the former differences are smoothed out to allow for a greater rate of compression. JPG compression invariably involves a slight sacrifice of image quality, but that sacrifice isn't invariably a visible one. Here, if we were to use a text-based example, you might think of the distinctions within the following pairs, considering, however, that these examples over-state the amount of deterioration involved in JPG algorithms:
though tho
enough enuf
distraught distrot
You can make sense of the right-hand spellings, and, from a loosely phonetic perspective, the right-hand words are identical to the ones on the left. But they're between 40 and 50% more economical in their compressed form. Something's lost on the way, but it's something that we sense only when we examine the spellings and not when we hear the sounds. In a nutshell, this is what JPG compression does. It removes something that, under ordinary circumstances, we won't miss.
So there are your two big options, lovingly explained with absurd examples. All clear? Below you'll see some representations of what these compression algorithms actually do to pictures.
Picture Types and File Size Examples
The example images (of a still of a relatively uninspiring clay pyramid) all began as a native Windows BMP file with a color depth of 16 million colors. The original BMP image is 284X192 pixels in diameter, has a file size of 160K, and contains 1195 distinct colors. Since the number of colors and the level of detail in the image is relatively low, you'll find that the GIF format is likely to offer a better compression rate than the JPG.
Original bitmap - 160K - Color depth of 16million colors. Actual colors used is 1195.
GIF - 5 K - 256 Colors
JPG - 18 K - 16million color depth
Looping Animated GIF (15 frames) - 78K
Lest you believe, though, that the GIF format is invariably more economical than the JPG, have a look at the following two (rather large) images. As soon as the color depth in an image increases and as soon as the image begins to have a broader tonal depth, the JPG file proves to be substantially smaller. The first of the images below, a GIF file, weighs in at a whopping 133K. The second, a JPG file, is tiny by comparison, having a file size of only 19K.
GIF File - 133K file size
JPG file (at 19K, it's about 1/7th the size of the GIF file):
Bottom line: try saving your files as both JPG and GIF files, and then decide which has the combination of fidelity and size that best suits the web page you're building. Building a web page that loads quickly is a goal you should always keep in mind.
Comments or questions? Please contact Dr. Peter Friesen , Instructional Technology Coordinator, Plattsburgh State University.