Graphics & Images
Table of Content
1.
2.
3.
4.
5.
6.
7.
8.
9.
Introduction
Types of graphics
Resolution
Memory/Storage requirement
Types of images
Image colour schemes
Colour dithering
Image processing
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 / Image
Pictures:
• 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 Graphics
Advantage
• 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 bit
4 bits
8 bits (1 byte)
16 bits (2 bytes)
24 bits (3 bytes)
21 = 2
24 = 16
28 = 256
216 = 65,536
224 = 16,777,216
2 colours
16 colours
256 colours
65,536 colours
16,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 :  C  1  R 

M

 Y
    
 1  G
    
 1  B 
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.
Yellow
Y
Green
Black
White
C
Cyan
Red
Blue
M
Magenta
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.
Subtractive Mixing
• 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.
Additive and Subtractive Mixing
Additive Colour Mixing
Subtractive Colour Mixing
R
Yellow
M
Green
Y
W
B
C
Cyan
Black
Red
G
Blue
White
Magenta
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 realworld 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.
Graphic File formats
• 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.
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)
Summary
1. 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
Summary
5. Image colour schemes
- RGB colour scheme
- CMY/CMYK colour scheme
- HSB/HSI colour scheme
- YUV colour scheme
6. 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