This page presents a comparison of graphical images formats. The images below are in various formats as listed below the photo. Some of these images are large so the page may take a minute or more to download. Beside the photos is a discussion explaining each format.
Why the concern about various image formats (I mean, GIFs work, right?)
When using images on Web pages, the emphasis is on fast-loads. Using a 28.8K modem, an image of 100K would take about 40 seconds to download! Imagine a page of such images ... no one would wait to see the entire page. By choosing a suitable file format, the same image that took 40 seconds may download in 10 seconds or less.
What about colours? Do I really need millions of colours?
By choosing 24 bit colour (millions) over simple 256 colour images you increase the size of the graphic file by a factor of three. The reason: 256 colour images required only one byte (8 bits) to represent these colours whereas 24 bits requires three bytes to do the same. As for graphics quality, ask yourself this: How many colours does my and/or most people's machines support? The vast majority of web users have a 256 colour driver installed (Indeed, mine is 1024 by 768 resolution at 256 colours). The reason is simple: The 24 bit colour driver runs much SLOWER so all screen-based operations take much longer to complete. And besides, unless you are viewing art, 256 colours is usually enough.
BMP Format (95K)
The BMP format is not shown here since few web browsers support BMP files
without plug-ins. It is the "raw" image format and is uncompressed. BMPs are
large but fast: The software does not need to process the image before
displaying it to the screen, it simply "dumps" the bytes directly to the screen.
For this reason, BMPs are usually used for operating system specific imaging (e.g.
drawing images in a window, icons, wallpaper etc.) where display speed is very
important, but are almost never used on the web where image size is premium.
GIF Format (64K)
The GIF format uses a non-lossy compression to compress image size. The original
image see here was 95K as a BMP file (with no compression) but is only 64K here
as a GIF file with no loss in quality. In essence, it is a similar process to
"ZIPing" the image file. Of course, the software displaying the image must "UNZIP"
the image first so there is some overhead associated with displaying these images
and hence they take slightly longer to display than BMPs.
JPEG Format (19K)
The JPEG format uses a lossy compression to compress image size. The image here
is not EXACTLY the same as the original due to losses, but is close. It can be
likened a video tape set from 2 hour mode to 6 hour mode. Some of the original
sharpness and clarity of the 2 hour mode may be lost but you can store a whole
lot more information on the same space! In the format the user can select
the amount of "loss" to optimize for quality or size. This image is set to "75%"
quality and is a third the size of the comparable GIF file. Note by comparing
this image with the above that there is little difference in colour or quality. The
only place where image degredation may be noticed is on the forehead of the
subject where JPEGs sometimes "burn-in" bright spots on the image.
JPEG (Low Res) Format (6.7K)
This is the same image as above however the quality factor was set to "2%" to
optimize for minimal image size. In this case the image degredation is obvious
however the image size is now only one-tenth that of the GIF image! With JPEG
compression there is a tradeoff to be made between image size and quality but
even at reasonable quality factors such as the above image, compression is still
quite high compared to GIF images.
Hopefully this clarifies some of the mystery surrounding the use of various
image formats. My personal suggestion is to use JPEG compression at 75% for
most pictures. As well, don't forget about image size. A four-by-six inch
photo takes four times longer to load than a two-by-three inch photo. Cropping
unnecessary background from a photo will drastically reduce image size.
