Fundamentals of

Multimedia

2nd Edition 2014

Ze-Nian Li
Mark S. Drew
Jiangchuan Liu

Chapter 3 :
Graphics and Image Data Representations

1
This chapter introduces:
◦ how best to represent the graphics and
image data since it is of crucial importance
in the study of multimedia.

◦ The specifics of file formats for

storing such images are also
discussed

2
3.1 Graphics/Image Data Types
 Table3.1 shows a list of file formats used in
the popular product Adobe Premiere.

 We concentrate on GIF and JPG image file

formats, since the GIF file format is one of the
simplest and contains several fundamental
features.

 andthe JPG file format is arguably the most

important overall.

3
 3.1.1 1-Bit Images
 Images consist of pixels (picture elements in digital
images).
 A 1-bit image (also called binary image) consists of
on and off bits only and thus is the simplest type of
image.
 Each pixel is stored as a single bit (0 or 1)
 Itis also sometimes called a 1-bit monochrome
‫( احادية اللون‬called Lena image by scientists)
image since it contains no color. See Figure in
next slide.
 Monochrome
 1-bit images can be satisfactory for pictures
containing only simple graphics and text.
 fax machines use 1-bit data, so in fact 1-bit
images are still important. 4
 Monochrome 1-bit Lena image
A 640×480 monochrome image requires 38.4 kB of storage

5
 3.1.2 8-Bit Gray-Level
Images
 8-bitimage is one for which each pixel has a gray
value between 0 and 255.
 Each pixel is represented by a single byte.
 The entire image can be thought of as a two-
dimensional array of pixel values referred to as
a bitmap.
 Image resolution refers to the number of pixels
in a digital image (higher resolution always
yields better quality but increases size)

6
Grayscale image of Lena
640×480 grayscale image requires 300kB of storage

7
 3.1.4 24-Bit Color Images
 In a color 24-bit image, each pixel is represented
by three bytes, usually representing RGB.
(0,255, 0)

 Since each value is in the range 0–255, this

format supports 256×256×256, or a total of
16,777,216, possible combined colors; which
increases storage size.

a 640 × 480 24-bit color image would require

921.6 kB of storage. (without any compression
applied)
 Compression is used to decrease the image size
by simply grouping pixels effectively. (chapter
7). 8
 24-bit color image
forestfire.bmp
Microsoft Windows BMP (bitmap) format

9
 3.1.5 Higher Bit-Depth Images
 Insome fields such as medicine (security cameras,
satellite imaging) more accurate images are
required to see the patient’s liver, for example.

 Toget such images, special cameras that view

more than just 3 colors (RGB) are used.

 Such images are called multispectral ‫متعدد‬

‫(االطياف‬more than three colors) or hyperspectral ‫فوق‬
‫(الطيفي‬224 colors for satellite imaging).

10
 3.1.6 8-Bit Color Images
‫ور‬
 . reasonably accurate color images can be obtained‫عقول‬
by quantizing the color information to collapse it ‫مات‬
 Color quantizing example: reducing the number of
colors required to represent a digital image makes
it possible to reduce its file size.
 8-bit color image (so-called 256 colors. Why?) files
use the concept of a lookup table (LUT) to store
color information.
 For example,:
◦ if exactly 23 pixels have RGB values (45, 200, 91)
◦ then store the value 23 in a three-dimensional array, at the
element indexed by the index values [45, 200, 91].
 This data structure is called a color histogram.
 color histogram: is a very useful tool for image
transformation and manipulation in Image
Processing. 11
Notice that the difference between Fig. 3.5a, the 24-bit
image, and Fig. 3.7, the 8-bit image, is reasonably small.

Fig. 3.5a, the 24-bit image

Fig. 3.7, the 8-bit image

12
Another example for difference between Fig. 3.5a, the 24-
bit image, and Fig. 3.7, the 8-bit image, is reasonably
small.

Fig. 3.5a, the 24-bit image

Fig. 3.7, the 8-bit image

13
 3.1.6 8-Bit Color Images
 Note the great savings in space for 8-bit
