Display technology

The image is shown on a screen (also called a moniteur), which is an output peripheral device that allows a visual representation to be offered. This information comes from the computer, but in an “indirect” way. Indeed, the processor does not directly send information to the monitor, but processes the information coming from its Random access memory (RAM), then sends it to a graphics card that converts the information into electrical impulses, which it then sends to the monitor.

Computer monitors are usually cathode tubes, i.e. a tube made out of glass in which an electron gun emits electrons which are then directed by a magnetic field towards a screen on which small phosphorescent elements (luminophores) are laid out, constituting points (pixels) that emit light when the electrons hit them.

The pixel concept

An image consists of a set of points called pixels (the word pixel is an abbreviation of PICture ELement) The pixel is thus the smallest component of a digital image. The entire set of these pixels is contained in a two-dimensional table constituting the image:

Since screen-sweeping is carried out from left to right and from top to bottom, it is usual to indicate the pixel located at the top left hand corner of the image using the coordinates [0,0], this means that the directions of the image axes are the following:

• The direction of the X-axis is from left to right
• The direction of the Y-axis is from top to bottom, contrary to the conventional notation in mathematics, where the direction of the Y-axis is upwards.

Definition and resolution

The number of points (pixels) constituting the image, that is, its “dimensions” (the number of columns of the image multiplied by its number of rows) is known as the definition. An image 640 pixels wide and 480 pixels high will have a definition of 640 by 480 pixels, which is written as 640x480.

On the other hand, the resolution, a term often confused with the “definition”, is determined by the number of points per unit of area, expressed in dots per inch (DPI), an inch being equivalent to 2.54 cm. The resolution thus makes it possible to establish the relationship between the number of pixels of an image and the actual size of its representation on a physical support. A resolution of 300 dpi thus means 300 columns and 300 lines of pixels in a square inch which thus yields 90000 pixels in a square inch. The 72 dpi reference resolution gives us a 1”/72 (an inch divided by 72) pixel, that is to say 0.353mm, corresponding to a pica (Anglo-Saxon typographical unit).

Colour models

An image is thus represented by a two-dimensional table in which each cell is a pixel. To represent an image by means of computer, it is thus enough to create a pixel table in which each cell contains a value. The value stored in a cell is coded on a certain number of bits which determine the colour or the intensity of the pixel, This is called the coding depth (or is sometimes also called the colour depth). There are several coding depth standards:

• black and white bitmap: by storing one bit in each cell, it is possible to define two colours (black or white).
• Bitmap with 16 colours or 16 levels of grey: storing 4 bits in each cell, it is possible to define 2⁴ intensities for each pixel, that is, 16 degrees of grey ranging from black to white or 16 different colours.
• Bitmap with 256 colours or 256 levels of grey: by storing a byte in each cell, it is possible to define 2⁴ intensities, that is, 256 degrees of grey ranging from black to white or 256 different colours.
• Colour palette colourmap): thanks to this method it is possible to define a pallet, or colour table, with all the colours that can be contained in the image, for each of which there is an associated index. The number of bits reserved for the coding of each index of the palette determines the number of colours which can be used. Thus, by coding the indexes on 8 bits it is possible to define 256 usable colours; that is, each cell of the two-dimensional table that represents the image will contain a number indicating the index of the colour to be used. An image whose colours are coded according to this technique is thus called an indexed colour image.
• "True Colours" or "real colours": this representation allows an image to be represented by defining each component (RGB, for red, green and blue). Each pixel is represented by a set comprising the three components, each one coded on a byte, that is, on the whole 24 bits (16 million colours). It is possible to add a fourth component, making it possible to add information regarding transparency or texture; each pixel is then coded on 32 bits.

Weight of an image

To know the weight (in bytes) of an image, it is necessary to count the number of pixels that the image contains, which amounts to calculating the number of cells in the table , that is to say, the height of the table multiplied by its width. The weight of the image is thus equal to its number of pixels multiplied by the weight of each one of these elements.

The following is the calculation for a 640x480 True Colour image:

• Number of pixels:

  640 x 480 = 307200

• Weight of each pixel:

  24 bits / 8 = 3 bytes

• The weight of the image is thus equal to:

  307200 x 3 = 921600 bytes
  921600 / 1024 = 900 KB

This shows the amount of video memory that your graphics card needs depending on the screen definition (number of points displayed) and on the number of colours. The example thus shows that a chart, having at least 4 MB of video memory, is needed in order to show a resolution of 1024x768 in true colour…

Transparency

Transparency is a characteristic that allows the level of opacity of the elements of an image to be defined, i.e. the possibility of seeing through an image, the graphic elements located behind the same.

There are two transparency modes:

• Simple transparency is applied for an indexed image and consists in defining, one among the colours of the palette, as transparent
• The alpha-channel-transparency consists in adding a byte defining the level of transparency (from 0 to 255) for each pixel of the image. The process of adding a transparent layer to an image is generally called alpha blending.