Harvard Extension School, Fall 2018
CSCI E-12 Fundamentals of Web Site Development

## Comparison of Image Formats

### Graphics Formats for the Web

Property | GIF Graphics Interchange Format | JPEG Joint Photographic Experts Group | PNG Portable Network Graphic | SVG Scalable Vector Graphic
--- | --- | --- | --- | ---
Color System | 8 bit indexed (256 colors) | RGB (24 bit; millions of colors) | 8 bit indexed (256 colors) RGB (24 bit; millions of colors) | RGB
Compression | Lossless Compression (LZW; horizontal repeating units) | "Lossy" Compression (compression optimized for gradual color changes) | Lossless Compression | Lossless (gzip)
Other Features | `.gif` file extension Transparency Animation | `.jpg` and `.jpeg` file extensions No Transparency No Animation | `.png` file extension Transparency Animation through APNG, but not widely supported | `.svg` file extension Transparency XML format Uses CSS properties!
Typical Uses | Illustrations (logos, icons) Animated banners and icons Images with small dimension | Photographs | Any | Illustrations (logos, icons) Vector Art
Property | GIF Graphics Interchange Format | JPEG Joint Photographic Experts Group | PNG Portable Network Graphic | SVG Scalable Vector Graphic
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.6 kb

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

Illustration image from the original works of David Heitmeyer

Copyright © David Heitmeyer