The Modern Web

Comparing Vectors and Bitmaps

Vector graphics are made of geometrical shapes formed with a coordinate system; a series of points is plotted on a grid and lines are drawn between them to form the shapes, making them inherently scalable. If I make my grid larger, the same shape is drawn from the same coordinates, but the coordinates are now farther apart so my shape is bigger.

Bitmap graphics are a series of colored pixels laid out in a grid to form an image; if you open an image in Photoshop (or similar) and zoom in, you can see this grid for yourself. All of the common web image formats (JPG, PNG, GIF) are bitmap formats. Resizing a pixel grid means the computer has to use a scaling algorithm to increase or decrease the sizes of the pixels to ...