Web Image Formats

1
Web Image Formats

• Dan Stevenson

2
Raster vs. Vector

• Raster array of pixels
• GIF, JPEG, PNG, TIFF,
• Vector mathematical definition of lines
• PDF (postscript), Flash, fonts

3
Raster vs. Vector Scaling
4
Image Resolution

• Measured in Dots Per Inch (dpi)
• 72 dpi is standard for screen viewing
• 17 monitor _at_ 1024x768
• 1024 pixels (dots) / 12.5 inches 82 dpi
• 768 pixels (dots) / 9.5 inches 81 dpi
• 300-600 dpi for printers

5
Color Mode

• Indexed Color (Palette)
• Index number stored at each pixel
• Index number refers to a specific palette color
• Usually 16 or 256 colors in the palette
• You pick the exact colors (web palette)

6
Color Mode

• RGB
• (red, green, blue) values stored at each pixel
• High Color
• 15 bpp ? 32,768 colors available (thousands)
• True Color
• 24 bpp ? 16,777,216 colors available (millions)

7
Compression Mode

• Lossless
• No image data is lost in the compression /
  decompression process
• Lossy
• Image data is lost in the compression /
  decompression process
• Usually done to reduce file size

8
Streaming

• a.k.a. Progressive or Interlaced loading
• Partial image can be viewed before the full image
  has loaded
• Increases file sizes / download times
• Perception is that files load faster

9
Gamma Correction

• Cross-platform control of image brightness
• Corrects differences in the physics of
• monitor color guns
• video card ramdacs (analog/digital converters)

10
(No Transcript)
11
Transparency

• Ability to let background colors show through
  parts of the image

12
Web Raster Formats

• GIF (Graphic Interchange Format)
• JPEG (Joint Photographic Expert Group)
• JFIF (JPEG File Interchange Format)
• PNG (Portable Network Graphic)

13
GIF

• Indexed color mode
• 256 colors
• Lossless compression (LZW)
• 1D interlaced streaming
• Binary transparency
• One palette index is considered transparent
• Animation

14
GIF Lossless Compression
15
GIF 256 Color Palette
16
Web Palette

• Some video cards only support 256 colors
• Can be any 256 colors
• Display of any single GIF is OK
• Display of multiple GIF causes problems
• They all must use the same set of 256 colors
• There is a standard 216 color web palette
• Windows and MacOS reserve some colors

17
True Color (RGB) Palette
18
Standard Web Palette
19
Dithering

• Replacement of actual image colors with the
  limited set of colors in the palette
• Photoshop options
• None
• nearest palette color
• Diffusion
• pattern of palette colors
• that will look like actual
• colors from a distance

20
Should you use the Web Palette?

• It was designed over 3 years ago when most people
  ran 256-color systems
• Current stats (Fall 2000)
• 256-color systems 6
• High color (15/16 bit) 56
• True color (24/32 bit) 38

21
The answer is it depends

• If you are creating a GIF from scratch
• You can pick the colors, so you might as well
• pick web safe colors so everyone is happy
• If you are dithering down to 256 colors from an
  existing source image
• Go with an adaptive palette and forget about the
  6 who need to upgrade their computers anyway
• Question why you are saving as a GIF in the first
  place

22
JPEG / JFIF

• True color mode
• 24 bpp (16M colors)
• Lossy compression (JPEG)
• Repeated decompression ? modification ?
  recompression cycles increase loss
• 2D progressive streaming
• No transparency

23
JPEG Lossy Compression
24
JPEG True Color
25
JPEG Compression Sensitivity

• People are more sensitive to differences in
• Luminosity than in color
• Color changes in lighter colors

Luminosity
Color
26
Implications

• GIFs ? flat color images / icons
• JPEGs ? photographic quality image
• Using the wrong type will result in poor image
  quality

27
What about mixed images?

• Save as GIF?
• Photograph part will dither
• Save as JPEG?
• Flat-color part with degrade

28
Saved As?
29
PNG

• True color or Indexed color mode
• 16M or 256 color palette
• Lossless compression (PNG 0)
• 10-30 smaller files than GIF
• 2D interlaced streaming
• Full alpha channel transparency

30
PNG Lossless Compression
31
PNG True Color
32
Mixed Content
PNG
JPEG
GIF
33
When to use PNGs

• Designed as a free replacement for GIF
• File size is smaller
• Flexible enough to replace JPEGs as well
• File size is large due to lossless compression
• PNP (Wavelets vs. DCT)
• Image quality better for mixed content
• Tradeoff in quality for size

34
PNG vs. GIF Compression
GIF 150 bytes
GIF 334 bytes
GIF 514 bytes
PNG 122 bytes
PNG 119 bytes
PNG 146 bytes
35
Streaming Comparison

• GIFs are 1D interlace (discernible after 50)
• JPEGs and PNGs are 2D (20-30)

36
Transparency Comparison

• JPEG
• No transparency
• GIF
• Binary transparency
• PNG
• Full alpha channel transparency

37
Alpha Transparency andSoft Shadows

• Soft shadows work on different color backgrounds
  without changing the image

38
Gamma Correction Comparison

• GIF and JPEG
• No gamma correction
• PNG
• Allows for gamma correction information
• Browser/System must support it

39
Animation?

• GIFs support Animated GIFs
• JPEGs dont support animation
• PNGs dont support animation
• MNGs are on the way
• Vector animation instead of Raster?
• Flash format (.swf)
• Smaller file sizes

40
Photoshop Saving Options
41
Summary

• 3 main web raster formats
• GIF, JPEG, PNG
• Use PNG/GIF for flat-color images
• Use JPEG for photographic quality images
• PNG for mixed content (quality vs. size)

42
Future Image Related Topics

• Vector graphics and Flash
• Audio and Video formats and their integration
  into web pages
• These slides available at
• www.cs.uwec.edu/stevende/webgroup/imageFormats.pp
  t