COMPUTER GRAPHICS

Graphics Basics

Two main categories of graphic images

Bitmap Images Raster/Pixel-Based Applications e.g. Adobe (Photoshop, ImageReady), Corel PhotoPaint, GIMP, Macromedia Fireworks Vector Graphics Vector Graphic Applications e.g. Macromedia (Freehand, Flash), CorelDraw, AutoCAD, Adobe Illustrator and other application used for logo making, advertisement, brochures, vector clip art, other samples (Computer Fonts)

Bitmap Images
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. 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.

Bitmap Images

on the left side shows a small leaf image at its actual size. The right side shows the same image magnified.

Types of bitmap images

Bitmap images can contain any number of colors but we distinguish between four main categories: Line-art. Grayscale images Multitones Full colour images

Types of bitmap images

Line-art.

These are images that only contain two colors, usually black and white. Sometimes these images are referred to as bitmaps because a computer has to use only 1 bit (on=black, off=white) to define each pixel.

Types of bitmap images

Grayscale images

which contain various shades of grey as well as pure black and white.

Types of bitmap images

Multitones

such images contain shades of two or more colours. The most popular multitone images are duotones, which usually consist of black and a second spot color (often an Pantone color). The example below contains black and Pantone Warm Red.

Types of bitmap images

Full color images

The color information can be described using a number of color spaces: RGB, CMYK or Lab for instance. These are discussed in more detail on this page (not yet available).

Bitmap Images
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.

Vector Graphics
Vector images are mathematically-based. All lines, shapes, etc. (also called objects) of a vector-based image are independent of one another. These objects are defined by mathematical equations rather than pixels, so they always render at the highest quality. Objects may consist of lines, curves, and shapes with editable attributes such as color, fill, and outline.

The image below shows the principle. To the left you see the image itself and to the right you see the actual lines that make up the drawing.

Each individual line is made up of either a vast collection of points with lines interconnecting all of them or just a few control points that are connected using so called bezier curves.

Vector Graphics
Additional attributes of vector-based images include: 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.

Vector Graphics vs Bitmap Images

Vector graphics are resolutionindependent. That means you can reduce a vector graphic to half an inch or blow it up to three feet and your image is still crystal clear. Another big advantage of vectors over bitmaps is file size. Not only do lean vector files take up less space on your hard drive, they typically load and print far faster. The primary disadvantage of vectors is they are time-consuming to create.

Vector Graphics vs Bitmap Images

Generally speaking, bitmaps are far easier to create than vectors but they present a complication: they are "resolutiondependent. The advantage of a bitmap over a vector is that it can represent a much more complex range of colors and shades-photographic detail. Vectors generally have flat colors and hard edges--bitmaps have continuous tones and a photographic quality.

Vector Graphics vs Bitmap Images

You can embed a raster graphic in a vector graphic, but never vice versa. You can never embed a vector graphic in a bitmap graphic because a bitmap graphic can't contain vector information. The only way you can combine a vector graphic with a bitmap graphic is to convert the vector image to raster information (rasterizing) first and then consolidate the two.

Bit Depth, Color Depth

Bit depth is the number of bits in each pixel.

Color depth is the maximum number of colors in an image and is based on the bit depth of the image and of the displaying monitor.

Bit Depth, Color Depth

A bit is the smallest unit of information a computer understands. It has two possible states: it can be on or it can be off. All computer information is handled in this way.

A computer monitor is made of pixels (short for "picture element"). Depending on the monitor and the computer system, each pixel will have a specific number of bits assigned to it. These bits effect how the pixel will appear.

Bit Depth, Color Depth

A black-and-white monitor has one bit per pixel. This bit has two possible states: it can be on or off. When it is on, the pixel looks white. When it is off, it looks black. Each pixel has a bit depth of one and a color depth of two. One bit produces two possible colors. If there are 2-bits per pixel, the number of colors each pixel can display rises to four. Two-bits per pixel means each pixel has 2 bits and each bit has two states: on and off. In mathematical terms, 2 bits x 2 states = 4 colors.

