An introduction to digital graphics

In this article I will be explaining all the different types of digital graphics ranging from file types to image classifications and how they are made.

Pixels

What is a pixel a pixel is a picture element which is where the name is derived from PICture Element. In the following article I will be explaining what makes a pixel how resolution and bit rate can affect a pixel.

Bit-rate – the bit rate of an image is how many colours can be displayed within a pixel A bit is the smallest unit of data. It can be 1 or 0, black or white, on or off. 8 bits comprise a byte. A byte (or 8 bits) can therefore represent 256 different colours this is worked out with a small equation 2^8^th which basically mean 2 to the power of 8 2x2x2x2x2x2x2x2 =256 this is the amount of data that can be put through the pixel. Most of the digital world operates on 8 bit images. What gets confusing at times is that while we speak of an 8 bit image, we're usually really talking about one that consists of 3 colours and therefore it is also referred to as a 24 bit image and 24 bit image can display 6561 colours the equation for this is 3^8^th (3x3x3x3x3x3x3x3 = 6561). Now we are beginning to understand bit rate we can now progress on to higher bit rates and what they have in regards to image quality and colour depth. So Instead of using just 8 bits to represent a single colour we can instead sometimes use 12 or 16 bits. A 16 bit image can handle 65,536 discrete levels of information instead of the 256 levels that an 8 bit image can. As you can imagine the increased degree of subtlety that this makes available is dramatic. And, just as an 8 bit image is actually 24 bit when we're dealing with colour, a 16 bit image is actually called 48 bit (16X3) when speaking of a 3 colour composite. A 48 bit image is capable of literally billion of colour increasing image quality and colour depth compared to the 8 bit images. Below are a series of images with deferent bit rates so you can see the difference in image quality that you get with a higher bit rate.

8 Bit Image

16 bit Image

24 bit Image

48 bit Image

RGB - RGB stands for the three primary colours of light – Red, Green, and Blue. RGB can be described as the computer’s native colour space for capturing images and displaying them. As human eyes are sensitive to these primary colours – red, green, and blue – all colours are perceived as a combination of these three colours. The RGB colour model, based on a Cartesian coordinate system, is considered as an addictive model in which red, green, and blue, are combined in several methods to reproduce all other colours. In the RGB colour model, each colour appears in its primary spectral component of red, green, and blue. One of the most widely used application of the RGB colour model is the display of colours on CRT, LCD or Plasma display, such as a television or a computer’s monitor. Each pixel on the display can be represented in the interface hardware (for instance, a Graphics card) as values of red, green and blue. The RGB values are then changed into intensities which are used for display purposes. Cameras and scanners also work in the same manner; it captures colour with sensors which record the varying intensities of RGB at each pixel location in the frame. In RGB colour model, a colour is represented by indicating how much each ingredients of red, green, and blue should be included in it. Each can differ from the minimum (no colour) to the maximum (full intensity). When all the colours are at the minimum value, then the displayed colour will be black. And when all the colours are at their maximum value then the displayed colour will be white. However, a confusing aspect in RGB colour model is that all these colours can be represented in various methods.

·         Colour science describes colours in the range 0.0 to 1.0 (minimum to maximum). Majority of the colour formulae takes these values to represent colour variations. For example, 1.0, 0.0, 0.0 represents full intensity red.

·         Another method of representing colour values is by using percentages from 0% to 100% (minimum to maximum). This is same as the above said method, to change from the range 0.0 to 1.0, simply multiply the numbers with 100.

·         The colour values can also be represented as numbers ranging from 0 to 255. This type of number representing is widely implemented by computer programmers to store each colour value in one 8-bit byte. Full intensity red is represented as 255, 0, and 0.

