GRAPHICS

IMAGE DATA TYPES & FILE

FORMATS
 INTRODUCTION
• In societies such as ours where
communicating information quickly is
crucial, the importance of graphic
elements in multimedia applications is
obviously seen.
• There is a saying that “A picture is worth
a thousand words”.
 Cont…
• This is true because one table, chart,
graphic, or photograph can illustrate
what might take many pages of narrative
text to communicate.

• In the end, the image may still do a

better job of creating a lasting
impression.
 Cont…
• Because of Innovations in technology,
Creating effective and appealing graphics
in any multimedia project requires
efforts, time together with skills in
graphics art and design.
 Digital Graphics
• The term “graphics” refers to any type of
visual representation displayed on digital
systems and screens (computers, phone,
TV etc.), that may be:
Images (scanned/downloaded photos)
Computer generated graphics, for
instance logos, charts, drawings, designs
etc.
 CATEGORIES OF DIGITAL GRAPHICS

• All digital Graphics/Images may fall into

the following categories;
I. Bitmap/Raster
II. Vector
III. Meta
IV. Animated
 I. BITMAP
• If you’ve ever taken or downloaded a
digital photo, you’re already familiar with
bitmap images, even if you weren’t
aware that that’s what digital photos are.
• A bitmap represents an image by treating
the image area as a rectangle, and
dividing up the rectangle into a two-
dimensional array of tiny pixels.
 Cont…
• They store this information in a grid of
points, or pixels, which has a fixed width
and height, and they can store various
range of colors according to the image
type.
• Each pixel specifies a single color value for
the image at that point.
• The size of bitmap image is always
specified as width X height (in numbers of
the pixels).
 Cont…
• For example if you look on any image
stored in your computer will have
dimensions stated like “800 x 998”
• “800 x 998” means that the image has
width of 800 pixels and height of 998
pixels.
• This image has a total of 798,400 pixels
(i.e. 800 x 998=798400 pixel)
 Cont…
This dimension can be used to identify the
actual storage size occupied by the Image
in a computer.
( we shall discuss this later )
 Cont…
• NB: A pixel is a picture element in digital
image.
• Pixels are stored as binary information
(BITS) in the computer
• BIT is the smallest unit of computer storage
(i.e. 0 and 1)
• Therefore each pixel of an image is
represented as a series of bits (0’s and 1’s)
and number of bits used to represent pixel
differs depending on the type of image
 Cont…
• For example; for color images, enough
bits per pixel are needed to represent all
the colors in the image.
• The number of the bits per pixel is called
the depth of the image (Bit depth).
• Bit depth is either the number of bits
used to indicate the color of a single
pixel or the number of bits used for each
color component of a single pixel.
 Cont…
• The physical size of the image (in inches or
centimeters), depends on the resolution of
the device on which the image is
displayed.
• NB: Resolution is a measure of how finely
a device displays graphics with pixels.
• An image will appear smaller on a device
with a higher resolution than on one with
a lower resolution.
 Cont…
• The resolution (of devices used to output
multimedia elements) is usually
measured in DPI (Dots Per Inch).
• Also images has a defined resolution
indicated by Pixels per Inch (PPI)
• The higher the resolution, the higher the
image quality and vice versa.
 Cont…
• Bitmap images have a “resolution”,
which limits the size to which you can
magnify the image without visible
degradation.
• Images with higher numbers of pixels
have higher resolution.
IMAGE RESOLUTION
 Cont…
• Some of the smallest bitmap images you’ll
see are the icons used for programs and
other items in computer user interfaces.
• The size of these bitmaps can be as small
as 16×16 pixels, which provides very little
detail, but is sufficient for images that will
always be viewed in tiny sizes.
• See sample icon &
enlarged icon with pixels seen
 Cont…
• Given that bitmap image files are usually large,
it’s helpful to be able to be able to compress
the pixel map in some way, and there are many
well-known methods for doing this.
• The compromise is that, the more compression
you apply, the worse the image tends to look.
• One of the best-known is JPEG (a standard
created by the Joint Photographic Experts’
Group), which is intended to allow you to
apply variable amounts of compression to
digital photographs.
 Cont…
• Photo-editors or image-editing graphics
software such as Adobe Photoshop and
Corel Photo-Paint are designed for
creating and editing bitmap graphics.
 Bitmap data types
• Bitmap Images can be created by using
different techniques of representation of
data called data type like for black &
white (Two colors), grayscale images
(one color) and colored images (having
multiple colors).
• Based on number of bits per pixel (bpp)
bitmap images can further be classified
into the following types;
 1 bit – image/Binary image
