and Graphic Formats for the Web
Web Graphics and Video
The Color Model used for computer monitors, cameras, scanners, and
video is an additive model called RGB, standing for "Red, Green
and Blue." In projected light, mixed colors get brighter. Here,
the absence of color is black. When Red, Green and Blue are projected
equally at full strength, they make 100% white. Computers generally
display RGB using 24-bit color. In the 24-bit RGB color model there
are 256 variations for each of the additive colors of red, green and
blue. Therefore there are 16,777,216 possible colors (256 reds x 256
greens x 256 blues) in the 24-bit RGB color model.
RGB Pixels can be described by where on the 256 RGB scale they fall.
This can be done by giving each Channel its own number (R255, G255,
B000 results in Yellow). Or you can describe the color in Hexidecimal
using a six digit number. See below:
RGB Color Values for CYMK colors
Just to complicate things further, in component video, the RGB model
is sometimes called R-Y, B-Y and Y, or simply RBY where the Y channel
carries green plus luminance (brightness) information.
Hue, sometimes called "chroma," describes a particular color at
full value and intensity (saturation). The Photoshop Colorwheel is made
up of RGB and CMY(K).
The Photoshop Color Picker has a Check Box at the bottom which will
limit your color choices to "Web-safe" colors which are
those colors which are definable in Hexidecimal. Red, demonstrated
above, is FF0000 in Hexidecimal.
Formats for the Web
Animated GIF by Student, Steve
the Internet was still being developed, all communication was
in text. Formatting codes were created which mimiced old Word
Processing Programs so that text documents such as thesis papers
could be communicated from University to University with their
introduced Graphics Interchange Format, or GIF
in 1987 as a format to transmit images with up to 256 different
colors. It uses Indexed Color, which assigns
colors used in the image to a table.
files support a maximum of 256 colors, which makes them ideal
for bold, limited pallete graphics such as line drawings, cartoons
and logos. It also supports transparency and animation. It does
fall short on photographic images however, where JPEG
is the preferred format. The most common method of reducing the
size of GIF files is to selectively reduce the number of colors
the file uses. The example at right is a table of 32 colors which
defines the colors for the bouncing ball shown above.
Photoshop can calculate these colors using one of several color
- Perceptual: priority to colors for which
the eye is most sensitive
- Selective: best for broad areas of colors
and preservation of colors native to the Web (default
- Adaptive: sampling the most used colors
in the image
- Web: Limits the pallet to the 216-color
Web-safe palatte common to both Windows and Mac; unused colors
- Custom: Locks the pallette and does not
update if image is changed
The GIF format has remained one of the most popular formats
on the Internet. It is especially good for compressing areas
of images with large areas of the same color, and for creation
of frame-based online animations. The GIF89a formats supports
transparency, and interlacing.
A good tutorial on making an animated gif can be found at:
JPEG: Named after its developers,
the Joint Photographic Experts Group, JPEG
was created to electronically store and transmit continuous-tone
raster images, in full-color and gray-scale, using low bandwidth.
With the introduction of Broadband and faster modems, one might
be inclined to think that compression isn't necessary any more.
However, as transmission systems and storage systems have improved
in capacity, the size of files being transmitted has gone up
even more drastically. Digital Cameras often save in JPEG formats,
and websites still use compressed JPEG images.
JPEG images may be of any resolution, but may also vary in compression
level. The rule of thumb is that the higher the compression,
the more information is lost, and the lower the quality of the
resultant image. Photoshop has three standard JPEG compressions:
High, Medium and Low Quality. It has been my observation that
a High Quality JPEG is very nearly identical in look to the
original. Low Quality, on the other hand, often shows distinct
signs of artifacting, blurring and "rainbowing". Even
so, for some applications, a low quality jpeg may be just what
The JPEG format supports 16.7 million colors, and is therefore
the primary compression scheme used for photographic images.
The internal compression algorithm of the JPEG format, unlike
the GIF format, discards information, and
so it is considered a "lossy" format. Depending on
what settings you use, the thrown out data may or may not be
readily visible. Some Web images can be compressed greatly and
still function quite adequately. However, once you compress
the image and save it, the lost data will remain lost. It is
best to keep and edit non-compressed originals, and then save
an optimized copy in JPEG format.
(pronounced PING), Portable Network Graphics,
is one of the newest file formats created for the Web. The PNG
format was designed to replace the older and simpler GIF format
and, to some extent, the much more complex TIFF format. Unisys,
who owned the LZW compression scheme used by GIF files, started
charging license fees for creating software that reads or writes
GIF files, including website owners who used GIF images. This
eventually triggered the development of PNG,
in 1995, but some browsers have been slow to support the new
PNG really has three main advantages over GIF: alpha channels
(variable transparency), gamma correction (cross-platform control
of image brightness), and two-dimensional interlacing (a method
of progressive display). PNG provides many of the features of
the GIF format, including streaming and progressive
file formats. It also provides greater depth of color, up to
24 bit color, allowing for partial transparency such as drop
shadows. However, as yet, it is not fully supported, and it
does not yet support animation.
If you can see this image, then your
browser supports PNG images.
TO TOP OF PAGE