precisioninfo.com - Dr Bryan Hall - 2003
The video display is rendered in either text mode or graphics mode.
In text mode the basic display unit is a character whereas in graphics mode the basic display unit is a pixel. Text modes allow you to manipulate only entire characters and therefore consume less memory and require less data manipulation than graphics modes. Since graphics modes allow you to manipulate every pixel on the display, graphics modes consume commensurately more memory and system resources.
In text mode a pair of bytes containing the characters ASCII value and various display attributes represents each character and the pixel pattern of each character is not stored.
In graphics modes there is a unique relationship between the bit fields in video memory and screen pixels; each pixel provides a distinct dot of colour. A monochrome graphics mode allows you to turn the pixel either ON or OFF. Colour graphics mode allows you to specify the intensity of each of the 3 components red, blue and green. Full intensity of all colour modes produces white while zero intensity (all modes off) yields black.
The pixel (a word invented from "picture element") is the basic unit of programmable color on a computer display or in a computer image. It is a logical, rather than a physical unit.
The physical size of a pixel depends on how the resolution is set for the display screen.
If the display is set to its maximum resolution the physical size of a pixel will equal the physical size of the dot size or (dot pitch) of the display.
If the resolution is set to something less than the maximum resolution, a pixel will be larger than the physical size of the screen's dot (that is, a pixel will use more than one dot).
Physical pixel size can be explicitly calculated by dividing the number of pixels horizontally (or vertically) along the display by the physical width (or height) of the display screen. A display screen for a 17 inch monitor is approximately 12.3 inches wide by 9 inches high.
The following table shows the physical pixel dimensions for various display settings. The pixel size is based on the approximate screen height and width shown in the preceding diagram. Errors arise since monitors are not necessarily objectively flat and the physical display area of a nominally 17 inch monitor need not be exactly 17 inches.
| Physical pixel size on a 17 inch display for various display settings | |||||
|---|---|---|---|---|---|
| no. of pixels (horizontal axis) | pixel width (in.) | no. of pixels (vertical axis) | pixel height (in.) | total no. pixels | no. pixels per in2 |
| 640 | 0.019 | 480 | 0.018 | 307200 | 2775 |
| 800 | 0.015 | 600 | 0.015 | 480000 | 4336 |
| 1024 | 0.012 | 768 | 0.012 | 786432 | 7104 |
| 1152 | 0.011 | 864 | 0.010 | 995328 | 8991 |
The number of pixels per inch is obtained by dividing the total number of pixels by the display area. The display area for a 17 inch monitor is approximately 110.7 in2.
Maximum resolution is determined by the number of individual points of color contained on a display monitor, expressed in terms of the number of points on the horizontal axis and the number on the vertical axis.
A given computer display system will have a maximum resolution that depends on its physical ability to focus light (in which case the physical dot size - the dot pitch - matches the pixel size) and usually several lesser resolutions.
The sharpness of the image on a display depends on the resolution and the size of the monitor. The same number of pixels will be sharper on a smaller monitor and gradually lose sharpness on larger monitors because the same number of pixels are being spread out over a larger number of inches.
A display system that supports a maximum resolution of 1280 by 1024 pixels may also support 1024 by 768, 800 by 600, and 640 by 480 pixel resolutions. Note that on a given size monitor, the maximum resolution may offer a sharper image but the display windows may be spread across an area which is inconvenient to read well.
Display resolution is not typically stated in dots per inch as it usually is with printers. However, the resolution and the physical monitor size together do let you determine the pixels per inch. Typically, PC monitors have somewhere between 50 and 100 pixels per linear inch. For example, a 15-inch display monitor having a resolution of 640 pixels along a 12-inch horizontal line has about 53 pixels per linear inch. A smaller VGA (e.g. 14-inch) display with 640 horizontal pixels would have more pixels (approximately 57) per linear inch.
Screen image sharpness is sometimes expressed as dpi (dots per inch). (In this usage, the term dot means pixel, not dot as in dot pitch). Dots per inch is determined by both the physical screen size and the resolution setting. A given image will have lower resolution - fewer dots per inch - on a larger screen as the same data is spread out over a larger physical area. On the same size screen, the image will have lower resolution if the resolution setting is made lower - resetting from 800 by 600 pixels per horizontal and vertical line to 640 by 480 means fewer dots per inch on the screen and an image that is less sharp. (On the other hand, individual image elements such as text will be larger in size).
Printer resolutions are stated absolutely as the density of physical impressions on paper in dots per linear inch (dpi). Some typical printer resolutions are 2400 dpi, 1200 dpi, 600 dpi, 300 dpi and 150 dpi.
A raster is defined by breaking a space up using a set of perpendicular coordinates (e.g. x, y coordinates in two dimensions). There are other ways of breaking a display space up; for example by using:
Graphics can be created as either raster or vector images. A raster image file identifies coordinates to be illuminated in monochrome or color values. In raster images the colour value of every single pixel is specified. Continually enlarging a raster based graphic causes the picture to alias; the picture can be seen to consist of a collection of colours spread across a grid.
The raster file is sometimes referred to as a bitmap because it contains information that is directly mapped to the display grid.
Scanning a photograph or taking a photograph with a digital camera typically creates raster images. Examples of raster image file types are: Windows BMP, GIF, and JPEG files.
In vector graphics a mathematical prescription for creating the graphic is stored. Vector graphics are generally far more amenable to changes in image size than raster based graphics since the picture can be redrawn at the different image size.
Vector graphics may also be layered which means they can be built up by putting different shapes on top of one another. This cannot be achieved with raster graphics since they essentially store colour intensity values for each position in the raster.
Since vector graphics store only a prescription for creating an image they frequently require smaller file sizes than raster graphics, which have to store colour intensity values for every single pixel in the raster image.
Since the display screen is rendered by specifying colour values at each position on the screen vector graphics must be subject to a final conversion to a raster image at the time they are sent to the display screen. Vector image files are easier to modify and manipulate than raster image files (which can, however, sometimes be re-converted to vector files for further refinement).
Images created with advanced graphics packages like Adobe Illustrator and Corel-Draw are in the form of vector image files.
A bitmap is a file that indicates a color value for each pixel along the horizontal axis or row (called the x coordinate) and a color for each pixel along the vertical axis (called the y coordinate). A Graphics Interchange Format file, for example, contains a bitmap of an image (along with other data).
Very early display systems were monochrome (black & white, or black and green etc). Only one bit is required to specify monochrome graphics - display is either on or off.
The specific color that a pixel describes on a colour monitor is some blend of three red, green and blue components of the color spectrum. Old colour display systems provide for only 16 distinct colours. This can be achieved by allocating 4 colour specification bits (24 = 16). One byte or 8 bits is required to specify 256 distinct display colours (28 = 256).
A 24-bit color system allocates three bytes of data for specifying a pixel's color, one byte for each major color component. With 24 bit colour it is possible to generate 16,777,216 (224 = 16,777,216) distinct colours.
| Table: Color generation & specification using various bit strings | ||
|---|---|---|
| # color bits | # distinct colors | Comment |
| 1 | 21=2 | Monochrome |
| 4 | 24=16 | Basic Color |
| 8 | 28=256 | e.g. GIF 8-bit (1987) |
| 16 | 216=65536 | "High Color" |
| 24 | 224=16777216 | # Distinct Colors in HTML |
| 32 | 232=4294967296 | "True Color" |
| 64 | 264=18446744073709551616 | "True Color" |
In 1987, the CompuServe online information service introduced the GIF standard for transmitting images across telephone lines. GIF supported 8-bit (256-color) images and used the Lempel-Zev-Welch (LZW) bitmap compression algorithm which results in no information loss. GIF images were incorporated into many commercial, public domain, and shareware image viewers and editors.
CompuServe were not aware that Unisys had been awarded a patent for the LZW algorithm in 1985. Unisys subsequently learned of the use of LZW in GIF. After much controversy, Unisys required post December 1994 developers of new for-profit software that write GIF formats, or another derivatives of the LZW algorithm, reach a licensing agreement with them.
Interlaced GIFs are sent to the user as a series of lines, which are sequentially displayed. First every 10th line is sent, then every 5th, then every other, and finally the entire image is filled in. This is useful since most of the image can be read before it is all downloaded.
The GIF 89 format allows you the option of setting one colour in the image as being transparent. This is particularly useful in applications like incorporating images into web-pages since you can get the image to "blend into the HTML page background" and set the HTML background colour arbitrarily.
Like the GIF the PNG file format provides for the lossless compression and storage of raster images. The PNG format provides a patent-free replacement for GIF. The PNG specification was issued as a W3C Recommendation in October 1996. PNG images are superior in many ways to GIFs since they support Indexed-color, grayscale, and truecolor images, as well as transparency. Some older Internet browsers do not support PNG images.
JPEG is a format deriving from the Joint Photographic Expert Group; it is a lossy compression method standardised by ISO (the specification was also published by the International Telecommunication Union CCITT Recommendation | ISO/IEC International Standard ISO/IEC JTC 1/SC 29/WG 10).
JPEG establishes a standard for the sequential encoding of continuous tone grayscale and colour images; as such JPEG is not limited to displaying 256 colours and is therefore usually more suitable for displaying distinct shades of colour than the GIF format.
The JPEG progressive file format provides for a low resolution JPEG image to be rendered before the full higher resolution larger image is fully received.
The RLE algorithm stores colour values along rows of a raster as "colour/value" pairs. It does this by storing the colour and the number of consecutive cells having that colour. The first element is always the counter while the second element is always the data element.
After compression the data my look like this:
7, 1, 4, 0, 2, 1, 4, 0, 2, 1, 4, 0, 2, 1, 4, 0, 7, 1
This stream could decompress as a 6*6 rectangle:
| 1 | 1 | 1 | 1 | 1 | 1 |
| 1 | 0 | 0 | 0 | 0 | 1 |
| 1 | 0 | 0 | 0 | 0 | 1 |
| 1 | 0 | 0 | 0 | 0 | 1 |
| 1 | 0 | 0 | 0 | 0 | 1 |
| 1 | 1 | 1 | 1 | 1 | 1 |
The procedure of storing colour values along rows of a raster as "colour/value" pairs works exceedingly well on images having minimal variability. For example, a single 6*6 color square could be represented as:
36, 1
which would decompress as:
| 1 | 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 | 1 |
| 1 | 1 | 1 | 1 | 1 | 1 |
Conversely, the procedure of storing "colour/value" pairs for images having high variability is very inefficient. The following provides an example of algorithm inefficiency on a variable image.
| 1 | 0 | 1 | 0 | 1 | 0 |
| 1 | 0 | 1 | 0 | 1 | 0 |
| 1 | 0 | 1 | 0 | 1 | 0 |
| 1 | 0 | 1 | 0 | 1 | 0 |
| 1 | 0 | 1 | 0 | 1 | 0 |
| 1 | 0 | 1 | 0 | 1 | 0 |
using a color/value stream would require a 72 element data string of the form:
1,1,1,0,1,1,1,0,1,1,1,0,1,1,1,0, .... ,1,0,1,1,1,0
This is exactly twice the length of an uncompressed string which could be simply represented by storing only a colour for each cell using 36 data elements:
1,0,1,0,1,0,1, .... 1,0,1,0
The performance of a color/value string storage algorithm may also depend on the orientation of the image. For example, by rotating the previous image right 90 degrees
| 1 | 1 | 1 | 1 | 1 | 1 |
| 0 | 0 | 0 | 0 | 0 | 0 |
| 1 | 1 | 1 | 1 | 1 | 1 |
| 0 | 0 | 0 | 0 | 0 | 0 |
| 1 | 1 | 1 | 1 | 1 | 1 |
| 0 | 0 | 0 | 0 | 0 | 0 |
the new image can be stored using only a 12 element data string of the form:
6,1,6,0,6,1,6,0,6,1,6,0
The RLE Algorithm overcomes problems caused by images having high variability by enumerating a threshold value and recording counter/value pairs only over those regions where the image is sufficiently homogeneous to significantly improve on recording an uncompressed data stream.
References: