Graphics & Images

Table of Content

1. Introduction2. Types of graphics3. Resolution4. Memory/Storage requirement5. Types of images6. Image colour schemes7. Colour dithering8. Image processing9. Graphic file formats

Introduction

• Image is a spatial representation of an object or a scene. (image of a person, place, object)

• Graphic is a broader and general definition which includes: Pictures or Photographs Drawings or Line arts Clip arts Buttons and Banner Charts and graphs Backgrounds Icons

Picture Vs Graphics / ImagePictures:

• Pictures are found in the world which is external to the computers.

Images / Graphics:• Images are the 2-Dimensional digital

representations of pictures found in computers.• Computer attempts to duplicate the “look and

feel” of a picture via storing and processing.• Therefore, an image is a “realistic” version of

the original picture ; dependant on the quality and capabilities of the computer and the graphic artist’s ability to use the software.

Types of Graphic

• Bitmap graphics

• Vector graphics

Bitmap graphics

• The most common and comprehensive form of storage for images on computers is bitmap image.

• Bitmap use combination blocks of different colours (known as pixels) to represent an image. Each pixel is assigned a specific location and colour value.

• There are also called pixelized or raster graphics.

• Software to edit bitmapped graphics are :• Adobe Photoshop• Paint Shop Pro

Bitmap graphics• Advantage

• Can have different textures on the drawings; detailed and comprehensive.

• Disadvantage• Large file size.• Not easy to make

modification to objects/drawings.

• Graphics become "blocky" when the size is increased.

Vector Graphics

• Vector images are based on drawing elements/objects to create an image.

• The elements and objects are stored as a series of command that define the individual objects.

• Packages that allow to create vector graphics include : • Macromedia Freehand MX• Macromedia Flash MX• Adobe Illustrator

Vector GraphicsAdvantage

• Small file size.• Maintain quality as the

size of the graphics is increased.

• Easy to edit the drawings as each object is independent of the other.

Disadvantage• Objects/drawings cannot

have texture; it can only have plain colours or gradients ; limited level of detail that can be presented in an image.

Resolution

There are three types of resolution measuring different aspects of the quality, detail and size of an image:

• Colour resolution• Image resolution• Display resolution

Image Resolution:The term resolution often associated with an image’s degree of detail or quality.

Display Resolution:Resolution can also refer to quality capability of graphic output (monitor).

Colour Resolution / Colour Depth:Colour depth describe the number of bits used to represent the colour of a single pixel.

Image resolution

• Image resolution measures the pixel dimension of an overall image or how many pixel the image has.

• Image resolution is measured in width and height.

• For example, 100 * 100-pixel image has a total of 10,000 pixels.

Display resolution• Display resolution is also measured in pixels in terms of

height and width.

• It simply means how many pixels can be displayed on the computer screen.

• Display resolution normally uses a setting of 640x480(VGA), 800x600 (SVGA), 1024x768, etc.

• You can change the display resolution under Display Properties in Control panel.

• If your image resolution is bigger than the display resolution, the result would be part of the image will be out of the display area.

Memory/Storage requirement

• Factors to consider:• The height of the graphics • The width of the graphics • The colour depth or bit depth

• The file size of a bitmap image (in bytes):

Height X Width X (Colour depth / 8)

Colour Resolution/Colour Depth

• Each pixel can represent at least 2 possible colours or more.

• Colour resolution or Colour depth/channel depth is measured in bits.

Colour Depth Calculation Number of Colours

1 bit4 bits8 bits (1 byte)16 bits (2

bytes)24 bits (3

bytes)

21 = 224 = 1628 = 256216 = 65,536224 = 16,777,216

2 colours16 colours256 colours65,536 colours16,777,216 colours

Binary (Bitonal) Image• These images have two possible

values of pixel intensities: black and white.

• Also called 1-bit monochrome image, since it contains only black and white.

• Typical applications of bitonal images include office/business documents, handwritten text, line graphics, engineering graphics etc.

• The scanned output contains a sequence of black or white pixels. Binary 1 represents a black pixel and binary 0 represents a white pixel.

Grayscale Image• They contain several shades of

grey.

• Typical applications of grayscale images include newspaper photographs (non-color), magnetic resonance images and cat-scans.

• An uncompressed grayscale image

can be represented by n bits per pixel, so the number of gray levels supported will be 2n.

• For example, 8-bit Grayscale Image. It consists of 256 gray levels. A dark pixel might have a pixel value of 0, a bright one might be 255.

Colour Image• They are characterized by the

intensity of three primary colours (RGB).

• For example, 24-bit image or 24 bits per pixel. There are 16,777,216 (224) possible colours. In other words, 8 bits for R(Red), 8 bits for G(Green), 8 bits for B(Blue).

• Since each value is in the range 0-255, this format supports 256 x 256 x 256 or 16,777,216 different colours.

RGBA / 32-bit images• An important point: many 24-bit colour images

are actually stored as 32-bit images, with the extra byte of data for each.

• Allows RGBA colour scheme; Red, Green, Blue, Alpha.

• Pixel used to store an alpha value representing the degree of “transparency”.

Image Colour Schemes

Various Colour Schemes

• Several colour schemes (also called colour space, models or formats) have been developed to represent colour mathematically.

• There are 4 commonly used colour schemes :

• RGB Colour Scheme• CMY or CMYK Colour Scheme• HSB or HSI

(Hue,Saturation,Brightness/Intensity) Colour Scheme

• YUV Colour Scheme

1) RGB Colour Scheme

• Colours are represented by a numeric triplet specifying R, G and B intensities. This model is convenient for CRTs since the numeric values can be easily mapped to voltages for the R, G, and B guns.

• Any colour can be defined by giving its R, G and B values, or coordinates, (red,green,blue). This is referred to as an ordered triplet.

2) CMY/CMYK Colour Scheme• CMYK (Cyan,Magenta,Yellow,Black) scheme is widely used

for colour printing. To print a particular colour on a white page, one must apply inks that subtract (absorb) all colours other than the one desired.

• Cyan, magenta, and yellow are the subtractive primaries and are the complements of red, green and blue. Colour is specified by what is subtracted from white light (which is the sum of R, G and B).

• Cyan subtracts red from white, and so on. Therefore, white can only be generated on white paper. The conversion between RGB and CMY can be done by using :

B

G

R

Y

M

C

1

1

1

CMY/CMYK Colour Scheme

• Theoretically, if Cyan, Magenta, and Yellow are mixed, then all the RGB colours are subtracted, and we get black. However, in practice inks are not pure, hence a special black ink is used.

White

Black

Cyan

Magenta

Yellow

Blue

M

C

Y Red

Green

Additive Mixing• White Light : It consists of energy throughout the visible

light spectrum.

• Primary colours : Red (R), Green (G), and Blue (B) are three primary colours.

• Additive Mixing : All the colours in the spectrum can be created with the primary colours. This is called additive colour property and it works for the mixing of primary colour that are emitting light. Example, mixing R and G yields yellow. When R, G and B colours all mixed together, an entire spectrum of colours can be created.

• Secondary colours : Cyan, Magenta and Yellow (CMY) are secondary colours or subtractive primary colours.

• Subtractive Mixing : Subtractive colour mixing is based on reflective colours rather than emissive colours.

• It generates colour by mixing secondary colours. For example, mixing magenta and yellow yields red.

• In subtractive mixing, unwanted colours are selectively absorbed and the required colour is reflected. The yellow colour absorbs the blue component, and the magenta absorbs the green component, resulting in red.

• Subtractive mixing is used primarily in the printing industry, by printing the three subtractive colours in differing proportions on white paper can generate all the colours in the spectrum.

Subtractive Mixing

Additive and Subtractive Mixing

Cyan

Blue Magenta

Yellow

Green

RedBlack

White

Additive Colour Mixing Subtractive Colour Mixing

R

GB

M

C

YW

3) HSB/HSI Colour Scheme• Computer monitors display colours by emitting colour dots (red,

green, blue).

• Creation of colour is based on function of three characteristics: > hue, saturation & brightness / lightness. (HSB / HSL)

• Colours are represented by a triplet representing hue (hue is dominant colour of a sample and is represented by an angular value varying from red to green to blue at 120° intervals), saturation (purity of the colour) and brightness (luminance, or intensity of the colour).

HSB/HSI Colour Scheme

• Hue: It is the colour sensation produced in an observer due to the presence of certain wavelengths of colour. Each wavelength presents a different hue. Hue is based on a vector value moving from 0 to 360 degrees on a colour wheel.

• Saturation: This is a measure of colour intensity, for example, the difference between red and pink. Although the two colours have the same predominant wavelength, one may have more white colour mixed in with it and hence appear less saturated. (100% = pure colour, 0% = black, white , gray)

• Intensity / Luminance or Brightness : This is a measure of the light emitted or reflected by an object. Certain colours appear brighter than others as the human eye does not respond in the same way to all colours. The human eyes see finer details in image scene more because of brightness variations than because of colour variations.

4) YUV Colour Scheme• This is the basic colour format used by

composite colour TV standards (NTSC, PAL and SECAM).

• Y represents the luminance/brightness and can be thought of as containing black and white or gray-scale information.

• U and V carry the chrominance or colour information. There are a variety of YUV-like colour models.

• The advantage of using YUV for broadcast is that the amount of data needed to define a television picture is greatly reduced.

• The disadvantage is that many colours that appear on a computer display cannot be recreated on TV.

Colour Dithering• Usually, digitised images are 24 bit,

16 million colour depth.

• If display system is limited to less than 16 million colours, the image must be transformed for display in the lesser colour environment (colour dithering).

• Colour Dithering – the process through which colours are changed to meet the closest available colour based on the available palette.

• Colours are substituted with closest available colours (output device).

• The quality of dithering will depend on the algorithm used to select the closest colour.

Image Processing

Image Processing

• Analyzing and manipulating images with a computer. Image processing generally involves three steps:

• 1. Import an image with an optical scanner or directly through digital photography.

• 2. Manipulate or analyze the image in some way. This

stage can include image enhancement and data compression.

• 3. Output the result. The result might be the image altered in some way.

Image Processing Techniques• Image processing operations may operate directly on

pixel data or on higher level features such as edges, surfaces, and volumes.

• Image processing operations may be roughly divided into six categories.

- Editing- Point operations- Filtering- Compositing- Geometric transformations- Conversions

• Support for a variety of image operations is now becoming available in page layout and paint programs (such as Photoshop).

1) Editing

• The most basic operation is changing individual pixels.

• Image editors also support cutting, copying, and pasting selected groups of pixel. A selection might be a simple rectangular sub-image or an arbitrarily shaped region.

• Selections are either drawn by the user or calculated by software (for instance, by examining colour differences between neighboring pixels).

2) Point Operations• A point operation consists of applying a function to every pixel

in an image (or selection).

• The function is such that in calculating a new pixel value, the only image data used is the pixel’s current value and exclude the neighboring pixels.

• Examples include:

• Thresholding: A pixel is set to 1 or 0 depending upon whether it is above or below the threshold value. This creates monochrome (binary) images which are often used as masks when compositing*.

* Compositing: creating new images or moving images by combining images from different

sources – like real- world digital video, film, synthetic 3-D imagery, 2-D animations, painted backdrops, digital still photographs, and text.

• colour correction: An image may be modified to increase or reduce contrast, brightness, and to strengthen or weaken particular colours.

3) Filtering

• Filter operations, like point operation, involve applying a function to every pixel in an image or selection.

• The function determines a pixel’s new value based on its current value and that of neighboring pixels.

• Depending on the definition of the function, filtering is used to blur or sharpen the image, introduce distortions, and produce a variety of special effects.

4) Compositing

• Image compositing is the combination of two or more images to produce a new image.

• Alpha channels are frequently used to control blending and masking.

• In general, compositing is specified by mathematical relationship between the various images. For instance one image might be produced from the sum of two existing images.

• A very large variety of effects are possible.

5) Geometric Transformations

• Basic geometric transformations include displacing, rotating, mirroring, and scaling an image.

• Other geometric transformations include skewing (slanting) and warping (an example of warping is mapping a rectangular selection to an arbitrary four-sided polygon)

6) Conversions• With the variety of image formats available, there

is a frequent need to convert from one format to another.

• Fortunately, there are a number of public domain software packages which handle many format conversion tasks. In addition, image processing software will usually import and export images in a number of formats.

• Besides format conversion, there are other operations that can be considered forms of conversion. These include image compression or decompression, changing colour schemes (or models) and changing image depth or resolution.

• Due to the number of choices available in determining image representation, it is not surprising that a number of image formats have evolved. Some examples of image file formats used for storing images are

• GIF (Graphics Interchange Format) • Bitmap • PostScript • JPEG • TIFF (Tagged Image File Format) • TGA (often called Targa)• PNG, and etc.

Graphic File formats

Graphics Interchange Format (GIF)• 8-bit per pixel, bitmap image format commonly used by the world

wide web

• Uses lossless compression technique

• Compress line art well

• Image can have transparent portion

• Interlaced images possible

• Animation possible (Jasc Animation Shop )

• Can only have a maximum of 256 colours

• Does not compress photographs well

• Copyrighted format such that developers must pay royalty

Windows Bitmap (BMP)• Bitmapped Graphics Format

• Most common format containing pixel by pixel value

• Platform independent

• Support up to 24-bit colour depth

• No compression

• A 32-bit version with integrated alpha channel has been introduced with Windows XP. (support transparency)

• No animation

Joint Photographic Expert Group (JPEG)• Commonly used standard method of compression for

photographic images

• Support a maximum of 16.7 million colours

• Compresses photographs well

• Possible to select compression ratio versus quality

• Progressive (interlaced) images possible

• Lossy compression technique: Losses some image information

• Degradation of image possible with repeated editing and saving

• No transparency

• No animation

Portable Network Graphic (PNG)

• No colour information lost

• Can use all colour depth - supports more than 16.7 million colours

• Compresses well- Lossless Compression Technique

• Image can have transparent portion

• No animation

Other Graphic File formats• RAW Graphics File Format (.raw)

A flexible basic file format for transferring files between applications and computer platforms. This format consists of a stream of bytes describing the colour information in the file.

• Tagged Image File Format (.tif, .tiff)TIFF is mainly used for exchanging documents between different applications and different computer platforms. It supports the LZW method compression for image types.

• Truevision Targa (.tga)Developed by Truevision Inc. TGA files is a file format that will support images suitable for display on Targa hardware but is supported by many applications on a wide range of platforms.

• Z Soft Paintbrush (.pcx)Bitmap graphics file format, originally developed by Z-Soft for use with PC-Paintbrush. This file format is now used and generated by many applications and scanners.

COMMON VECTOR FORMATS 

• Adobe Illustrator file (.ai) • CORELDraw file (.cdr) • Enhance Metafile (.emf)• Encapsulated PostScript file (.ps)• Macromedia FreeHand file (.fh)• Macintosh PICT (.pic or .pct)• ShockWave Flash (.swf)• Scaleable Vector Graphic (.svg)  • Windows Metafiles (.wmf)

Summary1. Types of graphics

- bitmap graphic- vector graphic

2. Resolution- Image resolution- Display resolution- Colour resolution

3. Graphic file size = Height X Width X (Colour depth / 8)4. Types of images

- Binary/Bitonal image- Grayscale image- Colour image- RGBA/32-bit image

Summary5. Image colour schemes

- RGB colour scheme- CMY/CMYK colour scheme- HSB/HSI colour scheme- YUV colour scheme6. Colour dithering is the process through which colours are changed to meet the closest available colour based on the available

palette. 7. Image processing techniques:- Editing- Point operations- Filtering- Compositing- Geometric transformations- Conversions