Computer graphics

December 2016
The field of the IT concerning the creation and the handling of digital images is called computer graphics. Computer graphics cover various areas of knowledge, including the representation of graphic elements (text, image or video), as well as their transformations (rotation, translation, zoom,…) by means of algorithms.

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).

Color 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 color or the intensity of the pixel, This is called the coding depth (or is sometimes also called the color depth). There are several coding depth standards:

  • black and white bitmap: by storing one bit in each cell, it is possible to define two colors (black or white).
  • Bitmap with 16 colors or 16 levels of grey: storing 4 bits in each cell, it is possible to define 24 intensities for each pixel, that is, 16 degrees of grey ranging from black to white or 16 different colors.
  • Bitmap with 256 colors or 256 levels of grey: by storing a byte in each cell, it is possible to define 24 intensities, that is, 256 degrees of grey ranging from black to white or 256 different colors.
  • Color palette colormap): thanks to this method it is possible to define a pallet, or color table, with all the colors 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 colors which can be used. Thus, by coding the indexes on 8 bits it is possible to define 256 usable colors; that is, each cell of the two-dimensional table that represents the image will contain a number indicating the index of the color to be used. An image whose colors are coded according to this technique is thus called an indexed color image.
  • "True Colors" or "real colors": 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 colors). 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 Color 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

(To know the size in KB, it suffices to divide by 1024).
The following are some examples (considering that the image is not compressed):

Image definition Black and white
(1 bit)
256 colors
(8 bits)
65000 colors
(16 bits)
True color
(24 bits)
320x200 7.8 KB 62.5 KB 125 KB 187.5 KB
640x480 37.5 KB 300 KB 600 KB 900 KB
800x600 58.6 KB 468.7 KB 937.5 KB 1.4 MB
1024x768 96 KB 768 KB 1.5 MB 2.3 MB

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 colors. 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 color…

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 colors 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.

Related :


Infografía
Infografía
Infographie
Infographie
Infografica
Infografica
Infografia
Infografia
This document entitled « Computer graphics » from CCM (ccm.net) is made available under the Creative Commons license. You can copy, modify copies of this page, under the conditions stipulated by the license, as this note appears clearly.