Definition
Raster image formats for the web—GIF, JPEG, PNG, and WebP—each optimized for different content types, color depths, compression methods, and transparency capabilities.
Why It Matters
Images account for the majority of a website’s “weight.” Choosing the wrong format—like using a heavy PNG for a simple photo—can double your load times and drive users away. Mastering these formats is the first step in building a web that feels “instant” and polished.
Core Concepts
- GIF: 256 colors, binary transparency, animation support, lossless.
- JPEG: Millions of colors, lossy compression, best for photographs, no transparency.
- PNG-8: 256 colors, binary transparency, lossless, good for flat graphics.
- PNG-24/32: Full color plus alpha transparency, larger files than JPEG for photos.
- WebP: Lossy and lossless, alpha transparency, animation, 25–35% smaller than JPEG/PNG.