images over 24-bit ones:
 a 640 × 480 8-bit color image requires only
300 kB of storage,
 compared to 921.6 kB for a color image (again,
without any compression applied).

14
 3.1.7 Color Lookup Tables
 The LUT is often called a palette ‫لوحة‬.
 The idea is to store only the index, or code value,
for each pixel.
 if a pixel stores, say, the value 25 (Figure 3.8), the
meaning is to go to row 25 in a color lookup table
(LUT).

15
•A Color-picker consists of an array of fairly large blocks of color (or a
semi-continuous range of colors) such that a mouse-click will select the
color indicated.
- In reality, a color-picker displays the palette colors associated with index
values from 0 to 255.
- Fig. 3.9 (next slide) displays the concept of a color-picker: if the user selects
the color block with index value 2, then the color meant is cyan, with RGB
values (0, 255, 255).

16
Fig. 3.9: Color-picker for 8-bit color: each block of the
color-picker corresponds to one row of the color LUT

17
3.2 Popular File Formats
• 8-bit GIF : one of the most important formats
because of its historical connection to the WWW
and HTML markup language as the first image
type recognized by net browsers.

• JPEG: currently the most important common file

format.

18
3.2.1 GIF
• GIF standard (Graphics Interchange Format): (We
examine GIF standard because it is so simple! yet contains
many common elements.)
 Limited to 8-bit (256) color images only, which,
while producing acceptable color images, is best suited for
images with few distinctive colors (e.g., graphics or
drawing).

• GIF standard supports interlacing ‫ — تشابك‬successive

display of pixels in widely-spaced rows by a 4-pass display
process. (Figure 3.16, slide 25)
 interlacing allows a quick sketch to appear when a web
browser displays the image, followed by more detailed fill-
‫ تليها عمليات‬،‫ي سمح التداخل بظهور رسم سريع عندما يعرض متصفح الويب الصورة‬
ins. ‫تعبئة أكثر تفصيًال‬

 The JPEG standard (below) has a similar display mode,

denoted progressive mode.
 GIF has two formats GIF87 (standard) and GIF89 supports
simple animation. 19
3.2.1 GIF

20
GIF87
• For the standard specification, the general file format of
a GIF87 file is as in Fig. 3.12.
• The Signature is six bytes
• the Screen Descriptor is a seven-byte
• Local Color Map (if does not exist
A global color map can be defined)
 A GIF87 file can contain more than one image
definition, usually to fit on several different parts
of the screen.
 actual raster data itself is first
compressed using the LZW compression
scheme (see Chap. 7)

Fig. 3.12: GIF file

format. 21
• Screen Descriptor comprises a set of attributes that
belong to every image in the file. According to the
GIF87 standard, it is defined as in Fig. 3.13.
• LSB/ MSB :
Least/Most Significant Byte

 Bit 7 is filled with zeros

Fig. 3.13: GIF screen

descriptor.
22
• Color Map is set up in a very simple fashion as in Fig.
3.14. However, the actual length of the table equals
2(pixel+1) as given in the Screen Descriptor.

Fig. 3.14: GIF color map.

23
• Each image in the file has its own Image Descriptor,
defined as in Fig. 3.15.

Fig. 3.15: GIF image

descriptor.
24
interlace
 If the interlace bit is set to (1), then the local Image
Descriptor, the rows of the image are displayed in a
four-pass sequence, as in Fig. 3.16. (next slide)
 Here, the first pass displays rows 0 and 8, the second
pass displays rows 4 and 12, and so on.

25
Fig. 3.16: GIF 4-pass interlace display row order.

26
3.2.2 JPEG
• JPEG (Joint Photographic Experts Group): The most
important current standard for image compression
(.jpg, .jpeg, .jpe).

 The human vision system has some specific limitations (The

eye–brain system cannot see extremely fine detail; those are
dropped ) and JPEG takes advantage of these to achieve high
rates of compression.

• JPEG allows the user to set a desired level of quality, or

compression ratio (input divided by output).

• As an example, Fig. 3.17 shows our forestfire image, with