• As we have seen that images are made
up with set of pixels.
• In 1-bit images, each pixel is stored as a
single bit (0 or 1).
• A bit has only two states either on (0) or
off (1) for white or black respectively.
 Cont…
• Therefore, such an image is also referred
to as a binary image, since only two
binary states are available (i.e. 0 & 1).
• 1-bit image is also known as
1-bit monochrome image.
 Cont…
• The clearness or quality of 1-bit image is
very low
• The number of colors that can be
displayed by a bitmap is equal to two
raised to the number of bits per pixel.
• Therefore for 1 – Bit image;
Number of colors = colors used ( black for
1 and 0 for white )
 Cont…
• Binary images are the simplest type of
Images and are frequently used in
applications where the only information
required is general shape or outline for
example in the use of Optical Character
Recognition (OCR).
1 Bit Image
 8-bit Gray level image
• Each pixel of 8-bit gray level image is
represented by a single byte(i.e. 8 bits).
• Therefore each pixel of such image can
hold values between 0 and 255.
• Therefore each pixel has a brightness
value on a scale from black (0 for no
brightness or intensity) to white (255 for
full brightness or intensity).
 Cont…
• The number of bits used for each pixel
determines the number of different gray
levels available.
• As we have seen the typical grayscale
image contains 8 bits per pixel data,
which allows 256 different gray levels.
 Cont…
• For example, a dark pixel might have a
value of 15 and a bright one might be
240.
• 8 bit Gray level images are commonly
known as Grayscale images
• They contain gray level information and
no color information
 Cont…
• Grayscale images are also called
monochromatic, denoting the presence
of only one (mono) color (chrome).
• This format was used initially by early
models of the operating systems UNIX
and the early color Macintosh.
 Cont…
• In applications like medical Imaging and
astronomy, 12 or 16 bits per pixel
images are used.
• These extra gray levels become useful
when a small section of the image is
made much larger to discern details
8 Bit grayscale image
 8-bit color images
• In 8-bit color images, each pixel is
represented by one byte (8 bits), usually
representing RGB (Red, Green and Blue)
color model.
• Therefore for 8 – Bit image;
Number of colors = 256 Shades of RGB
color variations.
• Eight-bit colour stores the colour of each
pixel in eight binary digits (bits) which
gives 256 colors in total
8 BITS COLOR LAYOUT
8 bit color image
 24-bit color images
• In 24-bit color images, each pixel is
represented by three bytes (24 bits),
usually representing RGB (Red, Green
and Blue) color model.
• Therefore for 24 – Bit image;
Number of colors = 16,777,216 Shades
of RGB color variations.
 Cont…
• It provides a method of representing and
storing graphical image information in
RGB color space such that colors,
shades, high shades and hues in large
number of variations, can be displayed
in an image such as in high quality
photo-graphic images or complex
graphics.
 Cont…
• 24 bit color images require large storage
space
• Many monitors can display only 256
different colors at any one time.
Therefore, in this case it is wasteful to
store more than 256 different colors in
an image.
24 BITS COLOR LAYOUT
24-bit color Image
 II. VECTOR GRAPHICS
• Most multimedia authoring systems
provide for use of vector-drawn objects
such as lines, rectangles, ovals,
polygons, and text.
• Vector drawings use mathematical
formulas to draw lines and curves that
can be combined to create an image
from geometric objects such as circles
and polygons.
 Cont…
• Vectors are used to create graphics such
as interface elements (like banners,
buttons) text, line art and detailed
drawings (plans, maps).
• Essentially they are computer generated
drawings.
• Different Effects can be added to vector
graphics to add realism, however, they
need to be converted to bitmaps in order
to do this.
 Cont…
• Also for vector drawings to be displayed on
web pages they need to be converted into
bitmaps.
• Vectors aren’t made up of pixels. Instead,
they are made up of co-ordinates, shapes,
lines, and colour data.
• Therefore they aren’t resolution
dependent.
• It is for this reason that vector graphics can
be scaled without losing their quality.
 Cont…
• Vector graphics are the best choice for
artwork, such as logos
• Computer-aided design (CAD) programs
have traditionally used vector-drawn
object systems for creating the highly
complex and geometric
rendering/drawings needed by
architects and engineers.
 Cont…
• Vector file formats create smaller file
sizes than bitmaps.
• Software used to create vector image
includes, Adobe Illustrator, Corel Draw
etc.
 Cont…
