Slide 36 - Graphics Formats for the Web § Session 06

Graphics Formats for the Web

Property GIF
Graphics Interchange Format JPEG
Joint Photographic Experts Group PNG
Portable Network Graphic SVG
Scalable Vector Graphics

Color System

8 bit indexed (256 colors)

RGB (24 bit; millions of colors)

Property	GIF Graphics Interchange Format	JPEG Joint Photographic Experts Group	PNG Portable Network Graphic	SVG Scalable Vector Graphics
Color System	8 bit indexed (256 colors)	RGB (24 bit; millions of colors)	8 bit indexed (256 colors) RGB (24 bit; millions of colors)	24 bit; millions of colors
Compression	Lossless Compression (LZW; horizontal repeating units)	"Lossy" Compression (compression optimized for gradual color changes)	Lossless Compression	Lossless Compression
Other Features	`.gif` file extension Transparency Animation	`.jpg` and `.jpeg` file extensions No Transparency No Animation	`.png` file extension Transparency	`.svg` file extension Vector-based Transparency XML format
Typical Uses	Illustrations (logos, icons) Animated banners and icons Images with small dimension	Photographs	Any	Illustrations Graphs, Charts, Maps - 'plain' and 'interactive'
Property	GIF Graphics Interchange Format	JPEG Joint Photographic Experts Group	PNG Portable Network Graphic	SVG Scalable Vector Graphics
Photograph 250 × 188 px	29.3 kb	16.8 kb	25.8 kb (indexed, 8-bit)	81.9 kb (RGB, 24-bit)	N/A
Illustration 148 × 179 px	1.47 kb	6.12 kb	1.02 kb (indexed, 8-bit)	1.89 kb (RGB, 24-bit)	0.575 kb (compressed, 1.7 kb uncompressed; RGB, 24-bit)

8 bit indexed (256 colors)
RGB (24 bit; millions of colors)

24 bit; millions of colors

Compression Lossless Compression (LZW; horizontal repeating units) "Lossy" Compression
(compression optimized for gradual color changes) Lossless Compression Lossless Compression

Other Features

.gif file extension
Transparency
Animation

.jpg and .jpeg file extensions
No Transparency
No Animation

.png file extension
Transparency

.svg file extension
Vector-based
Transparency
XML format

Typical Uses

Illustrations (logos, icons)
Animated banners and icons
Images with small dimension

Photographs

Illustrations
Graphs, Charts, Maps - 'plain' and 'interactive'

Property GIF
Graphics Interchange Format JPEG
Joint Photographic Experts Group PNG
Portable Network Graphic SVG
Scalable Vector Graphics

Photograph
250 × 188 px 29.3 kb 16.8 kb 25.8 kb (indexed, 8-bit) 81.9 kb (RGB, 24-bit) N/A

Illustration
148 × 179 px 1.47 kb 6.12 kb 1.02 kb (indexed, 8-bit) 1.89 kb (RGB, 24-bit) 0.575 kb (compressed, 1.7 kb uncompressed; RGB, 24-bit)

Hot Air Balloon image is in the Public Domain and was obtained from PD Photo.
Public Domain Dedication

Illustration image from the original works of David Heitmeyer

TOC	« previous \| Slide 36 \| next topic »