Why image compression deserves your attention

Images are usually the heaviest resource on a web page, both in bytes transferred and in visual space occupied. Shrinking those bytes reduces bandwidth contention and lets the browser render useful content sooner. Image optimization is part art, part science: no single setting works for every image, but well-understood algorithms can produce dramatic savings when applied deliberately.

The key dimensions to evaluate are format capabilities, encoded content, quality level, and pixel dimensions. Getting these right requires understanding how image data is actually stored.

The mechanics of image data

Raster images are grids of pixels. Each pixel stores RGBA values: red, green, blue, and alpha (transparency) channels. Browsers allocate 256 shades per channel, or 8 bits each, which means 4 bytes per pixel. A 100×100 pixel image therefore contains 10,000 pixels × 4 bytes, or roughly 39 KB.

That may not sound like much, but the size compounds quickly with larger dimensions. Fortunately, several strategies reduce the footprint:

  • Lower bit-depth: Dropping from 8 bits per channel to a 256-color palette cuts storage to 8 bits total for RGB channels, saving 50% versus the original 4 bytes per pixel. Images with gradual transitions like gradients or skies need larger palettes to avoid banding, while simple graphics waste bits on a huge palette.
  • Delta encoding: Instead of storing each pixel value, store the difference from neighboring pixels. Identical adjacent pixels produce a delta of zero, encodeable in a single bit. Examining larger pixel blocks offers even more compression opportunity.
  • Perceptual encoding: The human eye is less sensitive to certain colors, so you can allocate fewer bits where differences are imperceptible. Two-dimensional pixel neighborhoods allow block-level decisions about encoding strategy.

Vector images: a different optimization path

SVG is an XML-based vector format supported by all modern browsers. It scales cleanly across devices and resolutions, making it ideal for the multi-device web. Vector assets can be exported from drawing software or written by hand.

The XML that drawing tools produce, however, carries significant baggage. Metadata such as layer information, comments, and XML namespaces is often unnecessary for rendering. Tools like SVGO strip this overhead; in the example above, SVGO reduced an Illustrator export from 470 to 199 bytes, a 58% reduction.

Because SVG is XML, servers should also apply GZIP compression to reduce its transfer size further.

Lossless versus lossy compression

Lossless compression preserves every bit of original data, which is essential for source code and executables. Images, however, can tolerate approximations. The human visual system is forgiving enough that discarding some pixel information often goes unnoticed.

A typical optimization pipeline therefore runs two steps:

  1. A lossy filter that eliminates some pixel data.
  2. A lossless filter that compresses the remaining data.

The lossy step is optional and format-specific. The differences between GIF, PNG, JPEG, and other formats come down to which algorithms they apply at each stage. The right combination depends on your content and your tolerance for artifacts. Lossy formats like JPEG usually expose a quality slider; experimenting with lower settings often yields very good visual results with meaningful byte savings.

Compression and Core Web Vitals

Images frequently become the Largest Contentful Paint (LCP) candidate, so faster image delivery directly improves LCP metrics in both lab and field testing. When tuning raster formats, test WebP and AVIF, which typically deliver the same visual quality in much smaller files than legacy formats.

Overcompression is a real risk, so verify that you are not losing too much quality. Image optimization CDNs can automate this, or you can use tools like Butteraugli to estimate visual differences and avoid encoding too aggressively.

Practical optimization checklist

  • Prefer vector formats for resolution-independent, scalable assets.
  • Minify SVG assets to strip unnecessary XML metadata, and configure GZIP compression for SVG on your servers.
  • Choose modern raster formats: WebP and AVIF are usually far smaller than older alternatives.
  • Select the format per asset based on your functional requirements.
  • Test quality settings for raster formats; lower levels often look fine and save substantially.
  • Strip metadata such as geo and camera information from raster files.
  • Serve scaled images: the display size should match the natural size as closely as possible.
  • Automate the pipeline so every asset receives consistent optimization.