Multimedia – Graphics

AND Image Types

Outline
 Why multi-media?
– Different multi-media formats
 True color Bitmap
 Color Palette, Gamma, Dithering
 Lossless & Lossy compression
 GIF, JPEG, PNG formats
 Web graphics tips
 Summary
CS118 – Web Engineering 2
Multimedia Formats
File Format Type of File Filename
Extension
Sun Systems audio .au
sound
Windows sound audio .wav
Audio interchange audio .aiff, .aifc
RealAudio audio .ra, .ram
stream
CompuServe GIF graphics .gif
JPEG graphics .jpg, .jpeg
Windows Bitmap graphics .bmp
QuickTime video .mov, .moov, .qt
Video for Windows video
CS118 – Web Engineering 3 .avi
Bitmaps, Pixels &
Colors
 The colored dots that make up a bitmap are properly called
"pixels".
 Web pages are measured in Pixels but not in inches, picas.
 In addition to providing your eyes with infinitely small details,
the analog world presents it with images having the potential
for an infinite number of possible colors.
 Color is represented on a computer by using varying amounts
of red, green and blue light. These are the primary colors of
what's called "additive" color - by adding percentages of red,
green and blue, any color can be created.
 In the simplest sort of bitmapped image, each pixel is
represented by three numbers to store the amounts of red,
green and blue light that define the color of the pixel in
question.

CS118 – Web Engineering 4

True Color Bitmap
 The smallest useful object for storing numbers on a
computer is a byte.
 In this sort of bitmap, each pixel requires one byte
for each color index for a total of three bytes per
pixel.
 As a byte represents eight bits, each pixel requires
24 bits to store all its color information.
 This defines the maximum number of discrete
colors this sort of bitmap can represent as 224, or
16,777,216.
 Such graphics are referred to as “True Color"
images, or just as "24-bit" graphics.
CS118 – Web Engineering 5
Size consideration in a
true-colored bitmap image
 The lowest resolution for a monitor
displaying a Windows desktop is 640 by 480
pixels.
 In a bitmap of this resolution, then, there
would be three bytes per pixel, for a total of
640 x 480 x 3 bytes, or about 900 kilobytes.
 Bitmapped graphics are huge entities, and
they become huger still as they get better
looking.
CS118 – Web Engineering 6
Bit-Depth = Color-
Depth
 Number of Colors = 2^(Bit-depth)
 Bit-depth is the number of bits.
– It is also called “Color resolution”.

Bit depth Color resolution Calcuation

1-bit 2 colors 2^1 = 2
2-bit 4 colors 2^2 = 4
3-bit 8 colors 2^3 = 8
4-bit 16 colors 2^4 = 16
8-bits 256 colors 2^8 = 256
16-bits 65,536 colors 2^16 = 65536
24-bits 16,777,215 colors 2^24 = 16.7
million
CS118 – Web Engineering 7
8-bit and 24-bit photos
 Can you see the difference?

CS118 – Web Engineering 8

Color Palettes
 Photorealistic images look best if they're stored in a
format which allows them to be reproduced with as
many of the 16,777,216 colours in a computer.
However, the resulting file size may be prohibitively
large, especially when non-lossy formats are used.
 For practical purposes, the next step down from a file
which can store images having a maximum of
16,777,216 colours, is one which can store images
having a maximum of 256 colours.
 Such files are referred to as using "palette-colour“.
The colours in a palette-colour file are derived from a
potential palette of 16,777,216 colours, but no more
than 256 of them can be used in any one image.
CS118 – Web Engineering 9
The Web Palette
 Color in Browser – 24-bit color displays
on an 8-bit monitor display.
 Need a common palette (Web Palette)
for browser, guarantees the image will
look the same on different platforms.
 If the browser is in 24-bit display, the
palette does not affect the images.
 Web Palette consists of 216 colors
 Also called: Web-safe Palette, Non-
dithering Palette, 6x6x6 cube.
CS118 – Web Engineering 10
 Which Color Palette?
Black (0,0,0) Blue (0,0,255)

Why
00,33,66,
99,CC,FF?
Green (0,255,0)

