skip to Main Content

Animation & Digital Puppets

raster image

Raster image, also referred to as a bitmap image, is an image produced by individual dots called pixels (they can be squares or rectangles as well). How many pixels an image contains makes up its resolution. The more pixels packed in the same space, the higher the resolution, or detail, the image can contain. No matter the resolution, if you enlarge a raster image enough, it will start to degrade and lose detail. To rasterize an image is to convert it into a bitmap image, which is what After Effects does to imported vector images1.

Photoshop and Gimp are examples of raster based software. Digital photography and highly detailed photorealistic drawings are usually done with raster graphics, although there is photorealistic art produced with vector software.

Many computer screens have a resolution between 72 to 130 pixels per inch (PPI), however, new screens such as the Apple Retina display, have a native resolution of 220 PPI or higher. This means websites designed with raster graphics specifically for the lower resolution of most screens look a bit blurred on Retina screens. This is especially noticeable if you enlarge such images on a mobile device with a high definition screen. This is in contrast to vector images which are not affected by screen resolution.

Bitmap image (jpeg) of a vector image at 100%.
Bitmap image (jpeg) of a vector image at 100%.
jpeg @ 300
Raster image enlarged by 300%.
jpeg @ 600%
Raster image enlarged by 600%.

These are three bitmap images of the same artwork. As I enlarged the image I cropped it to the same size as the original to create samples 2 and 3 above. As you can see, the more the image is enlarged, the less sharp it looks if viewed from the same distance. Click on image to enlarge.

1See vector image for a set of enlarged bitmap images.

Back To Top