• Common vector file extensions includes:
SVG, EPS, and EMF
SVG (Scalable Vector Graphics) – web-
based vector format
EPS (Encapsulated PostScript) – Adobe-
based vector format
EMF (Enhanced Windows Metafile) –
Microsoft Office-based vector format
Vector image saved as Bitmap
 Bitmap Image file formats
There are many standard formats for
saving bitmaps in disk files. The following
are some of the file formats;
I. GIF - Graphics Interchange Formats
• Is a Bitmap Image format developed on
1987 by team at the Online service
provider (CompuServe).
• GIF is a common format for images that
appear on Web pages.
 Cont…
• GIFs work well for line pictures with blocks
of solid color, and pictures with sharp
boundaries between colors.
• GIFs are compressed, but no information is
lost in the compression process.
• GIFs store at most 8 bits per pixel, so they
are limited to 256 colors.
 Cont…
• GIFs can be animated, which is another
reason they became so successful. Most
banner ads are GIFs.
• GIFs allow transparency that is when you
are creating your image, you can specify
which color is to be transparent.
• This allows the background colors of the
web page to be shown through the image.
ANIMATED GIF IMAGE
 Cont…
• JPEG - Joint Photographic Experts Group
A commonly used compression scheme
for digital images, particularly for those
images produced by digital photography.
Some information is lost in the
compression process (lossy
compression), but often the loss is
imperceptible to the human eye.
Check this compressed bitmap images
 Cont…
• Colour JPEG images store 24 bits per
pixel, so they are capable of displaying
more than 16 million colors.
• There is also a grey scale JPEG format
that stores 8 bits per pixel.
• JPEGs do not support transparency or
animation as GIFs does
 Cont…
• This is the format of choice for nearly all
photograph images on the internet.
Digital cameras save images in a JPEG
format by default.
• It has become the main graphics file
format for world wide web and any
browser can support it without plug-ins.
 Cont…
• PNG- Portable Network Graphics
The PNG format retains many of the
advantages of the GIF format but also
provides capabilities beyond those of GIF.
Like GIF files, PNG files are compressed
with no loss of information (Lossless
compression).
PNG files can store colors with 8, 24, or
48 bits per pixel and gray scales with 1, 2,
4, 8, or 16 bits per pixel
 Cont…
• In contrast, GIF files can use only 1, 2, 4,
or 8 bits per pixel.
• But PNG is the superior to the GIF.
It produces smaller files with more
options for colors.
PNG files can contain gamma correction
and color correction information so that
the images can be accurately rendered
on a variety of display devices
 Cont…
• TIFF- Tagged Image File Format
The TIFF format was developed for
desktop publishing purpose by the Aldus
Corporation in the 1980 and was later
supported by Microsoft.
This type of file is used for high-quality
raster type graphics.
It is a flexible format and supported by
many image editing applications and
wide variety of platforms.
 Cont…
• TIFF can store many different types of
image ranging from 1 bit image,
grayscale image, 8 bit color image, 24 bit
RGB image etc.
• TIFF files originally use lossless
compression. Today TIFF files also use
lossy compression according to the
requirement.
• Therefore, it is very flexible documents
format.
 Cont…
• This file format is suitable when the
output is printed (i.e. best for high-
resolution printing)
• TIFF is widely supported by scanning,
faxing, word processing, optical character
recognition, image manipulation,
desktop publishing, and page-layout
applications.
 Cont…
• EXIF- Exchangeable Image File
Exif is a file format used for photographs
captured by digital cameras.
An Exif file also contains information
about the photograph (date taken,
shutter speed, exposure time, and so on)
and information Notes about the camera
(manufacturer, model, and so on).
 Cont…
• A variety of tags are available to facilitate
higher quality printing, since information
about the camera and picture - taking
condition can be stored and used by printers
for possible color correction algorithms.

• An Exif file contains an image that is

compressed according to the JPEG
specification.
 Cont…
• BMP- Bitmap
• BMP is a standard format used by Microsoft
Windows to store device-independent and
application independent images.
• BMP can store many different type of image:
1 bit image, grayscale image, 8 bit color
image, 24 bit RGB image etc.
• BMP files with 24 bits per pixel are common.
 Cont…
• BMP files are usually not compressed
and, therefore, are not well suited for
transfer across the Internet.
 Other file formats
• PSD - Photoshop
• EPS - Encapsulated Postscript
• WMF- Windows MetaFile