Which one is
(99,FF,CC),
(153,255,204
)?
Red (255,0,0)

White
(FF,FF,FF)
(255,255,255)
CS118 – Web Engineering 11
6x6x6 Color Palette

CS118 – Web Engineering 12

True Color (RGB)
“Palette”

CS118 – Web Engineering 13

Standard Web Palette

CS118 – Web Engineering 14

Define RGB Values
 Decimal
– Ranging from 0 to 255.
– 51-51-255 means red value is 51, green value is
51, blue value is 255.
 Hexadecimal
– Base-16 number system
– Only six characters to describe RGB color.
– 51-51-255 is 3333FF.
 Percentage
– 51-51-51 is 20%-20%-100%
– 00,33,66,99,CC,FF – 0%,20%,40%,60%,80%,100%
– Some old Macintosh programs use it.

CS118 – Web Engineering 15

Gamma
 Refers to the overall brightness of the display
of a computer monitor.
 The relationship of voltage and the light
intensity.
 Default gamma setting varies from platform to
platform
– Macintosh – 1.8 Gamma
– PC – 2.2 Gamma
– UNIX – 2.4 Gamma
 The higher the gamma value, the darker the
display.
 Image created on PC looks wash out on
Macintosh.
CS118 – Web Engineering 16
Gamma Control

Different Gamma Value

CS118 – Web Engineering 17

Gamma Value

 Gamma: 2.4

 Gamma: 1.8

 Gamma: 1.0

CS118 – Web Engineering 18

Dithering
 256 colours are not sufficient to represent a
photorealistic image so it looks photorealistic.
 Browsers approximate a color by dithering.
 There is a way to cheat around this problem -
photorealistic images can be dithered to 256
colours to create a convincing simulation of all their
colours.
 Dithering involves using patterns of alternating
colored dots to simulate more colors than are
actually available.
 Dithering creates precisely the sort of images that
compress very badly.
CS118 – Web Engineering 19
Dithering How to

CS118 – Web Engineering 20

Dithering Example
 No dithering and dithering
 Which one is better?

CS118 – Web Engineering 21

Vector Graphics
 In addition to bitmap graphics, there are vector
graphics.
 Vector graphics define pictures as collections of lines,
ellipses, triangles, polygons and other basic graphic
"primitives."
 Vector graphics are limited to storing mechanical art
– they cannot handle photo realistic subject.
 Vector graphic formats include
– Encapsulated PostScript files, which use the extension EPS,
– Corel Draw files, which use the extension CDR,
– AutoCAD drawings, which use the extension DXF.

CS118 – Web Engineering 22

Vector Graphics
 Scaling vector graphics

CS118 – Web Engineering 23

Bitmap vs. Vector
graphics

CS118 – Web Engineering 24

Bitmap and Vector
graphics file format
 Vector-based files are more suitable for
illustrations that require precise
measurements.
– File names for vector-based images usually
consist of extensions such as *.EPS, *.AI, *CDR,
or *.DWG.
 Bitmap-based files are more suitable for
photo-realistic images that require complex
color variations.
– File names for bitmap-based images usually
consist of extensions such as *.PSD, *.JPG, *GIF,
*.TIF, or *.BMP.
CS118 – Web Engineering 25
Break Time – 10
minutes

26
Optimizing Web
Graphics
 According to the compression method used, graphic
file formats can be regarded as being of three types.
– Compression works by finding areas in your graphics which
are all the same color and replacing them with notes which
say, in effect "this area is all the same color."
 The first type stores graphics uncompressed.
– The final file size will typically be a bit larger than the size of
the graphic stored in it, allowing for a bit of extra space for
internal housekeeping for the file.
– Windows BMP (.bmp) files are an example of this sort of
format.

CS118 – Web Engineering 27

Lossless Compression
 The second type is called "non-lossy“
or “lossless” compression formats.
– Whatever gets stored in them will be
identical to what emerges from a lossless
file when it's unpacked.
– Most graphic formats use lossless
compression - the GIF and PCX formats
are among them.

CS118 – Web Engineering 28

