Photoshop for Publishing

Color and Graphic Formats for the Web

Return Home

RGB sampleWeb 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

Cyan

cyan, r000, g255, b255

Hex: 00FFFF

Magenta

magenta r255, g000, b255

Hex: #FF00FF

Yellow

yellow, r255, g255, b000

Hex: #FFFF00

Black

black, r000, g000, b000

Hex: 000000

White

white, r255, g255, b255

Hex: #FFFFFF

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.

Photoshop Colorwheel

Photoshop Colorwheel
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).

Photoshop Color Picker

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.

Graphic Formats for the Web

Common formats:

 

Animated GIF by Steve Luna
Animated GIF by Student, Steve Luna

 

GIF: When 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 formatting intact.

Animated GIF imageCompuServe 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.

Color Table of 32 colorsGIF 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 reduction algorithms:

  • 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 option)
  • 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 are removed
  • 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:

http://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/


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 image 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 you need.

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.

PNG (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 format.

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.

PNG image

If you can see this image, then your browser supports PNG images.

RETURN TO TOP OF PAGE

Return Home