Digital Formats · Image

Digital Image
Formats

Raster vs. vector, color depth, and compression — how images are captured, stored, and displayed.

01 Raster vs. vector images

Raster (bitmap)

Stores each individual pixel's color value. Highly detailed — ideal for photographs — but enlarging causes pixelation and file size grows with resolution.

each pixel stored
Excellent for photos & detail
Easy to create (camera, scanner)
Pixelates when enlarged
Large file sizes

Vector

Stores mathematical descriptions of shapes — points, curves, fills. Infinitely scalable with no quality loss. Ideal for logos, icons, and typography.

r math description
Infinitely scalable
Small file sizes
Requires special software
Less detail than raster
02 RGB display & color depth

Computer monitors use an RGB display — each pixel is a set of three tiny lights (red, green, blue). By varying the brightness of each, any visible color can be produced.

R G B white
Red + Green
= Yellow
Red + Blue
= Magenta
Green + Blue
= Cyan
All three full
= White
8-bit
per pixel
256 colors
16-bit
per pixel
65,536 colors
24-bit
per pixel (true color)
16.7 million colors
03 Format profiles
.jpg / .jpeg
Lossy
Joint Photographic Experts Group. Compresses at ~20:1 with minimal visible loss. 24-bit color. The dominant format for photos, social media, and the web.
photos web social media no transparency
.png
Lossless
Portable Network Graphics — released 1994. Lossless compression with 24-bit color and an alpha channel for transparency. Ideal for web design and UI graphics.
transparency web design UI elements no animation
.gif
Lossless
Graphics Interchange Format — 1987, CompuServ. Limited to 256 colors per frame. Supports animation by storing multiple frames in sequence. Poor for photos, great for short loops.
animation icons 256 colors only no photos
.tiff
Uncompressed
Tagged Image File Format — 1986. Uncompressed raster format developed by Aldus, Microsoft, and Hewlett-Packard. The gold standard for high-quality print production.
print archiving large files no browser support
04 Side-by-side comparison
Format Compression Transparency Animation Best for
.jpg Lossy No No Photos, web images
.png Lossless Yes (alpha) No Web design, UI, logos
.gif Lossless 1-bit only Yes Animations, icons
.tiff None Yes No Print, archiving
.jpg — lossy
.png — lossless
.gif — animated
.tiff — uncompressed
Digital Literacy · 2025