Lossy Compression
 Lossy compression seeks to improve upon the
compression of the graphics it deals with by throwing
away some of the details in your source images to
create more areas which are all the same colour.
 Having done so, lossy compression can typically
improve upon the file compression offered by the non-
lossy formats.
 Examples of lossy image file format are JPEG, PIC, and
ART.
 Lossy compression allows you to specify the amount of
detail to be discarded when a graphic is compressed.
This level of image degradation is called the “quality
factor“.
CS118 – Web Engineering 29
Quality Comparison

BMP GIF JPG JPG

65854 15628 100% 75%
21162 6745

JPG JPG JPG JPG

50% 25% 10% 5%
4766 3407 2251 1173

CS118 – Web Engineering 30

GIF Format
 GIF – Graphics Interchange Format
 The GIF format is one of the most commonly used
graphic file formats, especially on the Internet.
 The GIF format is exceedingly useful in that it can
contain animations. Its internal structure is such that
it can store multiple images and the controls to
make them appear as real time animation
– animated GIF.
 The GIF format also allows a special color as to be
specified as "using the background." This results in
the image looks like transparent
– transparent GIF.
CS118 – Web Engineering 31
Animated GIF
 Advantages:
– No need other software or plugins
– GIF is the standard format on the Web.
– GIF animated tools are available to use.
 The file contains layered frames on top
of each other.
 Tips:
– Avoid more than one animated GIF on a
page.
– Avoid animated GIF on text-rich pages.
– Examine the pause between repetitions.
CS118 – Web Engineering 32
Animated GIF

CS118 – Web Engineering 33

GIF Format
 GIF is indexed color image.
– The color of the image is indexed in a palette (a color
table).
 The GIF format is only capable of supporting a
maximum of 256 colors. This means that you
cannot convert directly from a 24 bit file, such as a
JPEG, to the GIF format.
– You need to convert a 24-bit image to Indexed Color mode
first.
– Reduce the number of colors to a palette of 256 or less.
– Create an “adaptive” palette – a custom palette generated
by the most commonly used color in the image.

CS118 – Web Engineering 34

Color Map
 The arrangement of pixels are
specified by the locations in a table.

CS118 – Web Engineering 35

GIF Format
 The internal compression algorithm used by GIF is
called the LZW (Lempel-Zev-Welch), which is
patented by Unisys Corporation.
– It is a “lossless” compression.
– No image information is lost during compression process.
– Take advantages of repetition in data streams.
 Question: When should we use GIF?
– Logos, line art, icons, cartoon-like illustrations.
– Majority is flat colors.
– GIF is the best choice.

CS118 – Web Engineering 36

Interlacing
 Normal GIF displays one row of pixels
at a time, from top to bottom.
– Wait a long time for a slow connection.
 GIF87a and GIF89a support interlacing.
– Display in 4 passes
 1 pass: appearance of blurry mosaic (12.5%)
 2 pass: fill more data to the image (25%)
 3 pass: more data (50%)
 4 pass: fill up the whole image (100%)
 Gives the viewer information about the
image quickly: Example
CS118 – Web Engineering 37
Interlaced Image

CS118 – Web Engineering 38

Interlacing Images

CS118 – Web Engineering 39

Transparency GIF
 The image can be shapes other
than rectangles.
 One position of the color palette
is designated as “Transparent”.
 All pixels of the image that have
this particular color index will be
painted as transparent when
viewing.
CS118 – Web Engineering 40
Transparency GIF

Not a transparent GIF

a transparent GIF

CS118 – Web Engineering 41

JPEG Format
 JPEG – Joint Photographic Experts Group
 The JPEG format uses "lossy" compression to get more graphics into
a smaller file than would otherwise be possible.
 There are a number of things that may not be apparent in using
JPEG files, however, and which might make your use of them less
than optimum.
 An image written to the JPEG format will be degraded.
 The amount of degradation, the "quality factor," can usually be set in
a graphics software.
– If the value is set to 100, almost no degradation will occur when an image
is written to a JPEG file. Of course, the compression of the resulting file
will not be significant.
– If it is set to a value close to zero, the resulting image will be a very small
file but unrecognizable.
– The default value of 75 is usually a good compromise.

