Adobe Education

Adobe Web Tech Table of Contents:

Lessons revised for CS2

Lessons revised for CS

Original lessons

Student working on a computer

Unit 5: Introduction to Graphics

Lesson 5.1: Graphics Basics

!	Lesson Goal: Learn some critical graphics concepts.

You and your Web team have been working on the steps involved in planning a Web site, developing a design document, creating a GoLive project site, and adding text and images to Web pages. Before you start learning to create and edit images in Photoshop and Illustrator, you need to get comfortable with a few basic graphics concepts.

Bitmap vs. Vector-Based Graphics

There are two main categories of graphic images: bitmap and vector.

Bitmap images, also referred to as raster images, are pixel-based. This means that location and color information about the image is stored in individual pixels within a grid. Figure 5.1-1 shows a small blue arrow image at its actual size. Figure 5.1-2 shows the same image magnified. The upper left quadrant of Figure 5.1-2 shows the individual pixels of the image. As the figure illustrates, each pixel has an assigned color; some pixels are white, while other pixels are blue. The information stored in a bitmap image regarding pixel location and color is what forms the image. Bitmap images are edited at the pixel level; in other words, the color of any one pixel can be changed. Additional attributes of bitmap images include:

Bitmap images are usually created and edited in "photo" or "paint" programs such as Adobe Photoshop.
Bitmap images are mapped to a grid.
The size of the image is based on the image's resolution.
Bitmap images are not easily scalable.
Bitmap images are used for photorealistic images and, therefore, may involve complex color variations.

Figure 5.1-1: Arrow Image, Actual Size

Figure 5.1-2: Magnified Arrow Image with Pixel Grid

Vector images are mathematically-based. All lines, shapes, etc. (also called objects) of a vector-based image are independent of one another. Figure 5.1-3 shows an image of a rose (actual size). Figure 5.1-4 shows one leaf of the same rose magnified, along with the paths and handles used within vector images. Additional attributes of vector-based images include:

Vector-based images are usually created and edited in "draw" or "illustrate" programs such as Adobe Illustrator.
Vector-based images have smooth edges.
Vector-based images create curves or shapes.
Vector-based images are good for precise illustrations, but are not as good for photorealistic images.
Vector-based images are easily scalable, due to their use of mathematic formulas.

Figure 5.1-3: Rose sample

Figure 5.1-4: Rose Leaf with Handles

Color/Bit Depth and Image Resolution

Bit Depth

A bit is the smallest unit of measurement regarding computer data. Each bit is an electronic pulse that can either be on (represented by a 1) or off (represented by a 0). Bit depth refers to the number of colors that can be displayed. The higher the bit depth, the more colors used in the image, therefore, the larger the file size. Note that the maximum number of colors increases exponentially after the original two colors:

Bit Depth	Formula	Number of Colors
1-bit	2¹	2
2-bit	2²	4
3-bit	2³	8
4-bit	2⁴	16
5-bit	2⁵	32
6-bit	2⁶	64
7-bit	2⁷	128
8-bit	2⁸	256
24-bit	2²⁴	16,777,216

The bit depths most commonly referred to are demonstrated below. Notice how the file size increases as the number of colors increases. Look at what happens when we get to the 24-bit image. Why is that file size smaller than the 8-bit image? It has to do with the file format used with 24-bit images. We'll talk about that in the file formats section of this lesson.

Bit Depth	Number of Colors	File Size
1-bit	2 colors	2 KB
4-bit	16 colors	21 KB
8-bit	256 colors	53 KB
24-bit	16.7 million colors	24 KB

Image Resolution

Resolution is defined by WhatIs.com as:

