Use these to jump around or read it all…
[Image or Graphic?]
[44 Different Graphic Formats?]
[Raster Image Formats]
[Pixels and the Web]
[Meta/Vector Image Formats]
[What’s A Bitmap?]
[Compression]
[The GIF Image Formats]
[JPEG Image Formats]
[Reader’s Image Questions]
I did something yesterday that was very unlike a computer professional. I actually took the time to read the back of the box that contained my new PaintShop Pro version 5.0 graphics program. Toward the bottom, the box proclaimed the program supported 44 different image formats. Wow!
On the Net, luckily, we really only have to deal with three main types of images: CompuServe GIF, JPEG, and Bitmaps. At the moment, those are the only three that are roundly supported by the major browsers. But what’s the difference between them? What does it mean if a GIF is interlaced or non-interlaced? Is a JPEG progressive because it enjoys art deco? Does a Bitmap actually offer directions somewhere? And the most often asked question:
I’ve been meaning to write this tutorial for a while. I offer it as a catch-all answer to the many questions I get about images and their use.
Image or Graphic?
Technically, neither. If you really want to be strict, computer pictures are files, the same way WORD documents or solitaire games are files. They’re all a bunch of ones and zeros all in a row. But we do have to communicate with one another so let’s decide.
Image. We’ll use “image”. That seems to cover a wide enough topic range.
I went to my reference books and there I found that “graphic” is more of an adjective, as in “graphic format.” You see, we denote images on the Internet by their graphic format. GIF is not the name of the image. GIF is the compression factors used to create the raster format set up by CompuServe. (More on that in a moment).
So, they’re all images unless you’re talking about something specific.
44 Different Graphic Formats?
It does seem like a big number, doesn’t it? In reality, there are not 44 different graphic format names. Many of the 44 are different versions under the same compression umbrella, interlaced and non-interlaced GIF, for example.
Before getting into where we get all 44, and there are more than that even, let me back-peddle for a moment.
There actually are only two basic methods for a computer to render, or store and display, an image. When you save an image in a specific format you are creating either a raster or meta/vector graphic format. Here’s the lowdown:
Raster
Raster image formats (RIFs) should be the most familiar to Internet users. A Raster format breaks the image into a series of colored dots called pixels. The number of ones and zeros (bits) used to create each pixel denotes the depth of color you can put into your images.
If your pixel is denoted with only one bit-per-pixel then that pixel must be black or white. Why? Because that pixel can only be a one or a zero, on or off, black or white.
Bump that up to 4 bits-per-pixel and you’re able to set that colored dot to one of 16 colors. If you go even higher to 8 bits-per-pixel, you can save that colored dot at up to 256 different colors.
Does that number, 256 sound familiar to anyone? That’s the upper color level of a GIF image. Sure, you can go with less than 256 colors, but you cannot have over 256.
That’s why a GIF image doesn’t work overly well for photographs and larger images. There are a whole lot more than 256 colors in the world. Images can carry millions. But if you want smaller icon images, GIFs are the way to go.
Raster image formats can also save at 16, 24, and 32 bits-per-pixel. At the two highest levels, the pixels themselves can carry up to 16,777,216 different colors. The image looks great! Bitmaps saved at 24 bits-per-pixel are great quality images, but of course they also run about a megabyte per picture. There’s always a trade-off, isn’t there?
The three main Internet formats, GIF, JPEG, and Bitmap, are all Raster formats.
Some other Raster formats include the following:
CLP | Windows Clipart |
DCX | ZOFT Paintbrush |
DIB | OS/2 Warp format |
FPX | Kodak’s FlashPic |
IMG | GEM Paint format |
JIF | JPEG Related Image format |
MAC | MacPaint |
MSP | MacPaint New Version |
PCT | Macintosh PICT format |
PCX | ZSoft Paintbrush |
PPM | Portable Pixel Map (UNIX) |
PSP | Paint Shop Pro format |
RAW | Unencoded image format |
RLE | Run-Length Encoding (Used to lower image bit rates) |
TIFF | Aldus Corporation format |
WPG | WordPerfect image format |
Pixels and the Web
Since I brought up pixels, I thought now might be a pretty good time to talk about pixels and the Web. How much is too much? How many is too few?
There is a delicate balance between the crispness of a picture and the number of pixels needed to display it. Let’s say you have two images, each
is 5 inches across and 3 inches down. One uses 300 pixels to span that five inches, the other uses 1500. Obviously, the one with 1500 uses smaller pixels. It is also the one that offers a more crisp, detailed look. The more pixels, the more detailed the image will be. Of course, the more pixels the more bytes the image will take up.
So, how much is enough? That depends on whom you are speaking to, and right now you’re speaking to me. I always go with 100 pixels per inch. That creates a ten-thousand pixel square inch. I’ve found that allows for a pretty crisp image without going overboard on the bytes. It also allows some leeway to increase or decrease the size of the image and not mess it up too much.
The lowest I’d go is 72 pixels per inch, the agreed upon low end of the image scale. In terms of pixels per square inch, it’s a whale of a drop to 5184. Try that. See if you like it, but I think you’ll find that lower definition monitors really play havoc with the image.
Meta/Vector Image Formats
You may not have heard of this type of image formatting, not that you had heard of Raster, either. This formatting falls into a lot of proprietary formats,
formats made for specific programs. CorelDraw (CDR), Hewlett-Packard Graphics Language (HGL), and Windows Metafiles (EMF) are a few examples.
Where the Meta/Vector formats have it over Raster is that they are more than a simple grid of colored dots. They’re actual vectors of data stored in mathematical formats rather than bits of colored dots. This allows for a strange shaping of colors and images that can be perfectly cropped on an arc. A squared-off map of dots cannot produce that arc as well. In addition, since the information is encoded in vectors, Meta/Vector image formats can be blown up or down (a property known as “scalability”) without looking jagged or crowded (a property known as “pixelating”).
So that I do not receive e-mail from those in the computer image know, there is a difference in Meta and Vector formats. Vector formats can contain only vector data whereas Meta files, as is implied by the name, can contain multiple formats. This means there can be a lovely Bitmap plopped right in the middle of your Windows Meta file. You’ll never know or see the difference but, there it is. I’m just trying to keep everybody happy.
The following sections offer examples of the image formats discussed here. The images are all from my wife’s and my trip to Turkey in the summer of 1998. It was a wonderful time in a wonderful country.
The images are large on purpose to show the effects of the format. |
What’s A Bitmap?
I get that question a lot. Usually it’s followed with “How come it only works on Microsoft Internet Explorer?” The second question’s the easiest. Microsoft invented the Bitmap format. It would only make sense they would include it in their browser. Every time you boot up your PC, the majority of the images used in the process and on the desktop are Bitmaps.
If you’re using an MSIE browser, you can view this first example. The image is St. Sophia in Istanbul. The picture is taken from the city’s hippodrome.