The Digital Image Landscape:
Standard Formats & HTML Source Code
Before exploring
some of the many image resources available on the Web today, it is critical
to understand basic digital image terminology and become familiar with standard
image file formats.
What
is a Digital Image?
A digital image is picture that consists of bits and bytes. It can be read,
stored, and displayed by a computer. Currently, there are two predominant
types of digital images that can be found on the Web: 1) bitmapped images
or raster graphics, and 2) vector graphics.
A bitmapped image or raster graphic is created by a collection
of bits and bytes, arranged in a set ratio of rows and columns, which form
pixels. An image's resolution or clarity is determined by the number of
pixels found in a given area. The three examples below illustrate the difference
in resolution of a single image, based upon the size and arrangement of
pixels.
An image created with vector graphics consists of
mathematical formulas or equations which represent lines and curves. One
popular web authoring tool and application that creates vector graphics
is Adobe's Flash.
Although they require a plug-in to view, Flash movies are very small in
size; and thus, quick to download. Many large corporate websites, such
as Royal Caribbean's Freedom of the Seas, Kodak,
and Volvo
have been using Flash for several years to generate eye-catching
and dynamic websites that incorporate animation, sound, and video to redefine
the online experience. For those interested in cutting-edge design and rich media that has a high impact, check out 2Advanced Studios hip implementation of Flash---considered one of the best today.
To
view the sample Flash Movie below, which is only 10K in size, place
your cursor on the black square, click your right mouse button, and select
PLAY from the pop-up
menu. (NOTE:
If the image below is not visible, you probably need to download
the Flash Player to your desktop. It's free!)
Several types of bitmapped image file formats exist. All of
them enable digital images to be stored and compressed in conventional files.
A few of the most common are listed below:
GIFs (Graphics Interchange Format) with ".gif" extension: Bitmapped
image format. At one time, considered by many to be the ubiquitous image
format of the Web, owned and licensed by Unisys Corporation. Developed and
popularized by CompuServe. GIFs can have up to 65,536 x 65,536 pixels and
only 256 colors. Best format for small images, line drawings, and images
with fewer colors.
Animated
GIFs with ".gif" extension: Animated GIFs are essentially bitmapped
images that move. Using the GIF file format, an animated GIF file is embedded
with multiple images that are arranged in a specific sequence. In the early years of the Web, animated GIFs were all the rage. They are used rather sparingly now because they have been shown to limit usability. Below are
a few examples of animated GIFs that you can easily find on the Web.
JPEGs (Joint Photographic Experts Group) with ".jpg" extension:
Another common file format for storing bitmapped
or raster images. Often used for storing high-quality photographic images.
This file format does not work well for small images or line art. Can display
over 16 million colors.
JPEG2000 with ".jp2" extension: The JPEG
standard for digital images is now 15+ years old. With the continual evolution
of the Web and increasing demands and needs to share and store visual information
online in new ways, the JPEG2000 standard was developed. JPEG2000 standard
is based upon wavelet image compression technology and offers online users
the ability to view images at multiple resolutions without the burden of
downloading large files. Visit the JPEG2000
website for more information.
TIFFs (Tag Image File Format) with ".tiff" or ".tif" extensions: Used
most often to exchange images between graphics application programs. Common
in desktop publishing, faxing, and 3-D applications. Considered the most
"archival" digital image format and widely supported in the IT
industry.
Images
and HTML Source Code
In order to identify image files within a website, many Internet search engines
examine standard file extensions such as "gif" and "jpg."
However, they also look at the image's descriptive file name
and path, which are by default provided by the image's creator or user. Unfortunately,
file names and paths are usually very cryptic, frequently abbreviated, and
do not adequately describe the visual content of the image.
For example, the file name for the image below is "image2.jpg."
However, it could have easily been named "imagelogo.jpg," "heidilogo.jpg,"
or worse, "myimage.jpg." None of these file names accurately describe
that this image consists of five colors, various fonts, and was created in
1999 by Heidi N. Abbey.
Nevertheless,
most Internet search tools still rely on this information, which is contained
within the hypertext markup language (HTML) or source code of a webpage. Image
references appear in several different tags.
In order to find the image above, search tools could use the following HTML
tags:
Image hyperlink tag points to a URL
Tag
Example: <a href="http://www.lib.uconn.edu/art/WebImage/images2.jpg">
This is the URL or web address which identifies the location of the image
on a specific server.
Image source tag points
to a specific image file
Tag Example: <img src="images2.jpg">
This is the
name of the image file.
Alternate tags which describes
images
Tag Example: <alt="Heidi's Image Workshop Logo"> When a user "mouses over" the image, this is the descriptive
text which appears.
The Digital Image Landscape:A bitmapped image or raster graphic is created by a collection of bits and bytes, arranged in a set ratio of rows and columns, which form pixels. An image's resolution or clarity is determined by the number of pixels found in a given area. The three examples below illustrate the difference in resolution of a single image, based upon the size and arrangement of pixels.
Animated GIFs with ".gif" extension: Animated GIFs are essentially bitmapped images that move. Using the GIF file format, an animated GIF file is embedded with multiple images that are arranged in a specific sequence. In the early years of the Web, animated GIFs were all the rage. They are used rather sparingly now because they have been shown to limit usability. Below are a few examples of animated GIFs that you can easily find on the Web.