Here's a breakdown of bit depth and color depth. Color depth is sometimes called color resolution.
Formula 21 22 23 24 25 26 27 28 224 Number of Colors 2 4 8 16 32 64 128 256 16,777,216

Bit Depth 1-bit 2-bit 3-bit 4-bit 5-bit 6-bit 7-bit 8-bit 24-bit

Bit Depth, Color Depth

Bit Depth Number of Colors Sample File Size

1-bit

2 colors

2 KB

4-bit

16 colors

21 KB

Bit Depth, Color Depth

Bit Depth Number of Colors Sample File Size

8-bit

256 colors

53 KB

24-bit

16.7 million colors

240 KB

Resolution

is a measurement of the output quality of an image, usually in terms of samples, pixels, dots, or lines per inch. The terminology varies according to the intended output device. PPI (pixels per inch) refers to screen resolution DPI (dots per inch) refers to print resolution SPI (samples per inch) refers to scanning resolution LPI (lines per inch) refers to halftone resolution.

10

ABOUT RESOLUTION IN BITMAP IMAGES

Pixel Dimensions is the number of pixels along height and width of a bitmap image. The display size of an image on-screen is determined by the pixel dimensions of the image plus the size and setting of the monitor. The file size of an image is proportional to its pixel dimensions.

ABOUT RESOLUTION IN BITMAP IMAGES

ABOUT RESOLUTION IN BITMAP IMAGES

Image Resolution is the number of pixels displayed per unit printed length in an image usually measured in pixels per inch (ppi). Because they use more pixels to represent each unit of area, higher-resolution images usually reproduce more detail and subtler color transition than lower-resolution images printed.
P

Details 25 dpi

Details 6 dpi

Image Resolution To determine the image resolution to use, consider the medium of final distribution for the image. Using too low resolution for a printed image results in pixelation output with large, coarse-looking pixels. Using too high resolution (pixels smaller than what the Output devices can produce) increases the file size and slows the printing of the image. If youre producing an image for online display, the image resolution only needs to match the typical monitor resolution (72 to 96 ppi).

10

Monitor Resolution is the number of pixels or dots displayed per unit of length on the monitor, usually measures in dots per inch (dpi). Monitor resolution depends on the size of the monitor plus its pixel setting.

12

13

The 800 x 600 Pixel Monitor Resolution

Where: 800 pixels for width 600 pixels for height At 17 inch Monitor Display

The 1152 x 864 Pixel Monitor Resolution Where: 1152 pixels for width 864 pixels for height

At 17 inch Monitor Display

The 800 x 600 Pixel Monitor Resolution Where: 800 pixels for width 600 pixels for height With different size of monitor display

RGB and CMYK Color

The RGB color model

is typically used when dealing with color viewed on a computer monitor. also known as true-color, use 8 bits of data for each Red, Green, and Blue value. Together, this forms a 24-bit pixel palette which has 16.7 million colors (224=16,777,216 colors). JPEG images whose bit depth can be 16, 24, or 32 are RGB images.

The CMYK color model

is used on print material when printing in full color.

CMYK Colors
Cyan Magenta Yellow Black
Reflective light comes from a source, hits an object, and reflects from the object into the eye. Images are separated into various values of the four colors.

RGB
Red Green Blue
Non-reflective light comes straight from the light source to our eyes. Each individual color (red, green, and blue) has a value, or intensity, from 0 to 255. The various combinations of the values produce different colors.

Color Model

Values

RGB Color

CMYK Color

In theory, an over print of all three process colors absorbs all portions of white and produces the appearance of black. In reality, muddy brown is produced. For this reason, black is used as a fourth printing ink.

Indexed Color

Indexed color is a limited palette of up to 256 colors. When using a limited palette, the computer approximates a non-included color by combining the colors within the palette; this is called dithering. The indexed palette can have up to 256 colors, but does not require that many colors; the palette can have any number of colors up to 256. The fewer colors within the palette, the smaller the file size. One way to optimize graphics for the Web is to reduce the number of colors saved with the image. Using an indexed palette with only the colors used in the image is one of the best ways to limit an image's file size.

Dithering/Anti-aliasing

