Types of Design Images

Different designers use different products to produce website designs. Chances are, the person coding your website prefers to receive a Photoshop or Fireworks over an Illustrator File. But why? First we need to discuss raster and vector images.

Raster (Bitmap) Images and Editors

Raster images, also known as Bitmap images, are great for detail and realistic representation of photographs. They are composed of a grid-like map of tiny squares of color known as pixels. The overall effect is a picture, in the same way that your television produces a picture from small points of light. The picture is most often a photograph or some other image where there are shades of colors rather than solid blocks of a single color. Yet the pixels in a bitmap image are a solid color and never change in size. The subtle shading is achieved by changing the colors of these very tiny squares.

Editing Raster Images

Raster images can be edited by changing the color of the pixels. Editor software products provide tools to do this for one pixel or many. These tools are often called things like brush and eraser. Some tools like a blur tool will change the color of the pixels based on a mathematical formula, but the raster image is still just map of colored of pixels and is not represented by the formula to change their color. This is one of the reasons editing a raster image requires a lot of memory.

Resolution, represented as dots per inch, changes the size of the image by changing the number of pixels. When shrinking a raster image, the number of pixels is reduced. Most programs do a good job of deciding what colors to use for each pixel in the smaller image, but the reverse is not true. When expanding a bitmap image, the software cannot make good decisions about what colors to add at what points. The result is a loss of clarity and sharpness. It is always best to start with a larger image, save it, and then work on a copy to shrink it to the needed size. If you want to go up to a larger size later, you will still have the large version to start from.

Saving Raster Images

When you save a raster or bitmap image, it can be in any one of a dozens of file formats. Some of these are proprietary to a particular piece of software, and others are standard types that almost all graphics and photo processing programs recognize. One of the most common is a jpg or jpeg image file.

When you save an image as a standard jpg file, most products give you the opportunity to select an optimization or quality level of the file. Raster files can be quite large in size, but for use on the internet, you need to keep them as small as possible. Reducing the quality is one way of making the file size small enough to download to a browser in a reasonable amount of time. This type of compression is known as a lossy compression because some of the data for the image is lost in the process. There are raster formats that use lossless compression, such as jpeg 2000 and png.

During the save process, the user is generally given a percentage based setting to select. This has the effect of changing some of the pixels to the same color as their neighbor. Similar to shrinking the size of an image, small pieces of detail will be lost and cannot be recreated. This helps to reduce the file size because the pixels can be represented by a code that represents several pixels of the same color. Once you save your image, you cannot re-open it and change your mind by increasing the quality of the image. So again, save the original version and then create another that you will adjust for quality. There are raster formats that use lossless compression, though not all are suitable for photographs. Examples other common bitmap formats are gif and png.

Vector Graphics

Vector images are most often seen in web designs as grids, boxes, icons, buttons, logos, custom lettering, and other drawn elements. Some vector equations and editors work with 3-D vectors, allowing for manipulation of the image in a 3-D space format. Vector images are actually mathematical equations used to represent the image you see on your screen. While they are displayed, they are represented as pixels, but internally, it is the mathematical formulas that determine which pixel should be painted with which color. This type of image representation makes it easy to resize and move portions of the graphic, and takes up much less memory in editing programs or files.

Editing Vector Graphics

Editing vectors is different than editing pixel by pixel with an electronic brush or eraser. Lines are often called edges or paths. There is usually a tool to draw paths. Connected paths can form a shape. Sometimes it is called a pen or a pencil. Connected paths can form a shape. You will often see small control points on shapes. These are called handles in some programs. Sometimes there are multiple types of handles that represent different kinds of information needed by the mathematical formulas. You can use these handles to stretch and distort your shapes or change the number of corners or rays.

Changing the size of a vector image changes some of the values in its mathematical representation. In the end, your computer displays this as screen pixels, but internally, the vector graphic is a set of equations and numeric data values.

Saving Vector Graphics

When vector images are saved in their vector format, only references to formulas and data required to recreate the images are stored. This results in much smaller files when compared to raster images. The user does not have to make choices about quality of the image. Most vector capable programs are also able to save the vector image in bitmap form, often through an export feature. Robust vector editors combine raster and vector images when saving. The reverse is not true for raster images. Unless they are somehow converted to vectors in the editor, they can only be saved as bitmaps.

Robust editors combine raster and vector images, saving the information for both types in their composite images. Most image editors today are mixed, allowing both photographic and vector image manipulation. Their classification as vector or raster programs often reflects their strengths, strengths in their earliest versions, or the strength of their default file format. Sometimes it is also a reflection of the file types the software will recognize and import easily without loss or special manipulation. The ability to save files in a format that supports transparency is an important feature of editing programs we consider in the vector graphics category, as well.

Graphics Programs

The programs we use for editing our images often have their own method of saving our data. While they do save raster images in bitmap form, each often add other information needed by that editor. The file extension for these files is changed so that the file is recognized as being a file that conforms to the requirements of that editing program. This gives the program vendor the flexibility to adjust the file format for new features they might wish to add without waiting for a change in a standard format or changing the type of file used to save the images.

Most of the graphics programs are capable of reading files of a type other than their native type. They are also equipped to save files in one of several standard formats recognized by a wide variety of editors and display programs.

Adobe Photoshop

This program grew up as a photo editing program. Its principle format was raster images, though it has added more robust vector features as it grew. The file type we think of when working with Photoshop is PSD.

Adobe Fireworks

This program started out as a lighter weight image program that filled the vector image gap in Photoshop. It also added in some animation capabilities similar to frames in Flash. Fireworks has a simpler user interface than Photoshop, yet includes the most used features of a robust editor. Fireworks images are saved as PNG files.

Adobe Illustrator

Adobe Illustrator is known for its vector capabilities. The primary audience for Illustrator was graphic designers drawing illustrations. It developed a strong following for those producing documents, as well. Some web designers say they use Illustrator rather than Photoshop because they find the vector environment easier to work with when preparing layouts. Adobe Illustrator files end in the AI extension. Files may be exported to other formats as well.

Adobe Flash

Adobe Flash also has both vector and raster capabilities, but its focus is animating vector graphics and photo images to produce movies or applications. Applications can interact with the user by means of a programmed interface using PHP and the Action Script language. Flash was sometimes used for forms and quizzes on the internet because the code cannot be easily viewed or modified by the user. Flash files are saved in .SWF format. Replaying of Flash files is not supported on Apple devices due an industry feud. HTML5, SVG, and new Video APIs may supplant Flash and other similar products.


Gimp is a free open-source program that works with photographic images as well as vector graphics. It is available on most operating systems. It supports a wide range of file formats, including GIF, JPEG, PNG, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, BMP and others.


Inkscape is a free open-source graphics editing program that supports the new HTML5 SVG API and file format. It is still in the early stages of development and does not yet support all of the features of larger editors. Development is moving slowly, but there is still activity.


Picasa is Google's free photo editing program. It has a nice side-by-side editing feature that lets you compare your changes to the previous version. It supports common graphics file formats.


svg-edit is Google's free 2D vector graphics program supporting the new HTML5 SVG API and file format. It is a basic vector editing program but supports inclusion of raster images through links. The raster images cannot be manipulated in the way that Fireworks or Photoshop editors provide, so working with composite images can become tedious. The tools are somewhat crude. Files can be saved in png or svg format.