Bitmaps and Vectors

What on earth are bitmaps and vectors?

Firstly, bitmaps and vectors are two different types of two-dimensional graphics. What sets them apart is how they store their information.

In the last post, we looked at using sprites in Scratch. We looked at how to import pre-made sprites into your project from the in-built sprite library, and we very briefly acknowledged the fact that they were sorted into Categories, Themes and Types.

The sprite library in Scratch.

What we didn’t go into last week is what those two words beneath Types mean. So let’s talk about bitmaps and vectors.

Bitmap images

Bitmap images, also known as raster images, store colour information. It stores the colour of every individual pixel that makes it up. What’s a pixel, you say? A pixel is a little tiny square that is filled with a colour. Let me show you a picture to better illustrate what I mean. Here’s a bitmap image:

An image on 100% zoom.

Now, if we zoom really, really far in on the picture, we can see all the little tiny squares that make up the image:

An image on 800% zoom.

Those little tiny squares are what we refer to as pixels. Bitmap images store the colour information of every individual pixel that makes up the above image.

Vector images

Vector images, on the other hand, store mathematical formulae that draw lines and curves. An easy example of a vector image is the Shapes that you find in Microsoft Word:

The Shapes dialogue in Microsoft Word shows a plethora of vector images that you can draw.

The shapes that you see on the above menu are vectors. This is because the mathematical formulae dictating how they are drawn are what is stored, not the colour information of the shapes that make up the image.

The Difference between Bitmaps and vectors

Well, there’s actually no accurate way to discern bitmaps from vectors just by looking at them, but there are several important distinctions between these two types of images that could help you determine whether an image is a bitmap or a vector:

1. Colour

Since bitmaps store colour information and vectors store mathematical information on how to draw lines and curves, you’re more likely to find that bitmaps have varied colour palettes, whereas vectors might have much simpler colour palettes. Let’s look at some of the sprites in the Scratch library to show you what I mean.

Here are some examples of vector sprites:

Some vector sprites from the Scratch sprite library.

Here are some examples of bitmap sprites:

Some bitmap sprites from the Scratch sprite library.

You can see that Scratch Cat, Banana and Shark only really contain discernible lines and curves, as well as only a few solid colours. Bitmaps, on the other hand, have much higher levels of colouration detail and much more diverse colour palettes. If you were to take a bitmap sprite like Airplane, Jay or Trampoline and inspect them at high zoom, you can see just how much colour information they contain.

2. Scalability

Because vector images are based on mathematical formulae, they’re very easy to scale. Resizing the image would involve recalculating the variables in the formulae:

A vector image in its original size and scaled up. See how simple and crisp the scaled version is?

Bitmaps, on the other hand, are not so well-equipped for scaling. The moment you stretch a bitmap too big, it gets all blurry and fuzzy:

A bitmap in its original size and scaled up. See how blurry and fuzzy the image becomes?

3. File size

Again, because bitmaps store the colour information of every individual pixel that makes up its image, they have the tendency to be much bigger in terms of file size than vectors. Vectors tend to be much smaller due to the fact that they, once again, only really contain mathematical definitions.

Here’s the file information for two icons that are exactly the same in terms of content. The only difference between the two is that one of the icons is a PNG (bitmap) and the other is an SVG (vector):

A bitmap (PNG) and vector (SVG) versino of the exact same file.

The bitmap version is 43.2 kilobytes, whereas the SVG is only 2.64 kilobytes!

4. Support and file extensions

There’s not as much support on the web for vector images as there is for bitmaps. In fact, vector images have the tendency to be converted to bitmap images before they can be used on the web. When was the last time you saw support for vector file extensions like EPS, SVG and SWG? Most people have never even heard of these file formats! You’re more likely to find support for bitmap file extensions like JPEG/JPG, PNG, GIF and BMP.

Even while editing this blog post on Google Docs, I tried to insert a vector image, only to be brutally rejected by Google for this very reason:

The types of image formats that Google Docs supports. Surprise, surprise: no vector formats to be found!

5. Means of editing

Editing a bitmap image involves changing the colour information of its pixels. You can do this with any old graphic editing program — like Paint, for example.

To edit a vector, you reform the lines and curves that make up an image. You can do this with programs like Inkscape or Adobe Illustrator.

You can get a feel for the differences between editing vectors and bitmaps by attempting to edit bitmap and vector sprites in Scratch. If you go to the Costumes tab, you’ll see an editing window:

You can edit sprites in the Costumes tab in Scratch.

In the bottom right corner — depending on whether you have a vector sprite or a bitmap sprite selected — you’ll either see the words Vector Mode or Bitmap Mode respectively. In the above example, because Scratch Cat is a vector sprite, it will be in Vector Mode by default, and can be converted to Bitmap Mode if you want it to be.

When you convert between the different modes, there are different options available for you. A lot of the options are the same, but here are some of the differences:

Bitmap Mode

Brush

Eraser

Remove background

Vector mode

Reshape lines

Pencil

Move between layers in an image

Recap

Finally, just to recap everything we’ve learned. Sprites in Scratch are sorted into two different types: bitmaps (also known as rasters) and vectors. In the world of computer graphics, these two terms referred to two types of images whose differences lie in the way they store information. Bitmaps store colour information: they keep a record of the colours of every individual pixel that makes up its image. Vectors, on the other hand, store mathematical information about the lines and curves that make up its image.

It’s often hard to discern the differences between bitmaps and vectors visually, but here are a few key points that might help you tell the difference between them:

Colour: Bitmaps usually have higher colouration, since the colour information of every individual pixel is stored, whereas vectors tend not to have as much colour detail.
Scalability: Vectors are very scalable, as they contain mathematical information to draw the lines and curves that make up their image, whereas bitmaps tend to get blurry and fuzzy if you stretch them beyond their limits.
File size: Since bitmaps record the colour information of every individual pixel that makes up its image, it tends to be much bigger in file size than vectors.
Support and file extensions: Bitmaps (JPEGs/JPGs, PNGs, GIFs, BMPs, etc.) have a lot more support on the internet, whereas vectors (EPSs, SVGs, SWGs, often need to be converted to a bitmap before they can be used on the internet.
Means of editing: Editing a bitmap involves editing the colours of the pixels that make up its image, whereas editing a vector involves reshaping its lines and curves. You can get a feel for the difference by trying to edit bitmap and vector sprites in the Costumes tab in Scratch. You can convert between Bitmap and Vector Mode to look at the different options you have for editing bitmaps and vectors.

Blog Post