CS118 – Web Engineering 42

Progressive JPEG
 There are two types of JPEG files extant as of this
writing, called "sequential" and "progressive".
– A sequential JPEG file stores its image as a simple
bitmap.
– A progressive JPEG files stores its image such that it can
appear initially out of focus when it begins to download to
a web page, and resolve itself as more of the image is
received by your web browser.
 Advantage: Provide indication of the whole image to
the viewer before the entired image is loaded.
 Disadvantage: Require more computational power to
display.

CS118 – Web Engineering 43

Progressive JPEG

CS118 – Web Engineering 44

Photoshop and Corel
PhotoPaint Quality
Setting

CS118 – Web Engineering 45

GIF versus JPEG
GIF JPEG

Best Line Art, Image Photographs, Image

application with few color text with many colors
How to reduce Interlace Interlace
display time? (Progressive)
Display speed Fast Slower, more
computation
Benefits Transparency, Greatest compress for
Animation photographs, more
color
Max. color 256 16.7 million

CS118 – Web Engineering 46

PNG Format
 Portable Network Graphic (PNG)
which is pronounced as “Ping”.
 Alternative to GIF, a lossless
compression scheme is used.
 Support three image type: true
color, grayscale, palette-based (8-
bit).
– JPEG supports the first 2.
– GIF supports the 3rd one.
CS118 – Web Engineering 47
PNG Format
 Advantages
– Better Compression
– Improve Interlacing.
– True Color and Transparency
 Support 16-bit (Grey scale) or 48-bit (True Color)
 16-bit for alpha channel (Transparency).
– Gamma storage
 Store the gamma setting of the platform of the
creator.
 Disadvantages
– Not support by old browsers (Netscape 2,3,4 and IE
2,3,4)
CS118 – Web Engineering 48
PNG Format
 PNG's 2D interlacing (left) compared with GIF's 1D interlacing
(right)

CS118 – Web Engineering 49

Format Comparison

Format Compression Ratio

GIF 4:1 – 10:1
JPEG (HQ) 10:1 – 20:1 (no loss
image)
JPEG (LQ) 60:1 – 100:1 (previews)
PNG 10-30% smaller than GIF

CS118 – Web Engineering 50

Format Comparison

CS118 – Web Engineering 51

Other Formats
 JPEG 2000 – New JPEG specification,
lossy to lossless compression, wavelet
transform, superior compression.
 ART – built-in color reduction, dither,
gamma correction.
 Wavelet – transform an image as a
frequency representation, like waves.
 Bravo – multi-platform 2D engine of
Adobe’s graphic format.
 FlashPix – developed by Kodak, HP, ...
CS118 – Web Engineering 52
Optimizing Web
Graphics – Tips for
small files
 Minimize the dimension and maximum crop.
 Reduce the number of color used.
 Choose the color from the non-dithering
palette.
 Use aliased fonts, anti-aliasing increase
size.
 Use flat color, avoid gradation color.
 Reduce to 72dpi in the final step.
 Use multiple small images, other than a
large image.
CS118 – Web Engineering 53
Web Graphics Tips
 Edit an existing GIF image
– Open GIF in the editing tool
– Change it to RGB mode
– Edit the image
– Change it back to indexed image
– Save and export to GIF format
 Resizing tips
– Convert to RGB before resizing
– Don’t enlarge the image
– Incrementally resize the image smaller.
CS118 – Web Engineering 54
Graphical Tools
 Fireworks – by macromedia
 Photoshop / Imageready – by
adobe
 PhotoImpact – by Ulead
 Paint Shop Pro – by Jasc
 ProJPEG / PhotoGIF – by BoxTop

CS118 – Web Engineering 55

References
 Websafe Color Palette?
 Materials extracted from “Introduction to
Graphics” published by Alchemy Mindworks
Inc. http://www.mindworkshop.com
 PNG Introduction
 Tuning your Image for the Web
 Web Graphics
 Optimizing Web Graphics

CS118 – Web Engineering 56