Computer Graphics

Resolution

Computer images are digital interpretations of actual images. A computer takes a real image and breaks it up into pixels (the smallest unit of light in a monitor). Increasing the number of pixels per inch used (or dots per inch-DPI), increases the clarity, or resolution of the picture. Increasing the dpi also increases the size of the image as more information needs to be stored.

Most monitor devices can only display about 72 dpi, so there is no need to create web images at a resolution higher than that. On the other hand, images for print, should be minimally generated at 300dpi as printers can handle higher resolutions.

Raster vs. Vector

Raster images, also known as bitmap images, store the color information for each pixel (red, green and blue values from 0-255). This means that each pixel in an image takes 3 bytes of information. As you zoom into a raster image, the number of pixels stay the same, so the image become blurred as the pixels simply increase in size. These types of images are created in programs like Photoshop and Pixlr.

Original (100%)	200 %	400 %	600 %

Vector images are stored and rendered using mathematical formulas. So, when you zoom in on a vector image, the computer simply recalculates the number of pixels required and you continue to see a smooth image because pixels can be added as necessary. Vector images are created in programs like Illustrator.

In many graphics programs, text and shapes are originally rendered as vector graphics to allow resizing without pixellation. However, if the color or other attributes are to be changes, they have to be rasterized, or turned into a bitmap image.

Image Compression

As previously mentioned, bitmap images require 3 bytes per pixel - a red, green and blue value. So, if you have an image that is 1000 px by 1000px, you will need 300,000 bytes, or 300Kb of storage for that image. As you can imagine, the size of images can become greater and greater, which then will increase load times of web pages.

So, many computer scientists over the years have developed compression algorithms to reduce the storage size of the image with minimal reductions to quality. All compression algorithms fall in to two categories: lossy or lossless. Lossless compression maintains all of the original data in a more efficient way. This means that the original bitmap could be reconstructed if desired. Lossy compression does not store the original data, so the original bitmap cannot be re-constructed. For web design, we will focus on three main compression algorithms:

.jpg - stands for Joint Photographers Expert Group (JPEG). JPEG compression is a lossy compression algorithm that 'averages' colors to make things like gradients appear smooth, without pixelation. This type of compression is good for photographs and images without large blocks of similar colors. Additionally, JPEG compression DOES NOT allow for transparency or transparent backgrounds. So, all .jpg files will appear as a rectangle.
.gif - stands for Graphics Interchange Format. GIF compression is lossless compression that uses run-length encoding. Run length encoding looks at the pixels and stores consecutive pixels of the same color to be stored as a group. For example, R R R R R would be stored as 5R. This type of compression is great for images with large blocks of the same color such as clip art and cartoons. GIF compression also allows for transparentcy. Unfortunately, the GIF algorithm is protected and graphics programs have to pay a royalty to utilize it.
.png - stands for Portable Network Graphics. PNG is a relatively new compression algorithm that combines the best qualities of JPG and GIF compression. It is a lossless compression algorithm that allows for transparency. This makes it a popular choice for many web professionals.

Waterskier Photograph
.bmp(452 Kb)	.gif(86.4 Kb)	.jpg 2(23.3 Kb)	.jpg 8(56.8 Kb)

Martian Clip-art
.bmp(89.3 Kb)	.gif(2.7 Kb)	.jpg 2(17.9 Kb)	.jpg 8(29.8 Kb)

In the end, it is up to the designer to weigh the merits of size vs. quality.