There are several different ways to represent images in a computer (and on web pages). In this section, we will discuss some common choices for the web, and how you would choose between them.
Bitmap and Vector Images
There are two fundamental ways images can be represented in computers, and we should start there.
Let's start with a very simple image to use as an example. It's not a complicated image: a red circle with a black outline, but it will be enough to highlight the difference.
A vector image is represented as a collection of shapes: lines, curves, circles, squares, etc. This example image is particularly well suited to representation as a vector image: the computer can store information equivalent to “a circle with a black outline and red fill, with centre at … and radius …” and that will represent this image perfectly.
A bitmap image is represented as a grid of pixels each of which is given a particular colour. Here is the same image represented as both a vector and bitmap image:
Those probably look just about the same to you. If you're looking at this page on a very high resolution display like a modern smartphone or tablet, you might see that the vector representation on the left is slightly clearer, but otherwise they're likely identical.
The bitmap image looks good here because the pixels are very small: small enough to fool your eye into not seeing them as little squares, but as a smooth image.
If we zoom in on that image, you'll be able to see the difference between the two more clearly:
Now the difference is obvious. The vector image contains the information “this is a circle”, so when we zoom in it can be scaled smoothly: it's just a bigger circle. On the other hand, the bitmap image is just a collection of coloured square pixels, so fundamentally that's all we can work with when scaling the image.
In this case, the vector image will look nicer when printed or displayed on a high-resolution display. It will also be easier to edit it (for example, stretch it or change the fill colour).
For a more realistic example, consider this icon:
When saved as a vector image, the file is is about 2 kilobytes. When saved as a bitmap image, the best I could do is 11 kilobytes, so it would take about five times longer to download. Also remember that the vector image will scale more smoothly when being printed, or on high-resolution displays.
On the other hand, not all images make sense as a vector image. Since vector formats are best at the shapes they can represent (curves, lines, circles, etc.), images that aren't made up of those shapes might not be a good fit in a vector image.
For example, consider this photograph:
As it is, the image is about 12 kilobytes and looks nice. In an attempt to make a vector image, I have traced (or vectorized) the image in a vector editing program. This is an automatic attempt to turn the image into vector shapes:
As you can see, it didn't go well. Even with all of the lost detail, the image grew to 54 kilobytes.
It often makes sense to use a bitmap image because of the technology involved. For example, digital cameras inherently produce grids of pixels because of the way their image sensors work. Also, computer displays display grids of pixels so screen captures (like those in this course showing how web pages display on-screen) will inherently be bitmap images.
There is really only one vector image format that is relevant to the web. SVG (or Scalable Vector Graphics) is a vector image format designed for use on the web. We will work more with SVG later in the course.
Summary
Hopefully the lesson is clear: choose vector images when the image is made of of “shapes” and bitmap images when it isn't.
Often the choice is clear, but there are cases where it's not as obvious. For example, hand-drawn illustrations are usually scanned (or drawn originally) as bitmap images. They may be nicer if traced to vectors, but it depends on the details of the image and may require some experimentation.
When creating vector images for the web, you don't really have much choice: you're going to save as SVG. There are a few options when saving an SVG, but none that have a serious effect on the file size.
We will discuss bitmap file formats as we cover concepts that distinguish them in the next section.