·         The same range, 0 to 255 is also represented in hexadecimal, in some cases with a prefix (like #). As, hexadecimal numbers in this range is usually written with a fixed two digit format, to represent the full intensity red it is written as #ff, #00, #00. This can be contracted like #ff0000.

Below is a RGB colour chart which shows how three colour can make all the colour within and image

Resolution – now I’m going to explain how resolution can affect pixels  but first what is pixel resolution The image that is displayed on the screen is composed of thousands (or millions) of small dots; these are called pixels; the word is a contraction of the phrase "picture element". A pixel represents the smallest piece of the screen that can be controlled individually. Each one can be set to a different color and intensity (brightness).

The number of pixels that can be displayed on the screen is referred to as the resolution of the image; this is normally displayed as a pair of numbers, such as 640x480. The first is the number of pixels that can be displayed horizontally on the screen, and the second how many can be displayed vertically. The higher the resolution, the more pixels that can be displayed and therefore the more that can be shown on the monitor at once, however, pixels are smaller at high resolution and detail can be hard to make out on smaller screens. Resolutions generally fall into predefined standard sets; only a few different resolutions are used by most PCs.

The aspect ratio of the image is the ratio of the number of X pixels to the number of Y pixels. The standard aspect ratio for PCs is 4:3, but some resolutions use a ratio of 5:4. Monitors are calibrated to this standard so that you can draw a circle and have it appear to be a circle and not an ellipse. Displaying an image that uses an aspect ratio of 5:4 will cause the image to appear somewhat distorted. The only mainstream resolution that currently uses 5:4 is the high-resolution 1280x1024.

There is some confusion regarding the use of the term "resolution", since it can technically mean different things. First, the resolution of the image you see is a function of what the video card outputs and what the monitor is capable of displaying; to see a high resolution image such as 1280x1024 requires both a video card capable of producing an image this large and a monitor capable of displaying it. Second, since each pixel is displayed on the monitor as a set of three individual dots (red, green and blue), some people use the term "resolution" to refer to the resolution of the monitor, and the term "pixel addressability" to refer to the number of discrete elements the video card produces. In practical terms most people use resolution to refer to the video image. Below I have included a chart which shows a selection of pixel resolutions

Resolution	Number of Pixels	Aspect Ratio
320x200	64,000	8:5
640x480	307,200	4:3
800x600	480,000	4:3
1024x768	786,432	4:3
1280x1024	1,310,720	5:4
1600x1200	1,920,000	4:3

I have included some images that show you how the resolution can affect the picture quality

100 x 100 pixels (original state)

200 x 200 pixels (Double original state)

400 x 400 pixels (4x original state)

800 x800 (8x original state)

Raster images - A raster image, also called a bitmap, is a way to represent digital images. The raster image takes a wide variety of formats, including the familiar .gif, .jpg, and .bmp. A raster image represents an image in a series of bits of information which translate into pixels on the screen. These pixels form points of colour which create an overall finished image.

When a raster image is created, the image on the screen is converted into pixels. Each pixel is assigned a specific value which determines its colour. The raster image system uses the red, green, blue (RGB) colour system. An RGB value of 0, 0, 0 would be black, and the values go all the way through to 256 for each colour, allowing the expression of a wide range of colour values. In photographs with subtle shading, this can be extremely valuable. Raster images have two different types of image compression lossy compression and lossless compression

What is lossy and lossles compression - Lossless and lossy compression are terms that describe whether or not, in the compression of a file, all original data can be recovered when the file is uncompressed. With lossless compression, every single bit of data that was originally in the file remains after the file is uncompressed. All of the information is completely restored. The Graphics Interchange File (GIF) is an image format used on the Web that provides lossless compression.

On the other hand, lossy compression reduces a file by permanently eliminating certain information, especially redundant information. When the file is uncompressed, only a part of the original information is still there (although the user may not notice it). Lossy compression is generally used for video and sound, where a certain amount of information loss will not be detected by most users. The JPEG image file, commonly used for photographs and other complex still images on the Web, is an image that has lossy compression. Using JPEG compression, the creator can decide how much loss to introduce and make a trade-off between file size and image quality. Below are two images that have these two compression types and are undistinguishable from each other to the untrained eye.

Lossless compression

Lossy compression

Vector images

What is a vector image a vector image uses mathematic equations to make and image rather than pixels the reason that this form of imagery uses mathematical equation is that they can be stretched without distorting because the image is not made up of a set amount of data which cannot be changed the only issue with vector images are that the colour is unrealistic compared the raster imagery.

                             Raster image                                   vector images

 Bit Depth

Also called pixel depth or color depth--measures how much color information is available to display or print each pixel in an image. Greater bit depth (more bits of information per pixel) means more available colors and more accurate color representation in the digital image.  In a computer system this is done by a dedicating small bit of memory to each pixel the more memory your system can dedicate to your monitor to display an image, the better the image quality. A 8 bit display  which show 256 colours gives a respectable colour display below is an example of a 8 bit colour display

A 24 bit colour display also known as a “truecolour” display display many more colours and because of the more memory that is dedicated to the image output below is an example of a true colour Image

Colour space

Greyscale – a greyscale image is an image made up of 265 shades of grey, hence the name greyscale it is a color mode where there are no colors in use. There is just black, white, and various shades in between. In the print world, a greyscale image is actually made up of just black ink. The value of the grey depends on the density and size of the black dots printed. In photographs, halftones are produced to simulate various shades.

RGB- Red, Green, Blue, This is the common color space used on computers. Website graphics are saved as RGB, as well as other output that involves a monitor. Colors are determined by mixing these 3 colors together with values ranging from 0 to 255. Black has an RGB value of R=0, G=0, B=0. A light purple could be a value of is R=180, G=0, B=255.

YUV - YUV is a colour space typically used as part of a colour image pipeline .It encodes a color image or video, allowing reduced bandwidth for chrominance components, thereby typically enabling transmission errors or compression objects to be more efficiently masked. Other color spaces have similar properties, and the main reason to use Y'UV would be for interfacing with analog or digital 

television or photographic equipment

Luminance and Chrominance

Luminance – is the quality of being luminous; emitting or reflecting light. Luminosity is measured by the light emitted by our sun; it is commonly referred to as “brightness”. Luminance is specified in candelas per square meter (Cd/m2) or nits. In the US, the British unit Foot-lamberts (fL) is also frequently used. To convert from fL to nits, multiply the number in fL by 3.426 (i.e. 1 fL = 3.426 nits).

Luminance is a major determinant of perceived picture quality in an LCD. The importance of luminance is enhanced by the fact that the human mind will react more positively to brightly illuminated scenes and objects. Users are typically more drawn to brighter displays that are more pleasing to the eye and easier to read. In indoor environments, a standard active-matrix LCD with a screen luminance around 250 nits looks good. However, a sunlight readable LCD with a screen luminance of 1,000 will look even more beautiful.

Chrominance - chroma for short, is the signal used in video systems to convey the color information of the picture, separately from the accompanying luma signal. Chrominance is usually represented as two color-difference components: U = B'–Y' (blue – luma) and V = R'–Y' (red – luma). is the part of a video signal, which carries information about the attributes of the colors, being displayed. The development of a technique for transmitting information about color paved the way to color television, a move that revolutionized the television industry. Colour values are given in the form of quantitative measurements against a standard reference color so that the signal is standardized, although properties of the display screen can change the way in which the color expresses. People may use the term “chroma” to refer to chrominance.