Most people see digital graphics in action every day, but it may sound like a task to understand how it all works. This article aims to make it simple, taking a comprehensive look at the principles of digital graphics to give you a better understanding of the technical side of this ever-more-prevalent medium.
In this article, I will explain about:
- Pixels;
- Bit rate and bit depth;
- Raster images/Bitmaps;
- Vector Images;
- Colour Space;
- Image Capture Technology;
Pixels: The Building Blocks of Images
A pixel - an abbreviation of picture element - is the smallest part of a picture that can be displayed or printed. A pixel is a single square of one colour - images are made up of a large number of these squares.
When a digital image is magnified, you can see the pixels (squares) it is made up of.
Each pixel is made up of three dots - red, blue and green - and the three coloured dots mix in different ways to create the colour of the pixel. These dots are the smallest element of a video display such as a computer monitor.
Every digital display screen is made up of a grid of pixels and the physical size of a pixel varies according to the resolution of the display screen. The resolution of a screen is the amount of pixels that can be displayed - the higher the resolution, the more pixels can be displayed and the more pixels displayed, the greater the image quality - a higher number of pixels means that the finer details of an image can be defined.
Bit Rate
A 'bit' (short for binary digit) is the smallest piece of information a computer can process. Each measurement of data is made of of bits - a byte is 8 bits, a kilobyte is 1,024 bytes and so on. The bit rate is the number of bits processed over a unit of time - usually measured in bits per second (bit/s). The size of a digital file is measured in bits, bytes etc. and the higher the bit rate, the larger the file.
In images, this affects the quality of the picture as a lower bit rate restricts the capability of a pixel to carry a wide variety of colours. An '8-bit' image, for example, is restricted to a maximum of 256 colours - three bits of data are allocated to each red and blue and two bits are allocated to green colours. As the bit rate increases, so does the amount of bits allocated to each colour - 24-bit is referred to as 'true colour', as it is capable of displaying nearly 17 million colours and images displayed with a 24-bit colour pallete will show their true colour.
The number of colours an individual pixel is capable of displaying is referred to as its bit depth, or colour depth.
Each individual pixel in an image is made up of a certain number of bits. This number is known as the 'bits per pixel' (bpp) of the image.
A 1bpp image (where only 1 bit of data is dedicated to each pixel) can only display two colours - black or white. This is because each bit can display two colours, so the greater number of bits in a pixel, the greater number of colours. A pixel made up of 8 bits is capable of producing 256 different combinations (each bit can display two colours and 2x2x2x2x2x2x2x2 or 28 adds up to 256). 16-bit images are known as 'high colour', as the maximum amount of colours increases to around 65,000 - not quite 'true colour' but a much wider range of possibilities than 8-bit images. After this comes true colour - the most common on modern displays. 16,777,000 colour combinations are possible with 24-bit images.
High definition 'deep colour' is also possible - these images are between 30 and 48 bpp and are capable of displaying over a billion colours. Deep colour is used in high-end graphics software and an increasing number of HD graphics cards are being made with deep colour capability, even though it is not used as much as 24-bit true colour.
No matter what the bit depth, all colours are made up of some combination of red, blue and green.
The number of colours an individual pixel is capable of displaying is referred to as its bit depth, or colour depth.
Each individual pixel in an image is made up of a certain number of bits. This number is known as the 'bits per pixel' (bpp) of the image.
A 1bpp image (where only 1 bit of data is dedicated to each pixel) can only display two colours - black or white. This is because each bit can display two colours, so the greater number of bits in a pixel, the greater number of colours. A pixel made up of 8 bits is capable of producing 256 different combinations (each bit can display two colours and 2x2x2x2x2x2x2x2 or 28 adds up to 256). 16-bit images are known as 'high colour', as the maximum amount of colours increases to around 65,000 - not quite 'true colour' but a much wider range of possibilities than 8-bit images. After this comes true colour - the most common on modern displays. 16,777,000 colour combinations are possible with 24-bit images.
A comparison between three versions of the same image, displayed at different bpp's. The finer details in terms of colour and shade become noticeable in the second image and clearly defined in the third.
High definition 'deep colour' is also possible - these images are between 30 and 48 bpp and are capable of displaying over a billion colours. Deep colour is used in high-end graphics software and an increasing number of HD graphics cards are being made with deep colour capability, even though it is not used as much as 24-bit true colour.
No matter what the bit depth, all colours are made up of some combination of red, blue and green.
RGB
RGB is a colour model made up of Red, Blue and Green light - three colours that the human eye is most sensitive to and that the brain mixes together, producing a full range of colours from these three. RGB is an additive colour model as it is made up by adding colours together.
The RGB colour model is used on all electronic displays - computers, mobile phones and TVs are commonly used RGB 'output devices', whose images are shown in RGB. 'Input devices' used to create RGB images include TV and video cameras, scanners and digital cameras, as images captured with these devices are displayed on RGB output devices.
A simplified diagram of the RGB colour model.
Any colour in the spectrum can be created by combining red, blue and green in various proportions. Each colour can range from 0 to 255 in intensity from darkest to lightest. 0 is black and 255 is white light.
Above: A chart showing the levels of RGB required to create different colours.
Below: A full RGB colour spectrum.
Resolution
Resolution is the number of pixels that make up an image or screen display. This determines the quality of the image or display, as an image made up of a larger number of pixels will contain more detail.
The number of pixels that make up the image of a monitor or display screen is called a 'display resolution'. This affects the maximum quality of images displayed on the screen - high definition screens vary from those in standard definition simply because they display more pixels.
Each image is made up of a fixed number of pixels, no matter what device it is displayed on. This is called 'image resolution'.
Multiple variations of the same image, recreated in different resolutions - the higher resolution (number of pixels) in the image, the 'clearer' it appears.
Resolution is usually measured by combining the number of pixels that can be displayed in a row across the screen horizontally with the number of pixels that can appear in one column from vertically (from top-to-bottom) - width x height. For example, widescreen DVDs are displayed in a resolution of 720x480 - that is, 720 pixels across the screen and 480 pixels down. The resolution of a screen can be much less or much more than this: early Video CD was played back in 352x240, whereas IMAX, the largest type of cinema screen, displays in a resolution of approximately 10,000x7000. The maximum resolution capability of a monitor is determined by its size and Bit Rate.
Image Formats: What Pictures Are Made Of
Digital images aren't all the same. Different types of picture (or image formats) exist for different purposes and vary in many ways. All digital images are one of two types - raster (or bitmap) and vector.
Raster Images
A raster image is any that is made up of a grid of pixels - known as a bitmap. Raster images are the most common type of digital image.
In a bitmap, each pixel is a block of RGB colour - the file stores colour data for each pixel and so the larger the image, the more disk space the image
file will take up. For example, a 640 x 480 image requires information to be
stored for 307,200 pixels, while a 3072 x 2048 image needs to store information for a whopping 6,291,456 pixels.
The resolution of a raster image is fixed - if an image is 'scaled up' (increased in size), the individual pixels will become visible as the optimal display resolution for an image is set so that the pixels appear as one consistent image when viewed. This loss of quality when upscaling raster images is known as 'pixelation'.
Large raster images must contain a very high number of pixels and are therefore very large files - not very many can be stored on a computer. It is for this reason that image compression is used to reduce the size of raster images.
Image compression is a way of reducing the size (number of bits or bytes) in an image file without reducing the quality to an unacceptable level. This means that more images can be stored on a computer device, as well as reducing the amount of time it takes to transfer (upload or download) images using the Internet. There are two types of compression: lossy and lossless.
Lossy compression reduces the file in size dramatically and, as a result, causes some loss of quality. This loss may not be important or even noticeable - on most average-sized screens and especially on mobile phones, images are not displayed at 100% resolution and small 'artifacts' (distortions caused by compression) would not be noticeable. Lossy compression of an image is performed by averaging out the colours in an image and 'dropping' the less common colours, replacing them with shades of the more common colours. This is an automated computer process. Where data is lost in an image but no visible change occurs, the compressed image may be referred to as 'visually lossless'.
An example of the drop in quality when an image is subject to high lossy compression. The pixels become more visible and differences between colours are more pronounced.
However, even small losses in quality are sometimes not acceptable when an image is being displayed in a larger form, or when the finer details must be preserved for future editing or display (for example, in digital graphics or medical diagrams). Lossless compression is used in these cases. Lossless compression is performed using more complicated algorithms where the data is, in a way, abbreviated into a code. This reduces the size of a file by as much as possible without causing any distortion, but doesn't remove as much data as lossy compression and still leaves the file size fairly large.
Raster File Types
There are different types of raster image, optimised for different functions. Some are uncompressed bitmap files that give full-quality images, while others utilise lossy or lossless compression. Here are some of the most common raster file types.
JPG/JPEG is the most popular raster graphic file format using effective compression algorithms which enable you to achieve a small file size without unacceptable quality loss. When you save a JPG file you can select a compression level by adjusting the file quality to file size ratio.
In computing, JPEG is a commonly used standard method of lossy compression for photographic images. The file format which employs this compression is commonly also called JPEG; the most common file extensions for this format are .jpeg, .jfif, .jpg, .JPG, or .JPE although .jpg is the most common on all platforms. One of the strong points of JPEG is that its compression ratio is adjustable.This format is especially useful to save the results of photography or graphics work when no further alterations are needed. JPG is most commonly used on web pages (along with GIF and PNG). JPEG files have a bit depth of 24-bits - 8 bits per colour.
GIF (Graphics Interchange Format)
GIF is an acronym for Graphics Interchange Format. The format supports up to 8 bits per pixel for each image, allowing a single image to reference its own palette of up to 256 different colors chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of up to 256 colors for each frame. These palette limitations make the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color.
Although GIF files are unsuitable for use in reproducing images in true colour, they are popular because of their low file size, lossless compression.
PNG (Portable Network Graphics)is a raster graphics file format that supports lossless data compression. PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF) and is the most used lossless image compression format on the Internet. Most liked by the creators of web pages because of its intelligent transparency handling: you can round off the edges meeting the background and use such effects as shadows. PNGs are also preferred over GIFs as they are 24-bit (8 bits per colour). However, this means that the file size is relatively large.
TIF/TIFF (Tagged Image File Format)
Originally created as a standard format for scanners, TIFFs are flexible in that the 'tags' in their file name can contain data alongside the image - for example, data about the size/dimensions of an image. TIFFs can be lossy or lossless (sometimes uncompressed) and have a very high maximum bit depth of 48 bits - 16 bits per colour.
BMP (Bitmap)
The basic raster format. In practice, it is a pure bitmap - an uncompressed grid of pixels with each colour defined. BMP files are unnecessarily large and additionally, they are not supported by all Internet browsers.
BMP images can be 1-bit (Line-art), 4-bits (16 colors for a grayscale image or a duotone image), 8 bits (256 colors for a grayscale image or a duotone image), 16-bits (65,536 colors for a grayscale image or a duotone image) or 24-bits (RGB colour with 8-bits for each primary color - 16,777,000 colours).
Vector Images
Vector images are not made up of a bitmap of pixels. Instead, they are comprised of geometric shapes and lines that can be manipulated or resized without any loss of quality. When a vector object is created using a drawing tool, the data that is created allows for a computer to calculate the dimensions and measurements of the object using mathematical equations. This also means that vector files are very small - the files are made up of equations instead of a bitmap grid with colour data etc. Vector images also support intelligent transparency, like PNGs (vector images can be saved as .png files), making them popular in web design.
The biggest drawback of vector images is that a vector object can only contain solid colours as opposed to raster images, where pixels can create detailed gradients. This limitation means that vector images cannot appear photo-realistic, instead appearing quite cartoon-esque.
When trying to reproduce color on another device, color spaces can show whether you will be able to retain shadow/highlight detail, color saturation, and by how much either will be compromised.
This comparison shows the difference between a magnified element of a raster image, next to a vector version of the same image. The vector image does not pixelate, as it is made of lines and shapes instead of dots and pixels.
The biggest drawback of vector images is that a vector object can only contain solid colours as opposed to raster images, where pixels can create detailed gradients. This limitation means that vector images cannot appear photo-realistic, instead appearing quite cartoon-esque.
This side-by-side comparison shows the raster image on the right recreated as a vector. As you can see, the limitations in colour have made the image look far less realistic.
Colour Space
A colour space is a useful conceptual tool for understanding the color capabilities of a particular device or digital file. The range of colours that a device can display, a camera can capture or a printer can produce is known as the colour space.When trying to reproduce color on another device, color spaces can show whether you will be able to retain shadow/highlight detail, color saturation, and by how much either will be compromised.
A color space relates numbers to actual colors, and is a
three-dimensional object which contains all realizable color
combinations. Similar to how one would organize a paint palette, each
direction in a color space often represents some aspect of color, such
as lightness, saturation or hue (depending on the type of space).
A 3D representation of the RGB colour space.
RGB, described earlier in the article, is the most common colour space in digital graphics - all digital images use some variant of the colour mode. Most RGB variants, like Adobe RGB, are specific to certain pieces of editing software. However, RGB is not widely used outside digital display.
CMYK
CMYK is the colour mode most often used in printing, utilising secondary colours Cyan, Magenta, Yellow and black (referred to as Key to differentiate from Blue in RGB).
The use of these secondary colours in print is because secondary colours are 'subtractive' of light (where primary colours are 'additive'). Monitor displays emit light of various different colours and so a primary colour mode is ideal. In print however, ink subtracts light from white paper and so subtractive secondary colours are clearer in this form.
The difference in colours between CMYK and RGB, and the colours produced when the base colours are mixed.
Colour printers are the main output device for CMYK images and images produced in RGB on a computer should be converted to CMYK before being printed.
Greyscale
The pixels of a greyscale (or 'black and white') image contain only one type of data - intensity (or luminance) information on a scale of 0 to 255. Like in the RGB mode, 0 is black and 255 is white. However, without the colour information found in RGB, the 255 'colours' in between are all shades of grey. This mode is referred to as 'monochrome' and images produced are often called 'black and white' although truly black & white images contain no shades of grey - these are 1 bit per pixel, binary-colour images. Greyscale images can contain a variety of bit depths, but possess no colour information. Greyscale images are usually 8-bit and therefore capable of 256 shades of grey, although this can vary.
An image with a greyscale colour mode.
YUV (Luminance and Chrominance)
The YUV colour space is made up of Luminance (brightness, represented by the letter Y) and Chrominance (colour, represented by letters U and V). This colour mode was created as a method of broadcasting colour television alongside black and white - when television was exclusively broadcast in black and white, the luminance component was the only one broadcast. To add colour capabilities, U and V components that could only be picked up by colour sets were broadcast. It was easier to use the U and V 'colour difference' channels than to broadcast in full RGB, where three sets of data would have to be broadcast alongside the Y data.RGB footage is converted to YUV by adding the values of the red, green and blue signals together, summing the Y value for luminance and the U and V values are measured as the difference between R B and Y values.
The greatest advantage of the YUV colour mode is that remains compatible with analog, black and white televisions while also being capable of displaying full colour RGB image. YUV's reliance on luminance is also of some benefit, as the human eye's perception of detail is based more on luminance than chrominance. This means that the luminance value can cover for loss in U and V data caused by image compression.
YUV is not an absolute colour space. Rather, it is a mode of video display and the precise colours displayed rely on the specific RGB values of the image data processed.
Image Capture
Image capture is the process of an image being taken and saved forever. There are many different ways to capture an image, used for different purposes and resulting in different types of image.Digital Camera
Digital cameras are one of the quickest, easiest ways to capture an image digitally.A digital camera is a similar to a traditional film-based camera, but it captures images digitally. When you take a picture with a digital camera, the light signals are recorded by a sensor called a charged coupled device or CCD, which records the light signals as electronic data. Instead of saving the picture on analog film like traditional cameras, digital cameras record the light captured and translate it into data, then saving a raster image file from the data. Some digital cameras have built-in memory onto which these files are saved, but most use an SD or Compact Flash memory card.
The light intensity of an image is measured by electrodes in the CCD called 'photosites' and the more photosites in the sensor, the finer the image quality - each photosite accounts for a pixel in the final image. The quality of an image captured with a digital camera is measured in 'megapixels' - one megapixel is a million pixels, or a million photosites. Some high-resolution images don't use round numbers of pixels and so most cameras advertise megapixel resolution with decimal points - such as 3.2 megapixels (a 3.2 megapixel image would have a resolution of 2048 × 1536).
Digital cameras have made it simple for anybody to instantly capture images of an increasingly high quality (cameras of up to 36 megapixels are available, with 50 mp devices on the horizon), upload them to computers, edit them or share them on the Internet easily. This technology has made digital imaging and photography accessible to millions of people.
Image Scanner
Image scanners were often used to transfer pictures into digital form before the advent of digital camera technology. Usually referred to simply as 'scanners', they come in many different forms, most commonly desktop 'flatbed' scanners.A flatbed scanner is usually composed of a glass pane, under which there is a bright light which illuminates the pane, and a moving row of CCD sensors (like those found in a digital camera). CCD-type scanners typically contain three rows of sensors with red, green, and blue filters, to pick up colour as well as light. However, early scanners were only capable of picking up black and white images. The document, photograph or object to be 'scanned' is placed on top of the glass pane, with the part to be captured facing down so that the sensors can capture the image.
Other types of computer scanner include sheet-fed scanners, which work on the same principle as their flatbed counterparts except that the document to be scanned is fed into a printer-like device, where it moves past the CCD.
An open flatbed scanner, about to scan a 3D object placed on top of the glass pane. When a 2D object - like a picture or a document - is being scanned, the lid is closed to block outside light from appearing in the final image.
Industrial scanners are used to scan large objects, for example in reverse engineering. Drum scanners vary from desktop scanners in that the sensor used is a photomultiplier tube rather than a CCD. The photomultiplier tube and reflectors are mounted inside a cylindrical drum and spun at a high speed, with the object being scanned on the outside of the see-through drum.
A high-speed drum scanner.
Handheld 'wand' scanners can also be used, although images produced are of a lesser quality than those captured using other scanners. This relatively low-precision method is usually used to quickly scan text documents, as well as being necessary where other scanners are not suitable, for example if the object being scanned has a large surface-area and would not fit into the mechanism of any other type of scanner.
File Storage
Digital image files can be stored virtually in a number of ways. These ways vary according to file size and purpose - compressed JPEG versions of a file are fine when a photograph's intended purpose is for personal use (such as upload to a social networking website or display on a mobile phone) where quality is not of paramount importance. If an image is intended to be displayed at a very high resolution or analysed at full-pixel resolution, maximum quality is needed and files may be too large to store on a personal computer. Images captured with a digital camera are often stored on dedicated data storage devices like memory cards or external hard drives - filling a storage device with large images would not affect its performance like it would if you stored those images on a computer, in which case the computer's lack of memory would slow down performance. CDRs - blank CDs onto which data can be written (and their DVD counterparts) can be used to store uncompressed files independently of a computer - when the files are needed, the disc is inserted into the computer. Another method of storing files is cloud storage, where files are stored on an online server. However, it can be time-consuming to upload larger files to the Internet and so this method is usually used for compressed files.Thanks for reading this article - I'm sure that I covered all you need to know about digital graphics. Check back over the next two weeks for parts 2 and 3 in the 'Interactive Media' series, where I will be talking about web animation and video in interactive media.
No comments:
Post a Comment