Image FormatsCommunication 337
Native Image Formats
• Always keep a copy of the image in its program’s native file format (e.g., .psd, .png, .fla)
• Rarely, if ever, use native formats on the web
Bitmap Image Formats
• GIF = Graphic Interchange Formatpronounced “jif”
• JPEG = Joint Photographic Experts Group pronounced “jay-peg”
• PNG = Portable Network Graphics pronounced “ping”
Vector Image Formats
• SVG = Scalable Vector Graphics
• SWF = Small Web Formatpronounced “swiff” (Flash player format)
GIF Format
• Best for use with line art, type, or areas of flat color
• Limited color space of 8 bits = maximum of 256 colors
• Supports animation and 1-bit transparency
• Lossless compression
1
2
3
4
5
JPEG Format
• Best for use with photographic images
• Color space of 24 bits = millions of colors
• Does not support either animation or transparency
• Lossy compression
PNG Format
• Best for use with non-photographic images
• Color space up to 48-bit (color) or 16-bit (grayscale)
• Doesn’t support animation but does support 8-bit transparency & gamma correction
• Lossless compression
• Spotty transparency support in Explorer
Examples
Photoshop Image
712 Kb
JPEG Image: High Quality
76 Kb
6
7
8
9
10
GIF Image: Dithered
130 Kb
GIF Image: No Dither
116 Kb
JPEG Image: High Quality
76 Kb
GIF Image: Dithered
130 Kb
GIF Image: No Dither
116 Kb
11
12
13
14
15
GIF Compression
4 Kb
JPEG Compression Artifacts
4 Kb
Fine-Tuning GIF Images
GIF Color Settings
For GIF imageswith two colors,
specify 6-8 colors in Photoshop’s Save for Web
dialog box
GIF Color Settings
16
17
18
19
20
GIF Web-Safe Palette
GIF Perceptual Palette
Web-Safe vs Perceptual vs JPEG
34Kb 85Kb 45Kb
34Kb 85Kb 45Kb
Web vs Adaptive Palettes vs JPEG
GIF: LZW Compression
.9 Kb
21
22
23
24
25
GIF: LZW Compression
4.8 Kb
GIF: LZW Compression
11.7 Kb
GIF Transparency
Matting: Original Image
Saving GIF with Transparency
26
27
28
29
30
Resulting Web Page
Altered Web Page Color
Revised GIF Matting
Resulting Web Page
Same PNG Image on Different Backgrounds
31
32
33
34
35