Image Optimization

Image optimization is the process of reducing image file size and improving delivery without noticeably degrading visual quality — making pages load faster and use less bandwidth.

Related workflow terms: Image Compression, Image Format.

Why optimization matters

Images are typically the largest assets on a web page. Unoptimized images slow down page loads, increase bandwidth costs, and hurt search rankings. Google uses page speed as a ranking signal, and images are often the biggest contributor to slow load times.

For teams that produce visual content at scale — documentation screenshots, product captures, marketing assets — the impact compounds. A hundred unoptimized PNG screenshots embedded in a knowledge base can add hundreds of megabytes of unnecessary weight. The same content, properly optimized, loads faster, costs less to serve, and provides a better experience for readers.

Optimization is not just about making files smaller. It is about delivering the right image, in the right format, at the right size, as efficiently as possible.

Optimization techniques

• Format selection — choosing the best format for the content type. PNG or WebP lossless for screenshots with text. WebP lossy or AVIF for photographic content. JPG as a fallback when broader compatibility is needed.
• Compression — applying lossless or lossy compression to reduce file size. Lossless compression removes redundant data without affecting quality. Lossy compression discards data the human eye is less likely to notice.
• Resizing — serving images at the dimensions they will be displayed. A 3000-pixel-wide screenshot displayed at 800 pixels wastes bandwidth on unused data. Resize to the target display size.
• Metadata stripping — removing EXIF data, color profiles, and other metadata that adds file size but is not needed for display. This can save several kilobytes per image.
• Lazy loading — deferring the loading of off-screen images until the user scrolls near them. This reduces initial page load time without changing the images themselves.
• Responsive images — serving different image sizes based on the viewer's screen size and resolution using srcset and sizes attributes.

Optimization for screenshots

Screenshots have characteristics that affect how they should be optimized. They tend to have large areas of flat color, sharp text, and precise UI edges. These properties mean lossless formats outperform lossy ones for visual fidelity.

The most effective optimization for screenshots is often the simplest: capture at the right dimensions in the right format from the start. Some capture tools let you set the output format, viewport size, and device pixel ratio before capture, eliminating the need for post-processing resizing and conversion.

For batch workflows, automated optimization pipelines can compress, convert, and resize hundreds of captures in a single pass — keeping output manageable without manual intervention.

In screenshot-heavy workflows, a strong default is to keep one lossless master, then generate smaller delivery copies for blogs, docs, and social assets. That preserves a clean source file while keeping published pages fast.

Common mistakes

• Resizing up instead of down. Enlarging a small image creates a larger file with blurry, interpolated pixels. Always capture at the largest size you need and resize down.
• Applying lossy compression to text-heavy screenshots. Lossy formats like JPG introduce artifacts around sharp edges and text, making content harder to read. Use lossless compression for anything with readable text.
• Optimizing once and forgetting. New content is added constantly. Without an automated pipeline, unoptimized images creep back in over time. Build optimization into the capture and publishing workflow.
• Ignoring display dimensions. Serving a 4000-pixel screenshot when it will be displayed at 800 pixels wastes bandwidth. Resize to match the display context, and use responsive images to serve different sizes for different screens.