a quality factor Q=10%.
◦ - This image is a mere 1.5% of the original size. In comparison, a
JPEG image with Q=75% yields an image size 5.6% of the
original, whereas a GIF version of this image compresses down
to 23.0% of uncompressed image size.
27
A photo of a flower compressed with successively more
lossy compression ratios from left to right.

28
Fig. 3.17: JPEG image with low quality specified by user.

29
Difference between GIF and
GPEG
 The difference between GIF and JPEG is
that GIF is a better choice for computer
graphics with limited color palettes (like
logos, simple cartoons, or line art), while
JPEG is a better format for photographs and
colorful images, and it also looks good when
printed.
 A GIF will never lose its data. It uses lossless
compression, while JPEG uses loss
compression.
 A GIF uploads quickly since these files are
usually low resolution.

30
PNG
• PNG format: standing for Portable Network Graphics —
meant to supersede the GIF standard, and extends it in
important ways.

• Special features of PNG files include:

1. Support for up to 48 bits of color information — a large

increase.

2. Files may contain gamma-correction information for

correct display of color images, as well as alpha-channel
information for such uses as control of transparency.

3. The display progressively displays pixels in a 2-

dimensional fashion by showing a few pixels at a time over
seven passes through each
8 X 8 block of an image.
31
Use PNG format for any image
that needs transparency, or for
images with text & objects with
sharp contrast edges like logos.

32
TIFF: Stands for Tagged Image File Format.
• TIFF: This is used to support for attachment of additional
information (referred to as “tags”) and provides a great
deal of flexibility.
• TIFFs are perfect for retaining lots of impressively detailed
image data because they use a predominately lossless
form of file compression. This makes them a great choice
for professional photographers and editors.
1. The most important tag is a format signifier: what type
of compression etc. is in use in the stored image.
2. TIFF can store many different types of images: 1-bit,
grayscale, 8-bit color, 24-bit RGB, etc.
3. TIFF was originally a lossless format but now a new JPEG
tag allows one to opt for JPEG compression.
4. The TIFF format was developed by the Aldus Corporation
in the 1980's and was later supported by Microsoft.
5. TIFF files store much more image data than their JPEG
example of TIFF images are Scanned documents and
Received faxes
33
3.2.9 PS and PDF
 PostScript is an important language for typesetting, and many
high-end printers have a PostScript interpreter built into them.

 PostScript is a vector-based, rather than pixel based, picture

language: page elements are essentially defined in terms of
vectors.
 PostScript includes vector/structured graphics as well as text
 Several popular graphics programs, such as Adobe Illustrator,
use PostScript.
 Note, however, that the PostScript page description language
does not provide compression; in fact, PostScript files are just
stored as ASCII.
‫ تكمن نقاط قوته في قدرته على جعل‬: vector ‫وهو أحد أنواع ملف رسومات‬ 
‫ مباشرًة‬PS ‫ يمكنك إرسال ملف‬.‫الرسومات الرقمية والنصوص جاهزة للطباعة‬
‫ هناك بعض‬،‫ على الرغم من هذا‬.‫إلى طابعة دون الحاجة إلى فتحه في تطبيق ما‬
‫ مما يجعله أحد أقل أنواع الملفات‬،PS ‫الخيارات المختلفة القليلة فقط لفتح ملف‬
.‫تنوًعا للصور‬

34
3.2.9 PS and PDF
 Therefore, another text + figures language has largely
superseded PostScript is Portable Document Format
(PDF) file format.

 PDF files that do not include images have about the

same compression ratio, while

 For files containing images, PDF may achieve higher

compression ratios by using separate JPEG compression
for the image content

35
End of Chapter 3

36
PNG files almost always offer better compression and a reduced
file size compared to GIF. The PNG format also supports
variable transparency and millions of colors while GIF only
supports 256 colors and does not offer alpha channels.

JPEG format does not support animations, while GIFs support

animations. JPEG is a good choice for photographs and other
images with lots of colors, while GIF is a better choice for
simple images with a limited color palette, such as logos and
icons.

37