Award evaluations in progress
In the last few months we have seen some new activity in
applications for the Vienna Award. There are three evaluations
in progress at this time. Also we are hopeful that some of the
applicants who did not quite qualify in months past will correct
the minor errors that caused their applications to fail and will
apply again.
Our readers should be sure to check back in March to read all
about the results of our investigations.
Bill Explains It - Image formats for the Web
Newcomers to the art of Web-page construction are sometimes confused
about the various file types use for images on the Web. This
little article will explain the three most common types of image
files that are in common use.
Bitmaps
All images are edited or developed using some kind of
a bit-mapped format. In a bitmap, depending on the number of
colors (color depth) used in the image, each
pixel
(picture element, also called
pel) is represented by a
certain number of bits or bytes. If you are processing an image
that is only in black and white, only one bit is needed per pixel
to store that information. With two bits you get four colors,
four bits produces sixteen colors, eight bits (one byte) will
store 256 colors, 16 bits (two bytes) thousands of colors, and
24 bits (three bytes per pixel) will encode millions of colors.
Users of Windows-based computers will recognise the standard
bitmap used by their systems as the ubiquitous "*.bmp" file. One
of the advantages of storing images on a system in bitmap files
for use on that system is that the images are "mapped" directly
into the display memory and need no further processing to be
displayed.
If you have small images, like navigation buttons or bullets, and
only a few colors, a bitmap image will do even for Web use. But
consider, an image of 100 x 100 pixels contains 10,000 pixels,
and if it is a "truecolor" 24-bit image it will consume over
30,000 (30k) bytes.
Also, you must consider that not all browsers will interpret .bmp
files. Internet Explorer will, of course, being made by Microsoft,
but IE was a relative latecomer to the browser neighborhood and so
Windows bitmaps have not enjoyed the wide popularity of some of
the other formats on the web.
Here we have two original bitmap images. The first is a
"truecolor" (24-bit) photo of me, and the other is a
"highcolor" (16-bit) diagram of a typical digital electronic
music studio. Notice that even though the studio diagram is
visibly a larger image the filesize is smaller due to the lesser
color resolution.
The photo was scanned and then edited and cropped using "Paint",
an image editing program that comes with Windows. The studio
diagram was created directly using Paint.
|
|
|
Bitmap, 25k
|
Bitmap, 11k
|
GIFs
Way back in 1987 the GIF image was first standardized by
CompuServe, although the patent for the algorithm (mathematical
formula) used to create GIF compression actually belongs to
Unisys. GIF stands for "Graphic Interchange Format" and works
by reducing the number of colors in the image.
The GIF compression algorithm itself is lossless, but since GIFs
receive much of their size reduction by reducing the number of
colors available, some information is always lost. Once converted,
there is no way to recover this color information from the GIF image.
The first format of GIF used on the Web was called GIF87a,
representing its year and version. It saved images at 8 bits
per pixel, capping the color level at 256. That 8-bit level
allowed the image to work across multiple server styles,
including CompuServe, TCP/IP, and AOL.
CompuServe updated the GIF format in 1989 to include animation,
transparency, and interlacing. They called the new format, not
surprisingly, GIF89a.
Here are the two images converted to 256 color GIFs.
In this case, due to the GIF algorithm's ability to drastically
compress images with a limited color set and large areas of
single colors, the studio image achieved a greater than 5-to-1
filesize reduction. The GIF reduction was less effective on the
photo image, achieving little better than 3-to-1.
|
|
|
GIF, 7k
|
GIF, 2k
|
The GIF algorithm's color reduction process causes contour edges
to appear in areas that have smooth gradations of color, such
as skin tones.
GIF Compression is preferred for small images like icons and
buttons, drawings, line art, grayscale (black and white), and
cartoons.
JPEGs
JPEG is a standardized image compression format. JPEG stands
for "Joint Photographic Experts Group," the original name of the
committee that wrote the standard.
JPEG is designed for compressing either full-color or gray-scale
images of natural, real-world scenes. It works well on photographs,
naturalistic artwork, and similar material; not so well on
lettering, simple cartoons, or line drawings. JPEG handles
only still images.
Unlike GIFs and bitmaps, which are used as is, JPEG files must be
decompressed by the browser or other viewer application, and so
may take longer to open than a similarly sized GIF or bitmap image.
However, the significantly smaller filesize allows the file to
download much faster than the equivalent bitmap, resulting in
decreased load on the server.
JPEG is "lossy," meaning that the decompressed image isn't quite
the same as the one you started with. JPEG is designed to exploit
known limitations of the human eye, notably the fact that small
color changes are perceived less accurately than small changes
in brightness.
The amount of "lossiness" of a JPEG image is referred to as
"quality". Most JPEG conversion programs allow one to adjust
the quality of the conversion. High quality images will
have the best appearance when decompressed. On the other hand,
if some loss of detail is tolerable, a low quality image
file can be made very small.
The JPEG compression algorithm clumps together groups of pixels,
reducing the amount of data needed to keep track of the color
information. "Quality" settings affect, among other things, the size
of these clumps, or blocks. Decreasing the quality produces a certain
"grainyness", which may or may not be acceptable. In any case, even
when using a high quality setting some information is lost.
Here are the two images converted to medium quality JPEGs. The JPEG
compression algorithm is more efficient when there are many colors
and much detail in the image, such as in this photo. This results in
a greater than 8-to-1 reduction in filesize. On the other hand, the
JPEG compression was only able to accomplish a little better than
2-to 1 filesize reduction on the studio diagram.
|
|
|
JPEG, 3k
|
JPEG, 5k
|
The JPEG algorithm's lossy compression process can introduce
color errors in areas of uniform color.
Most image editing programs support these file types, as well as
various other, mostly proprietary image files. Microsoft Paint, as
packaged with later versions of Windows 98 and up, provides
a minimal JPEG and GIF conversion also.
Due to the need to have a maximal amount of information in the
image, any image editor you use will manipulate images
in some kind of bitmap format during the editing process.
Images being composed or edited should be stored the editor program's
preferred file format until the editing process is completed. Then, I
recommend making copies converted into both JPEG and GIF so that the
results can be compared and the best version selected. Always keep
the original file in its native format in case future editing is
needed, as recovering the file from the converted images will always
result in a lesser quality image.
Even if you only have an early version of Paint to work with, you
can find sites on the Web to accomplish image file conversion for you.
One site I can recommend is Image Magick Studio. There you will be able to
interactively resize, rotate, sharpen, color reduce, or add special
effects to an image and save your completed work in the same or a
differing image format. At this time it is a free service.
Some final considerations
When planning your Web pages, be sure to consider how your choice of
images will affect download time. Try to avoid using large detailed
images solely for decoration. If the images are necessary as content,
rather than decoration, you can often make a reduced size image
(thumbnail) and use a link to offer the larger image as a download or
on a separate page.
If you must use images for link identifiers, such as buttons and icons,
try to use the same buttons and icons, and possibly backgrounds and
header graphics, on more than one page so that these can be quickly
called up from the viewer's cache rather than require new downloads for
each page.
Remember that all images and other files on the Internet are protected
by copyright laws. If you wish to use images you find on the Web, you
must obtain permission from the copyright owner to use them. Sites that
specialise in providing images for Web use usually have a notice
stating how and when it is permissible to use their images.
Also, remember to download and copy any files you find on the Web that
you wish to use and upload them to your own server space. Linking to
others' files directly is very bad "netiquette" and is considered
"bandwidth theft."
