Raster vs Vector Graphics

Raster graphics / vector graphics / basic graphic design

Raster graphics, also known as bitmap graphics are one of two types of computer graphics. The second is vector graphics.

With raster graphics, images are are made up of large collection of pixels. Each pixel contains a tiny piece of color of the image and when put together create what our eyes see as a continuous tone picture.

Obviously the most common type of raster, bitmap or continuous tone image are photographs. Because of this, raster graphics are the most common type of images found on the web.

The good news about raster graphics is because of their “continuous tone” gradation and coloring, the images they create can be very realistic looking. The bad news is, if not handled properly your bitmap images can look less than stellar.

You can see three images below and what a raster or bitmap image looks like as you zoom in. Click on each image to see it full size. As you can see, as you enlarge the image or zoom in, the quality of the degrades. You can see the actual pixels that make up the continuous tone of the raster in the third image.

Vector graphics use mathematical points, lines and curves to create an image. Compared to a raster graphic, they are typically much smaller in file size when saved to a computer because you aren’t actually saving the graphic, only the mathematical information that creates and renders that image when opened and displayed on a computer.

The bad news about using vector graphics is that unlike raster graphics, they are not as realistic looking. They are made up of shapes and lines and can sometimes produce a close proximity to a continuous tone image. But each shape and line is its own color or gradient. There are no continuous tone pixels in a vector graphic

The good news about vector graphics is that unlike raster graphics, vector graphics can be scaled as big as a billboard or as small as a postage stamp without any loss of image quality. Vector graphics are most often used for diagrams, charts, logos, letters, cartoons/animation and image or graphic that can be created with shapes and lines.

Click on an image below to take a look at the three images below in full size. You can see that no matter how much the graphic is enlarged, the quality and crispness of the lines and shapes do not degrade in any way.

Where and How to Use Raster vs Vector Graphics

Raster Images for Digital Use
Raster graphics are the most common type of images for the web. The file types that you can save and publish an image to your website or blog are the JPG, PNG and GIF formats. I’ll talk more about image quality in an upcoming blog post. But just keep in mind that when publishing images to the web you don’t want to display a small image larger than it was published or it can become pixellated and its quality will degrade.

Conversely, you don’t want to publish an image that is too large for its intended use. Raster graphics can be very “file heavy,” meaning they can be quite large in terms of their file size. A very large image published on a webpage can cause the entire page to take a long time to load.

The optimal size for each image published to the web will have to be determined based on where it’s being published and how its being used. Every image should be created and saved for its intended use. The file size of the image should be as small as possible without losing so much quality the image begins to degrade.

Raster Images for Print Use
The most common type of raster graphic are photographs and so obviously raster graphics are also the most common type of image used in print design.

However file size and image quality have very different rules for print design. I will cover image quality in a future blog post. For now – in general, keep this in mind: an image created and saved for digital use like the web should NEVER be used in print design. Images are saved for the web as SMALL as possible before degrading in quality, so the web page can load quickly.

That same graphic will be fuzzy, pixellated and look terrible for print design. I will talk more about how to work with images in both print and digital formats in the future.

You can use JPG and PNG files for print design. You can also use images saved in the TIFF and EPS file formats which save images in very high resolution.

Vector Images for Digital & Print Use
Vector graphics have small file sizes and are highly scalable. This makes them perfect for print design. The image quality does not degrade in any way if you’re designing and printing a graphic the size of a postage stamp or as large as a billboard. Although vector graphics are not as common as raster graphics, they can also be used on the web.

A file format for a vector graphic is the SVG format. To add an SVG file or vector graphic to a webpage takes a markup language called XML that actually described the vector image.

A more common way of course is to “cheat” a little and create a vector graphic in a graphics program and save it as bitmap. Then place the JPG or PNG file on the webpage. In fact that is what I had to do for all the images I published to this webpage as vector graphic examples. They started out as vector graphics but I saved them as bitmaps to make it easier to publish them to this page.

Although not technically a vector it gets the job done because its unlikely anyone will be viewing a webpage scaled the size of a billboard. Just understand that once you save the vector as a bitmap, you’ll need to treat it like a bitmap. Enlarge it too much and it will pixellate and the quality of the image will degrade.

Share this: