image formats - university of hawaii · image formats communication 337 native image formats...

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