Dithering is a process in which differently colored adjacent pixels are used to simulate colors and shades that do not actually exist in an image's color palette. In effect, dithering "fools the eye" into seeing colors that aren't really there. It is a way of making few colors appear to be many colors. When a true color image is reduced to an indexed image, dithering is often used to compensate for the loss in colors.

Dithering
The example below shows the effect of dithering.

The original 24bit/ 16+-millioncolor image (5,443 bytes)

The image reduced to 4bit/16-color, undithered (1,965 bytes)

The image reduced to 4bit/16-color, dithered (3,411 bytes)

Anti-aliasing

is a technique for smoothing out jagged edges in a graphic. It is process of fooling our eyes into seeing smooth line edges

Aliased

Anti-aliased

Note: The edges of the anti-aliased image's curves and lines look much smoother and more professional.

This close up, you can clearly see the blocky edges of the circle (red) and oval (green) curves and the wedge (blue) line. These artifacts of aliasing are often affectionately referred to as "the jaggies.

You can clearly see how aliasing has blended colors along the curve/line edges to smooth them out. Note that the edge colors are blended with whatever color they happen to be next to. Thus blue is blended with white, red, and dark green; red with blue, white, dark green, and light green.

There are a couple of potential problems associated with anti-aliasing: Anti-aliasing increases the file size of GIFs. Why? GIF compression works well with solid color blocks, and anti-aliasing creates non-solid color blends. Anti-aliasing can cause the dreaded "fringe" effect. When you anti-alias an image, its edges are blended with their adjacent colors (as explained above). If you change an adjacent color, a fringe will appear around the corresponding edges. Observe, for example, these two transparent GIFs:

Aliased

Anti-Aliased

The Color Wheel

Primary colors Red, Yellow, Blue. Primary colors are true colors; they don't involve blending colors together. Secondary colors Orange, Green, Purple. Secondary colors are the result of the blending of two primary colors. Orange results from blending red and yellow; green results from blending yellow and blue; and purple results from blending blue and red. Tertiary colors Tertiary colors are the result of blending a primary color with a secondary color.

Hue, Saturation, and Brightness

Hue Refers to what most of us mean by "color." It is the generic name used to describe a color, e.g., red, green, yellow, orange, etc. Saturation Refers to how pure the color is. A fully saturated color is the truest version of that color. Primary colors (red, yellow, and blue) are fully saturated. Brightness Refers to the amount of white there is in the color.

Browser Safe Colors

Browser safe colors play an important role when designing graphics for the Web. Although most monitors today can display thousands of colors, there are only 216 common colors recognized by browsers and operating systems of computers using a 256-color display. This limited common palette can result in a couple of potential problems for those users: The browser will convert colors not included in the common palette to the closest color it can find. The browser may attempt to mix the colors within the common palette to approximate the desired color (dithering).

Compression and Lossy Compression

Compression To reduce file size, file storage formats use mathematical formulas to analyze and condense the image data they contain. This process is called compression.

Two types of image compression:

Lossy compression reduces file size by removing "unnecessary" data. The data is eliminated based on a number of sophisticated mathematically-based formula. The JPEG format uses lossy compression. Lossless compression is a type of compression algorithm that reduces file size without losing any data. Typically this is done by finding and eliminating redundant information. GIF and PNG file formats use lossless compression.

Lossy Compression

Lossy compression removes image details that are (in theory, at least) too small for the human eye to notice. PNG uses lossy compression. The JPEG compression scheme discards image data to reduce file size.

JPEG compression is based on the fact that our eyes are sensitive to certain kinds of visual details but not others. JPEG analyzes the image and throws out details that it deems unnecessary. How much it throws out is your choice. 10,153 bytes 3,172 bytes

95%

50%

25%

1,870 bytes

Lossless compression

To understand, we must journey deep into the heart of the GIF file format. As you know, bitmaps store color information pixel by pixel, in rows and columns. GIFs are read horizontally, left to right, row by row. For example: The pixels in the first row of this bitmap are: wht, wht, wht, wht, blk, blk, blk, blk, blk, blk, blk, wht, wht, wht, wht, wht GIF compression, however, sees a golden opportunity to compress the pixel-color data: 4 wht, 7 blck, 5 wht

