Alpha Channels and Transparency in Web Images

Transparency (alpha channel) is essential for logos, icons, and images over colored backgrounds. Understanding format support saves headaches.

Alpha Channel Basics

An alpha channel is a fourth dimension added to RGB (making RGBA). Each pixel has a transparency value: 0 (fully transparent) to 255 (fully opaque).

PNG supports 8-bit alpha (256 transparency levels). Per-pixel precision. PNG is the standard for graphics requiring transparency.

GIF supports only binary transparency: fully opaque or fully transparent. No in-between. Creating smooth anti-aliased edges is impossible in GIF.

WebP supports full alpha channel (8-bit). Compresses transparent images 25–30% smaller than PNG while preserving smooth edges.

AVIF supports alpha channel. Still experimental in browsers but works where supported. Compresses transparent images better than PNG or WebP.

JPEG does not support transparency. Never use JPEG for logos or icons. If you need lossy with transparency, use WebP instead.

Some formats use pre-multiplied alpha (color values multiplied by alpha). This matters for image compositing but is handled automatically by tools.

For logos/icons/graphics: PNG (universal). For smaller file size: WebP with transparency. Never JPEG. AVIF coming soon.

Serve WebP with PNG fallback using the picture element: <picture><source srcset="logo.webp" type="image/webp"><img src="logo.png"></picture>