... the number of pixels (individual points of color) contained on a display monitor, expressed in terms of the number of pixels on the horizontal axis and the number on the vertical axis. The sharpness of the image on a display depends on the resolution and the size of the monitor. The same pixel resolution will be sharper on a smaller monitor and gradually lose sharpness on larger monitors because the same number of pixels are being spread out over a larger number of inches.
~ WhatIs.com (http://whatis.techtarget.com/)

You can think about image resolution as a measure of the output quality of an image. Traditional print work requires high resolution images to display the image quality we are all used to in magazines, brochures, and various other types of print materials.

Images prepared specifically for the Web don't require a high resolution. Computer monitors are limited to an image resolution of 72 pixels per inch (ppi) or 96 pixels per inch; therefore, high resolution images prepared for the Web actually waste a lot of valuable resources (i.e., bandwidth).

Images prepared for the Web at 72 ppi will not look good in print, so it is important to consider the various ways images will be used when determining the desired resolution of an image. There is definitely a trade-off that must be considered: higher resolution images that may be used for print will have a larger file size and require more bandwidth without displaying any better on a computer monitor; lower resolution images may display fine on a computer monitor, but will not be sufficient for print pieces.

Next, we will explore Web file formats and then discuss the concept of optimizing images for the Web. Optimizing images for the Web is one way to deal with dual purpose images, such as those used for both a print piece and a Web page.

Graphic File Formats

File Formats

Anyone using a computer should be familiar with the concept of file formats. File formats help to identify what kind of file is being worked with and are usually distinguished by the file extension. Most computer applications have a native file format, i.e., a default format for files created in that program. (For example, by default, Adobe InDesign saves files with an .indd extension, while Adobe Illustrator saves files with an .ai extension.) In addition, many applications allow the user to save files in formats other than the application's native format. It is a good idea to save files in the native format in addition to any desired non-native format.

There are three primary graphic file formats for Web images: GIF (Graphic Interchange Format), JPEG (Joint Photographic Experts Group), and PNG (Portable Network Graphics). Each of these graphic file formats is cross-platform and uses some form of compression to be optimized for use on the Web.

GIF (Graphic Interchange Format)

GIF is the preferred file format for images with large areas of solid color, such as logos, text as graphics, cartoons, etc. The GIF file format supports 8-bit images (up to 256 colors).

Here are some other important features of GIF images:

GIFs use a lossless compression scheme, i.e., images do not lose data when compressed and, therefore, don't lose image quality.
GIF 89a images allow for one transparent color.
GIF interlaced images can be displayed as low-resolution images initially and then develop clarity and detail gradually.
GIF images can be used to create simple animations.
GIFs are saved with a .gif extension.

JPEG (Joint Photographic Experts Group)

JPEG is the preferred file format for photographic images. In addition, the JPEG format works well with subtle transitions in color, such as watercolors, pencil or charcoal drawings, etc. The JPEG file format supports 24-bit images (over 16 million colors).

Here are some other important features of JPEG images:

JPEGs use a lossy compression scheme; data is removed from the image to make the file size smaller when compressed.
JPEG images allow for various compression levels, providing for the adjustment of compression to best display the image without losing too much of the image quality. Due to the various compression levels, it is suggested that the original image be saved and used for editing purposes; don't edit a JPEG image that has been compressed.
JPEG images are not interlaced; however, progressive JPEG images can be interlaced.
JPEGs are saved with a .jpeg or .jpg extension.

PNG (Portable Network Graphics)

PNG is a relatively new image file format that has many advantages over GIF and JPEG. The PNG file format can be 24-bit or 8-bit, eliminating some of the limitations of the other formats.

Here are some other important features of PNG images:

PNG images use a lossless compression scheme.
PNG images are interlaced.
PNG images support 8-bit transparency.
PNG images include the ability to correct for gamma information based on the computer monitor on which they are being viewed.
PNGs are saved with a .png extension.

Optimizing Web Graphics

Optimizing graphics for the Web involves eliminating as much unnecessary data from an image as possible without significantly impacting the overall quality of the image. There are several things that can be done to help optimize images:

Reduce the overall image size -- This might include creating a thumbnail of the image, if appropriate, or cropping the image.
Reduce the number of colors saved with an image -- You might be asking yourself, "How can you reduce the number of colors saved with an image; doesn't the image use all the colors that it is saved with?" Interestingly enough, an image saved as an 8-bit image (256 colors) might only use 60 of the possible 256 colors available. In this case, data about an additional 196 colors is stored with the image, making the file size significantly larger than necessary. This method of optimization is most appropriate for images that utilize solid colors.
Use compression schemes -- Optimizing graphics via compression schemes requires applying the best compression scheme for the image as well as adjusting the compression levels. This method of optimization is most appropriate for images that utilize complex color combinations.