Class Notes (1,100,000)
CA (650,000)
Western (60,000)
COMPSCI (600)
Lecture 4

Computer Science 1033A/B Lecture Notes - Lecture 4: Transparency And Translucency, Lossless Compression, Dither


Department
Computer Science
Course Code
COMPSCI 1033A/B
Professor
Vivi Tryphonopolous
Lecture
4

Page:
of 4
""'-
Lecture4
Image
Optimization
Optimization Techniques
1.
File
Formats: choose .jpg or
.gif
2.
Compression:
compress the image data
3. Colour resolution: number of colours used
File
Format
GIF
Properties
Supports max of 8 bit colour scheme (good for clip art,not
photos)
Best
for large
areas
of solid,flat colour Tiny
file
sizes
in comparison with .jpg Summary:smaller
file
sizes
but only 8 bit
colour
JPG
Properties
Stores
full colour
information
Supports max of 24 bits per pixel
(1million
colours}
Best
for blends of colour,softer shadow effects,subtle
changes
in
colour
Not for well defined lines or sharp contrast between colours
D
distorts
them
Summary:full colour scheme but larger file size
Compression
To
reduce file sizeD choose a compression technique appropriate for the
web
Role
of compression is
to:
Reduce
the redundancy of image data
D
gives ability to store or transmit data in an
efficient
form
Compress as
much
as
you
can
without
compromising
quality
Compression Techniques
Lossless
Compress
the original bits and bytes into less bits and bytes
without
losing any of
the
image's original
information
When we reopen the
file,
all
original info is still
there
No
information
is
lost
Gifs
D lossless
compression
o
Does
not get blurry or messy
o
Uses
technique called "L2W" compression
D
reduces file
sizes
of images
by
finding repeated patterns of pixels (ex:12341234 turns into 11)
o
This
compression maintains the image
quality
Lossy
When compression occurs,some of the original
information
is
lost
Discards
selected portions of image that are least missed or
noticed
Cannot get
information
back once
it
is discarded
Quality degrades
JPGs D lossy
compression
o Not all
informatio
n
from the original image is preserved
D
not the same
as
the
original;discards data
o
Degrades
image quality each time you save
o Compression is achieved by
"forgetting"
certain details about the
image,which
the
JPG
will try to fill in later when being displayed
o Human eye more sensitive to brightness details than to colour details
1. The quality of a
JPG
file is proportional to the file size
2. A higher image quality setting has lower compression
value,:.
results
in
less
data being
distorted
Colour
Resolution
Colour
resolution=
bit
depth
Dithering
Definition:juxtaposing
(placing side by side) pixels of two colours to create the
illusion
that a
third
colour is present (grainy
look)
Can lower
download
time
Most
common method
of
reducing
colour range of images down to 256 (or fewer) colours
seen
in 8 bit .gif
images
If an image uses colour hues outside of
browser-safe palette
D
browser
automatically dithers
image into browser safe
colours
Animation
.gif allows for
animation
Don't need plug in for .gif
animation
(universal
format)
Interlacing
When the image is drawn in a series of passes rather than all at the same time (file size
bigger)
How images are
downloaded
to your
screen
Transparency
Allows the page
background
to display
through
the
image
Only
formats
that support
transparency=
GIF
and PNG
Transparent:
every pixel in the image is either
completely
visible or
completely see-through so
that
what's underneath
the image shows
through
PNG
!Portable Network
Graphics)
Developed as a
replacement
for GIF due to legal issues
resulting
from GIF's use
ofthe L2W
compression scheme
Lossless
compression
D
no
discard
Allows for image to have up
to
48 bit
colour
Supports opacity and
translucency
Similar to GIF
Only allows 8 bit
colour
One
transparent colour
Smaller than
GIF
counter parts
PNG-24
Allows 24 bit
colour