Lecture #4 GRAPHICS Continued: Multimedia and Communication

Multimedia and Communication
Lecture #4
GRAPHICS continued
Lecture Today
LAST LECTURE TODAY’S LECTURE

Intro to Graphics •Graphic Optimization Techniques
• Types of Graphics •Explore .gif, .jpg, .png
• Bitmapped vs Vector •File Resolution, File Size,
• Graphics Attributes File Formats
• Image Resolution, Image Bit Depth •Compression Techniques
• File Formats –
• Bit-mapped: .jpg, .gif, .tiff, .eps, .bmp
• Vector-based: .eps, .cdr, .drw  Image file size
 Why we need compression
• Sources of Graphics  Lossy vs. Lossless
•scanner, digital camera, Internet
• Graphics Software  File formats
• Illustration - Draw programs  GIF
- Vector-based images  JPG
• Photo Image Editors – Paint programs
- Bitmapped images  PNG
 Transparency
 Help on how to hand in
assignment 1
Types of Graphics
REVIEW Graphics are categorized as being either:

Bitmap or Vector
Affects how the graphics are

displayed on a computer screen
QUALITY
FILE SIZE
TIME to DISPLAY GRAPHICS
How are Images Used?
For PRINTING For Web Page

in Flyer or Magazine
#1 ________
#1 _________
#2 _________
#2 __________
( doesn’t matter ) DOWNLOAD
SPEED
On the Web it's survival
of the fastest...
… Don't make me wait!
OBJECTIVE ON THE INTERNET CHALLENGE:

Make image have:
Download the website • smaller file size
as quickly as possible • keep the Quality
• download fast
SPEED
HOW?
File Size Quality OPTIMIZE the image!

Reduce the
download time
How long will it take that image to download if
we are using it in a webpage?
 If the client is using high

speed connect at  33 Seconds
1500 kilobits per second?
 If the client is on a modem

that is 56 kilobits per sec  860 Seconds
or 14.33
 On a really old modem that Minutes
is 28.8 kilobits per sec?
 1672 Seconds
or 28.66
Minutes
EXAMPLE 1: EXAMPLE 2:
100 by 100 pixels

(30KB)
200 by 200 pixels

(118KB)
PROBLEM:
-Image size isn’t appropriate
-Doesn’t look good
-But Downloads fast because it is small
SOLUTION:
-choose the appropriate size needed
- and then use ___________________
Image Optimization
OPTIMIZE IMAGES for the Web!
GOAL: Download web page fast

HOW?
Smaller file size WITHOUT compromising quality
(Assumption: we are not resizing the image)
Optimization Techniques:
1. FILE FORMATS ____________________________
2. COMPRESSION ____________________________
3. COLOR RESOLUTION ________________________

Image Optimization – File Format
TO Reduce FILE SIZE
CHOOSE a FILE FORMAT

appropriate for the web
Image Optimization – File Format
But …
FILE Formats acceptable on web Which format is the
• .gif best for the Web?
• .jpg, .jpeg
Quality, download
• .png
speed
Image Optimization
File Format- .gif
.gif
.GIF Properties:
• Graphics Interchange Format
• Common image format used on the internet
• Cross platform
• Supports a max of 8-bit color scheme

• 8 bits/pixel (28 =_________ colors)
.jpg
• thus _____________ but not good for photos
• Best for __________________________

Uses: illustrations, logos, text as graphics, cartoons, buttons
• Tiny file sizes in comparison with .jpg
• Saving an image with 24 bit colour as a gif will lower the .jpg
quality the first time you convert it to a gif
• Summary: Smaller file sizes but 256 colors

Image Optimization
File Format- .gif
 Allows for animation
 Don’t need a plug in for gif animation!
 Works in all browsers, universal format!
 What’s lacking in all these animations?
Instructions on how to
make this one in Photoshop
Image Optimization
File Format- .jpg
.gif
.JPG, .JPEG
• Joint Photographic Experts Group
• Common image format used on the internet
• Cross platform
• JPEG stores full color information:

• Supports max of ___________________________
• Good for photos computer games, screenshots, stills
from a movie, etc .jpg
• Best for blends of color, softer shadow effects, subtle
changes in color
• Not for ________________ or _____________between
colours
• Larger file sizes in comparison with .gif

(because of bit depth 2 24)
• Larger file sizes but Full color scheme!
Image Optimization – File Formats
.gif is the .gif and

Which .jpg
.jpg?
1. .jpg -
2. .gif -
Image Optimization – Compression
TO Reduce FILE SIZE
CHOOSE a COMPRESSION
TECHNIQUE
appropriate for the web
A Real World
Example of
Role of Compression is to:
Compression
• Reduce the redundancy of the image
:
data in order to be able to store or
http://www.yo
transmit data in an efficient form
utube.com/wa
• Compress as much as you can
tch?v=I5eypkl
WITHOUT sacrificing Quality
yjiY
(by losing bits information)
Image Optimization: Goal:
Reduce file
COMPRESSION TECHNIQUES size
Let’s take a picture:

Dimensions: 200 pixels by 200 pixels
What is the File Size?

The uncompressed image that is:
•200 by 200 pixels
•True Colour (16 million colours  <R,G,B>)
Thus uncompressed file size

= (image dimensions) x (<R,G,B> bits)
= 200 * 200 * 3 bytes = 120,000 bytes
SO HOW DOES
To express it in KB
COMPRESSION
If 1024 bytes = 1 KB
WORK?
Then 120,000 / 1024 = 117.2 Kilobytes (KB)
Image Optimization: Goal: Reduce
file size
COMPRESSION TECHNIQUES
Lossless: Lossy:
Every time you do a File > Save Every time you do a File > Save
 Compress the original bits and
bytes into less bits and bytes  When compression occurs,
______________ any of the some of the original
information is ________
original information about the
IMAGE (how? will see later)  _________________
(that are least missed or
 When we reopen the file, all the noticed) of the image
original information about the
 CANNOT GET THIS INFO BACK
picture is still there! ONCE IT IS DISCARDED
 NO INFORMATION IS _________
Image Optimization: Goal:
Reduce file
COMPRESSION TECHNIQUES size
 Each different type of image file format represents the use of a

different compression algorithm
 Common compressed algorithms .gif .jpg .png
Uncompressed
file formats:
- .bmp (for Windows)
- raw (common on
digital cameras)
.GIF .JPG
•“_________” compression •“_________” compression
• No data is discarded •Data is discarded
during compression each time file is compressed
•QUALITY IS KEPT •QUALITY DEGRADES
Image Optimization:
COMPRESSION TECHNIQUES - Lossless
Goal:
GIFs – “Lossless “ compression Reduce file
 does not get blurry or messy size
 uses a simple technique called LZW compression to reduce the

file sizes of images by finding ___________________
 this compression never degrades the image quality.
NO DISCARD
OF DATA
SAVE SAVE
& RE-OPEN & RE-OPEN
Image Optimization:
COMPRESSION TECHNIQUES - Lossless
One Algorithm for .gif compression

 Looks for patterns
Ex. 123451234512345
 If “1” represents pattern 12345
 Compresses it to “111”
 Builds a decoding hash table

0 13245 Pattern:
1 22345 13245234232234511223
2 23423
3 11223
Etc. 0213
20
Image Optimization:
COMPRESSION TECHNIQUES - Lossy
LOW
0% compression
= 100% quality
JPGs – “Lossy “ compression
 when you save an image as a JPEG file, not all of
the information in the original image is preserved
– not the same as the original DISCARDS DATA
 _________ the image quality each time you save
 Compression is achieved by ‘_________’ certain

details about the image, which the JPG will then try
to fill in later when it is being displayed HIGH
95% compression
= 5% quality
How does it know what to discard?
Image Optimization:
How does a JPEG perform

compression?
 How do our eyes see images?
 Question: Which one looks more
different from the original?
Original Image
Brightness Adjusted Slightly Colour Adjusted Slightly

Image Optimization:
How does a JPEG perform compression?
FACT  The designers of the JPEG compression algorithm

realized that the human eye is
more sensitive to _____________details than to
fine ________ details.
 Thus JPG conversion programs

 Try to save information about the _________
 If it finds two adjacent pixels with very similar

colors, it will store both those pixels with the
same color and discard the other color.
23
LOW
0% compression
= 100% quality
95% compression
(=lower quality) HIGH
 When saving a JPEG image, you can select the 95% compression
= 5% quality
quality or compression ratio of the final image
 Application uses a complex compression algorithm

based on the ratio value to determine “how much to discard”
TIP: Because image data is lost with each compression,

work with the image in native format (such as .psd)
and when ready with final product, save it as a .jpg file
24
Image Optimization:
0% compression = 50KB
100% quality Observations:
Quality
1. The quality of a JPEG file is File Size
proportional to the file size
Compression (higher value)

2. Higher compression values
• Reduces file size Quality
• Lowers quality of image File Size
• More data being
discarded.
25% compression = 50% compression = 75% compression = 95% compression =

12KB 9KB 6KB 2KB
75% quality 50% quality 25% quality 5% quality
In Photoshop changing
the .jpg compression quality
File> Save for Web and Devices
Image Optimization:
Can you tell which image was saved with low

. JPG quality, high compression in Photoshop?
Image Optimization:
Too much Compression
Quality
COMPRESSION TECHNIQUES - Lossy File Size
. JPG
Recap….
Goal:
 Optimization Techniques: Reduce file
size
 FILE FORMATS - Choosing .jpg or .gif
 COMPRESSION – compress the image data
NEXT  COLOR RESOLUTION (= bit depth)

- # of colors used (24 bits,16 bits, 8 bits)
Image Optimization: . GIF
COLOR RESOLUTION
Applies only to ___________

 Color Resolution (Number of colors)
Support 8-bit color
256, 128, 64, 32, 16, 8 bytes

Choice of using 256 colors or 128 colors
etc…
Color Resolution = Bit Depth

In Photoshop changing
the .gif color resolution
File> Save for Web
and Devices
10 sec 6 sec
4 sec 3 sec
Image Optimization:
COLOR RESOLUTION
.GIF file -- Is there any difference?

Which image has highest color resolution?
256 colors (23 Kb) 8 colors (9Kb)

Other software that allows for color resolution
IF CHANGE
BIT DEPTH
ORIGINAL 8-> 5 BITS
Break Time
 http://youtube.com/watch?v=Fr8UpG
1xnWs
Some PhotoShop images to freak you

out while you drink your coffee
during break!
34
Optimization Techniques
TO Reduce FILE SIZE
CHOOSE a FILE FORMAT
.GIF .JPG
• Compression (Lossless) • Compression (Lossy)
• Color resolution • Image Quality
Other things to change Other things to change

• Dithering • Progressive jpeg
• Interlacing
• Transparency
Question
 What do you think a program, that converts
images into gifs does, if the image has more
than 256 colors?
 HINT: What did you do when you were a kid and

your parent gave you red and blue and yellow
and black play-doh?
 You didn’t realize it but you were using a

____________________________________
36
Dithering Technique - .gif
 Can lower download time

 applies to converting __________________
 Instead of using “true” color
 reduce to _____________or less
 Dithering is the most common method of reducing the color
range of .jpg images down to the 256 (or fewer) colors
 Final image is stored as a .gif
Onion.jpg Onion.gif Onion.gif
(contains more than 8 colors 8 colors
256 colors) – no dither - – dither -
Cat.jpg Cat.gif Cat.gif

(contains more than 256 colors 256 colors
256 colors) – no dither - – dither -
http://en.wikipedia.org/wiki/Dither
38
39
How does dithering work?
 Dithering Definition:
Juxtaposing (place side by side) pixels of two colors to create
the illusion that a third color is present (grainy look)
http://www.colorcu
be.com/illusions/dit
her.htm
Assume our image uses this orange outside of web safe pallette
Recreate the orange using 2 colours from web safe pallette

If an image uses color hues outside of
browser-safe palette, the browser BROWSER SAFE
automatically dithers the displayed
PALLETE - 216 colors
images into browser-safe colors. honored between
browsers, operating
Color Palletes and Browser – safe Palette systems and computer
platforms
PC Mac
41
.gif
•Assume our image uses a color that is

not in our web safe pallete
•Thus we need to find 2 colors from our

web safe pallette that will simulate a
violet.
•So we use Red Blue

• You can reduce the number of colors in a GIF and choose
options to control the number of colors and % of dithering
File >Save for web and Devices

Interlacing Technique
Interlacing (._____)
Progressive (._____)
 How images are ____________ to your screen
 Is a process by which the image is drawn in a
series of passes rather than all at the same time
 Best when image file sizes are really big!
Benefits:
Interlacing lets you
have a feel for the
whole picture, you
don’t have to wait
around to see it
download (good for dial
up connections)
Transparency- .gif Transparent
Every pixel in the
Applies to .GIF files image is either
 allows the page background to display completely visible
through the image so the image appears to or completely see-
have no visible border around it. through so that
 Allows for transparency of _______colour what's "underneath"
 Currently the only formats that support the image shows
transparency are the GIF and PNG formats. through
PNG Files
 Pronounced PING
 Created specifically because of licensing issues with
GIFs in the 90s due to legal issues resulting from GIFs
compression scheme
 Does ____________ compression – No Discard
 Two versions of PNG
 PNG-8
 PNG-24
GIF 16 colors PNG 8-bit 16 colors PNG 24-bit true color

JPEG true color
8,776 bytes 12,704 bytes 64,020 bytes
6,549 bytes
PNG-8
 Similar to GIF
 Only allows for ________ colours
 Allows for 1 __________ colour
 Storing of colours is more efficient in PNG files than GIFS
thus PNG-8 files might be SMALLER than their GIF
counterparts (this is software dependent)
GIF 16 colors PNG 8-bit 16 colors

JPEG true color
8,776 bytes 12,704 bytes
6,549 bytes
PNG-24
 Allows for 24 bit colour

 PNG24 is ___________ (no discard) so PNG-
24 file size will be larger than JPG files
 Allows for transparency on each pixel, with
different levels of opacity: -- aka “__________”
JPEG true color PNG 24-bit true color PNG 8-bit 16 colors
6,549 bytes 64,020 bytes 12,704 bytes
Transparent
.PNG 24 Every pixel in the image
is either completely
visible or completely
see-through so that
what's "underneath" the
image shows through
Translucent
Pixels can be ________
__________, to create a
ghostlike, partially see-
through effect.
Image Optimization – Format Characteristics
GIF JPG PNG-8 PNG-24

Supports 8 bit color 24 bit color 8 bit color 24 bit
Best For Logos, Photographs Logos, Photograph
Cartoons, Cartoons, Images with a
Drawings Drawings need for
transparency
Type of Lossless Lossy Lossless Lossless
Compression
Well Supported All All All Not on IE6
in Browsers
Transparency One NO One TRANSLUCENCY
COLOUR COLOUR Varying levels
only only of opacity and
transparency
Animation Yes No No No
Dithering Yes No Yes No
Interlacing Yes No (progressive) Yes Yes
Review
 Question: How big will an image be in terms of
bytes if it is uncompressed, true colour and 200 by
400 bytes?
 Question: What type of compression doesn’t lose

any of the original information about the image?
 Question: Which type(s) of file formats perform a

lossless compression?
 Question: JPGs will produce a smaller file size than

PNG 24 for a photograph: TRUE OR FALSE
Capturing Digital Images
Explore
Capturing images from
Scanner
Digital Camera
How these images are printed

(determining print sizes)
Viewed on a monitor
- Scanning -
Where do we get our images
to use on our computer?
Scanner, Digital Camera, and
Drawing
HOW?
Converting from Analog to Digital Samples on scanners
are measured as
 The scanner or the camera determines
how many samples to take (how finely dots per inch (dpi)
to break down the images) (you specify this value)
 More samples, the higher the 100 dpi, 300 dpi, 600 dpi
resolution will be. etc.
Capturing Digital Images - Scanning -
So how many samples do we get
when we scan?
It is based on the dpi and image dimensions

If we scan an: If we scan an:
 8 inch by 10 inch image  8 inch by 10 inch image
 100 dpi  300 dpi
# of samples: # of samples:
=(8”*100dpi) * (10”*100dpi) =(8”*300dpi) * (10”*300dpi)
= 800*1000 = 2400*3000
= 800,000 samples = 7,200,000 samples
(almost 1 million samples)
If we print the scanned image,
what will the print size be?
If scanned image is: 600 ppi (dpi)
3600 x 2400 pixels 3600 pixels/600ppi = 6 inches
2400 pixels/600ppi = 4 inches
FORMULA:
(Physical image size is dependent on) 300 ppi (dpi)
Print Size Dimensions (in inches)
=____________ / ____________ 3600 pixels/300ppi = 12 inches
2400 pixels/300ppi = 8 inches
Note: 200 ppi (dpi)

 Printing resolution of a printer is
measured as ppi (dpi) 3600 pixels/200ppi = 18 inches
Ex. 200ppi, 300ppi, 600ppi .... 2400 pixels/200ppi =12 inches
Print resolution
Image size (larger)
How to set dpi for printing
In Photoshop:
1. Image >Image Size
2. Deselect “Resample Size”
3. Change the Resolution
http://www.rideau-info.com/photos/changedpi.html
56
- by Camera -
Digital Cameras advertised by Megapixels

how many millions of pixels you can capture in a
photograph on your digital camera
 more pixels ... ________________
Example: Kodak DCS 460/660 can capture 3072 by 2048 pixels for one photograph
 about 6 million pixels or about 6 megapixels (3072 X 2048 = 6,291,456 px)
1,000,000 pixels
= 1 Megapixel
- by Camera -
Megapixel: Relationship:
• how many millions of pixels you can
capture in a photograph on your digital Higher resolution
camera Larger Image (pixels)
describes the _______ size of an image Better image quality
(width x height) Bigger prints
Resolution Size of image Total # of

pixels
(pixels WxH)
1.0MB 1280 x 960 1,228,800
2.0MB 1600 x 1200 1,920,000
3.1MG 2048 x 1536 3,145,728
4.0 MB 2272 x1704 3,871,488
5.0MB 2560 x1920 4,915,200
What size prints can you get
from a camera ?
Megabytes Size of image Total # of Printing at 300dpi,
(pixels WxH) Pixels biggest suggested
print
1 Megapixel 1280 X 960 1,228,800 4.2” by 3.2 “ Using
300dpi
2 Megapixels 1600 X 1200 1,920,000 5.3” by 4 “ Print
3 Megapixels 2048 X 1536 3,145,728 6.8” by 5.1” picture
4 Megapixels 2272 X 1704 3,871,488 7.5 by 5.6 “ size
increases
5 Megapixels 2560 X 1920 4,915,200 8.5” by 6.4”
Print size (inches) = ____________ / ________________

= 2048/300dpi by 1536/300dpi = 6.8” by 5.1”
 Thus, a camera with
more megapixels can print a
larger image without the human
eye detecting a loss of quality.
 If you just want to print 4” by 6”
images, you don’t need much
more than 3 megapixels
Displaying Images
on the Screen
Monitor/Screen Resolution:
• refers to the dimensions of the
pixels displayed on a screen
• A resolution of 800 X 600

Monitor will display 1600 px wide 1024px wide
800 pixels wide
600 pixels high 1600 x 1200 1024 x 768
Common Screen Resolutions: Same webpage displayed at

different resolutions
• 640 by 480
• 800 by 600 Higher Resolution: Lower Resolution:
• 1024 by 768 1600 x 1200 1024 x 768
• 1280 by 1024 • Everything appears • Everything appears
___________ __________
• 1600 by 1200
• Covers a portion of • Page takes up entire
desktop area
• Text harder to read • Text easier to read
(________) (________)
Changing the Screen Resolution
 Set through Control Panel …

Display settings
 On a Windows machine:
 Right click on the desktop
 Select properties
 Select Settings Tap
 Change the resolution
Displaying images on a screen
 Amount of space the image takes up on the screen is
dependent on:
 Size of the image
 The current resolution of the screen
Higher
Resolution:
1600 x 1200
• Everything
appears smaller
1600 px 1024px
Displaying images on a screen
Example:
 If Image is 300 pixels by 200 pixels
480 px --- >

If screen resolution is 1280 by 1024
300/1280 =1/4 and 200/1024= 1/5
200
(1/4 x 1/5 = 1/20 ) 300
<--
Then image will take up 1/20 screen <-------- 640 px ------ >
If screen resolution is 640 by 480
1024 px --- >

300/640 =1/2 and 200/480 = 1/2
(1/2 x 1/2 = ¼ )
Then image will take up 1/4 of the
screen 200 300
<--
<-------- 1280 px ------
REVIEW
CS1033 Pixel and Resolution
1. What should you set the dpi for an image you

wish to print? (your own printer)
Answer: Set printer resolution at ________ dpi

When printing images you should set your printer
resolution to _____-ppi (dpi) since you can get
reasonable 4x6
2. If you have an image that is
400 pixels by 600 pixels and
the printer resolution is 200dpi,
what size will it print at?
Answer:
FORMULA is: (pixels inches)

Print Size Dimensions(in inches)
=_____________ / _______________
Image size : 2 inches x 3 inches

3. If you want to print an image at 5” by 7”, what is the
minimum size it must be in pixels for it not to look
pixelated:
Answer:
Assumption: Best to use printer resolution 300dpi
FORMULA is: (inches  pixels)

Print Size Dimensions(in PIXELS)
=_____________ x _______________
Image size : _____ pixels x ______ pixels

4. Assume you have an image that is 400 px by 300 px,
roughly draw it on the following monitor that has a
resolution that is 800 by 600 pixels (put the bottom left
corner of the image in the bottom left corner
of the screen)
Answer:
px --- >
<----- 600
300
400
<-------- 800 px ------ >
5. Draw the same image that is 400 px by 300 px,
roughly draw it on the following monitor that has a
resolution that is 1600 by 1200 pixels (put the bottom
left corner of the image in the bottom left corner
of the screen)
Answer:
px --- >
px --- >
--1200
300
300
--600
400 400
<-------- 1600 px --- > <-------- 800 px ------ >

6. If I have an image that is 600 pixels by 900
pixels and I print it at a resolution of 150 dpi,
how big will the image be?
Answer:

=
Image size : ___ inches x _____ inches

7. Which of the following images will print the largest?
(a) 300 pixels by 300 pixels at 100dpi
(b) 300 pixels by 300 pixels at 50dpi
(c) 300 pixels by 300 pixels at 10dpi
(d) They will all be the same size
Answer:
=pixel dimensions /print resolution
(a) 300/100 and 300/100 = 3” x 3”

(b) 300/50 and 300/50 = 6” x 6”
(c) 300/10 and 300/10 = 30” x 30”
8. Which of the following images will have the largest
size (in kilobytes) ?
(a) 300 pixels by 300 pixels at 100dpi
(b) 300 pixels by 300 pixels at 50dpi
(c) 300 pixels by 300 pixels at 10dpi
(d) They will all be the same size
Answer:
___________________________
But uncompressed file size (assume 24bit depth)

= 300 * 300 * 24bits
= 300 * 300 * 3 bytes = 270,000 bytes
Then 270,000 / 1024 =263.67 Kilobytes (KB)
9. How many Megapixels is an image
that is 2000px by 3000px?
Answer:
Image size = 2000px x 3000px Fact:
= 6,000,000 px ________________
= _______ MB
10. To calculate the number of bytes an uncompressed true colour
image (raw) will be, you multiply the width pixels by the height
pixels by 3 bytes (1 byte for the red= 28bits,1 byte for the green =
28bits, 1 byte for the blue = 28bits,). This is called a .raw file.
Based on the above formula, how many bytes would an image in
.raw format be if it was 200 pixels by 300 pixels:
Answer:
Uncompressed file size (assume 24bit depth)
= 200 * 300 * 24bits
= 200 * 300 * 3 bytes = 180,000 bytes
11. How many KB is it?
Then 180,000 / 1024 =175 Kilobytes (KB)
(to make it easier- round up  180,000/1000 = 180 KB

Lecture #4 GRAPHICS Continued: Multimedia and Communication

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lecture #4 GRAPHICS Continued: Multimedia and Communication

Încărcat de

Drepturi de autor:

Formate disponibile

Multimedia and Communication

LAST LECTURE TODAY’S LECTURE

REVIEW Graphics are categorized as being either:

Affects how the graphics are

For PRINTING For Web Page

OBJECTIVE ON THE INTERNET CHALLENGE:

File Size Quality OPTIMIZE the image!

 If the client is using high

 If the client is on a modem

100 by 100 pixels

200 by 200 pixels

GOAL: Download web page fast

3. COLOR RESOLUTION ________________________

TO Reduce FILE SIZE

CHOOSE a FILE FORMAT

• Supports a max of 8-bit color scheme

• Best for __________________________

• Tiny file sizes in comparison with .jpg

• Summary: Smaller file sizes but 256 colors

 Works in all browsers, universal format!

 What’s lacking in all these animations?

• JPEG stores full color information:

• Larger file sizes in comparison with .gif

.gif is the .gif and

TO Reduce FILE SIZE

Let’s take a picture:

What is the File Size?

Thus uncompressed file size

 Each different type of image file format represents the use of a

 uses a simple technique called LZW compression to reduce the

 this compression never degrades the image quality.

One Algorithm for .gif compression

 Builds a decoding hash table

 _________ the image quality each time you save

 Compression is achieved by ‘_________’ certain

How does a JPEG perform

Brightness Adjusted Slightly Colour Adjusted Slightly

How does a JPEG perform compression?

FACT  The designers of the JPEG compression algorithm

 Thus JPG conversion programs

 If it finds two adjacent pixels with very similar

 Application uses a complex compression algorithm

TIP: Because image data is lost with each compression,

Compression (higher value)

25% compression = 50% compression = 75% compression = 95% compression =

Can you tell which image was saved with low

 FILE FORMATS - Choosing .jpg or .gif

 COMPRESSION – compress the image data

NEXT  COLOR RESOLUTION (= bit depth)

Applies only to ___________

256, 128, 64, 32, 16, 8 bytes

Color Resolution = Bit Depth

.GIF file -- Is there any difference?

256 colors (23 Kb) 8 colors (9Kb)

Some PhotoShop images to freak you

CHOOSE a FILE FORMAT

Other things to change Other things to change

 HINT: What did you do when you were a kid and

 You didn’t realize it but you were using a

 Can lower download time

Cat.jpg Cat.gif Cat.gif

Recreate the orange using 2 colours from web safe pallette

•Assume our image uses a color that is

Print size (inches) = / ____

Image size : _ pixels x __ pixels

Image size : _ inches x ___ inches