Pixel Images

There are two main ways to represent digital images. We can either store them as pixel images or as vector images.

This course focuses on vector images and, more specifically, how Pycairo library is used to generate vector images. However, we will start by looking at pixel images because we can’t fully understand one without understanding the other.

Pixel

A pixel image is an image that is made up of pixels. We can think of a pixel as a tiny square area of an image. Pixels are too small for us to see each one individually, but if we can see them if we zoom in, as is show in this illustration:

Each pixel of an image constitutes a square section that makes up the image. Each of these squares, or pixels, of the zoomed-in image is completely filled with one color. We can’t have a pixel that is partly blue and partly red. It is the combined effect of hundreds of tiny pixels that gives the illusion of a continuous image.

To store a pixel image, we store the color value of each pixel, as an RGB (red, green, blue) value, which typically occupies 3 bytes per pixel (1 byte per color). Many modern cameras create images with millions, or even tens of millions of pixels. Hence, pixel images require a large amount of storage space. Some of the most common image formats, such as JPEG, PNG, and GIF, employ data compression to reduce the storage requirement.

There are several alternative names for pixel images, which are more or less interchangeable:

• Pixel image: The word pixel is a shortened form of the picture element, and each pixel is an element of the overall image.

• Raster image: The word raster is derived from the Latin word for rake —rastrum. It refers to the way an image is drawn line by line, a bit like a rake being dragged over the ground.

• Bitmap image: In general, a bitmap is a mapping between some kind of data and the bits in computer memory. This term is used to describe the mapping of computer memory onto pixels on the screen, and led to pixel images, sometimes, being called bitmap images.

Size and resolution

A key feature of a pixel image is that it has a fixed size in pixels. For example, the image in the example above is 640 pixels wide and 400 pixels high.

The pixel size affects the physical size of the image. The relationship between the pixel size and the physical size of the image is determined by the resolution at which it is printed or displayed.

physical_size = pixel_size/resolution

Resolution is expressed as the number of pixels per inch (ppi). Ppi is also, sometimes, referred to as dots per inch (dpi) or lines per inch (lpi). Resolution is also expressed in centimeters or millimeters, instead of inches (e.g. lpmm or lpmm). For the purpose of this course, we will use ppi.

For example, a typical computer monitor has a screen resolution of 90 ppi. If we display our 640 by 400 pixels image at 90 ppi, the physical size of the image on the screen will be about 7.1 by 4.4 inches (640 divided by 90, and 400 divided by 90).

Alternatively, if we print the same image on a printer with a resolution of 300 ppi, our image will appear at a minuscule 2.1 by 1.3 inches.

The pixel size, physical size, and resolution are linked by the formula given above. If we choose any of the two values, the third value is fixed automatically.