PNG compression uses the same horizontal compression as GIF, but also contains formulas to compress vertically, resulting in additional file size savings.

GIFs

266 bytes

533 bytes

1,578 bytes

PNGs

224 bytes

225 bytes

1,488 bytes

The file size of the vertically striped GIF is almost double that of the horizontally striped GIF, because GIF compresses horizontally, not vertically. Both striped PNGs compress equally well, because PNG compresses both horizontally and vertically.

The file size of the third, dithered image in both GIF/PNG formats is much larger, because the image contains few areas of redundancy (i.e., solid color blocks) that can be compressed.

Most Common Raster Graphics Formats

File Ext. .bmp MIME type Proper Name Image/ bmp Windows Bitmap Description Commonly used by Microsoft Windows programs, and the Windows operating system itself. Are typical of paint programs, which treat images as collections of dots rather than as shapes. Images using a fixed color palette (limited to only 256 colors not the full spectrum of colors available to you monitor). The GIF format uses compression for smaller files and faster downloads. This format is best for images with solid colors or areas of uniform color such as illustrations and logos.

.gif

Image/ gif

Graphics Interchange Format

Most Common Raster Graphics Formats

File Ext.
.jpeg .jpg

MIME type
Image/jpeg

Proper Name
Joint Photographic Experts Group Portable Network Graphics

Description
Used extensively for photos on the web. The quality can vary greatly depending on the compression settings. a popular replacement for the GIF format. It can generate the same quality of compressed files without loss of information and is freely available. It allows a better form of transparency, but is not yet fully supported by all Internet browsers. Standard Adobe format for Photoshop Documents a rather old standard that is still very popular today.

.png

Image/png

.psd .tiff

Application Photoshop /photoshop Document Image/tiff Tagged Image File Format

Most Common Vector Graphics Formats

File Ext.
.pdf

MIME type

Proper Name

Description
A much simplified version of PostScript allowing for files containing multiple pages and links. Works with Adobe Acrobat Reader or Adobe eBook Reader. Generic vector-based page description language, created and owned by Adobe. Postscript is a powerful stack-based programming language. Supported by many laser printers. Vector Format for Adobe Illustrator Standard ASCII text files used to store vector data for CAD programs.

Application Portable /pdf Document Format

.ps

Application PostScript / postscript

.ai

Application Adobe / Illustrator Illustrator Document Image/ vnd.dxf ASCII Drawing Interchange

.dxf

Most Common Vector Graphics Formats

File Ext.
.fh

MIME type

Proper Name

Description
Vector format for Macromedia Freehand Vector format for Macromedia Freehand Shockwave Flash source file, only usable by Macromedia Flash authoring software. Is a web page plug-in that displays vector based animations contained in SWF files. Several applications can create SWF files; these include the Flash authoring tool from Macromedia.

Application Macromedia / Freehand Freehand Document Application Macromedia / Freehand Freehand Document Application Flash Source / File Flash Application Flash / xshockwave flash

.fh

.fla

.swf

These two images are perfect candidates to be saved as GIF files. They have a limited palette of colors, and the colors are mostly in solid blocks with clear edges.

When saving an image in the GIF file format, you can choose one (and only one!) color to be transparent.

This animated gif is made of a series of frames. The ability to animate is part of the GIF89a standard.

Low quality (10%), filesize 1.7 KB.

Mid quality (50%), filesize 5.7 KB.

Full quality (100%), filesize 36 KB.

TransparencyUnlike GIF, which only lets you to choose a single color to be transparent, PNG provides full alpha transparency. What this means is that you can have images with graduated transparency. Imagine drop shadows and antialiasing against any color. In short, much cooler, professional-looking images. P

Here's a photograph saved as a JPEG file. The JPEG format does a great job with smooth color tones

GIF didn't do a very good job with this photograph. The dithering (dots) are GIF's attempt to reproduce the photo's original, subtle color gradations using GIF's 256-color palette.

Use GIF when there are large areas of uniform color and the total number of colors is smaller than 256.

The GIF image is a flawless copy of the original. GIF can make flawless copy at high compression as long as the image contains large areas of uniform color, as long as the image has no more than 256 colors. P