A Deep Dive into Image Compression — and PictKit's Compression Tool
From lossy vs lossless compression fundamentals to mozjpeg, WebP, AVIF, PNG palette optimization, metadata stripping, parallel processing — and the technical decisions behind PictKit's image compression tool.
Image compression is one of the highest-impact performance tasks on the web. Understanding the main formats and their tradeoffs helps you make better decisions than simply lowering a quality slider. This guide explains how compression works, when each format is useful, and how to build a repeatable workflow.
The Two Kinds of Compression
Lossless compression rewrites image data more efficiently without removing pixels. It is safe for screenshots, logos, and text-heavy graphics, but savings are limited, often between 5% and 30%.
Lossy compression removes visual information that is hard to notice, then re-encodes the image. It can reduce file size by 50-90%, but aggressive settings can create artifacts such as blocking, color banding, or blurry edges.
Main Formats
| Format | Type | Transparency | Typical use |
|---|---|---|---|
| JPEG | Lossy | No | Photos, camera exports |
| PNG | Lossless | Yes | Screenshots, logos, UI assets |
| WebP | Both | Yes | Web images |
| AVIF | Both | Yes | High-efficiency web images |
WebP and AVIF use more advanced prediction and coding methods than JPEG, which is why they can deliver similar quality at a smaller size.
What Affects the Result
The final quality depends on more than the codec:
- Resolution: a 4000px-wide image used at 1200px wastes bandwidth.
- Source quality: compressing an already compressed image adds artifacts.
- Content: smooth gradients and fine textures respond differently to compression.
- Quality setting: even the best codec can look bad at an extreme setting.
A Repeatable Compression Workflow
- Start from the highest-quality source file available.
- Resize to the maximum size the image will be displayed.
- Choose the format based on content and browser support.
- Set a quality value and compare the result with the original.
- Adjust until the visual difference is acceptable.
- Save the optimized file separately from the original.
Measuring Compression
File size is only one part of the equation. Check:
- Visible artifacts at normal viewing size
- Loading time on a throttled connection
- Color accuracy if the image has brand colors
- Text and edge sharpness for screenshots and graphics
Metadata and Privacy
Compression tools may also remove EXIF and other metadata. This is usually desirable for privacy, but photographers who need to preserve camera information should keep a separate original file.
Compression Review Checklist
- Start from the highest-quality source available.
- Resize to the maximum display size before compressing.
- Choose the format based on content and browser support.
- Compare the result with the original at normal viewing size.
- Check edges, text, and gradients for visible artifacts.
- Keep the original file so the optimized version can be regenerated later.
Following the same checklist for every image makes compression decisions more predictable and keeps quality consistent across a site.
Understanding Compression Metrics
File size is the most visible metric, but it does not tell the whole story. The useful metrics are:
- File size: how much data the file contains.
- Quality: how close the compressed result is to the original.
- Encoding time: how long it takes to produce the file.
- Decoding time: how much effort the browser spends to display it.
- Compatibility: which browsers and devices can render the format.
A format can produce a small file but take too long to encode for an interactive editor. It can also produce excellent quality but lack support on older devices. Evaluating all five metrics together gives a more accurate picture than file size alone.
Codec Comparison in Practice
JPEG is still the most compatible format for photos. Its main weakness is visible artifacts at high compression and a lack of transparency. WebP improves on both by supporting lossless and lossy modes with transparency. AVIF often produces the smallest files but can be slower to encode and has narrower support.
For a real project, test the same source image through each codec at several quality levels. Compare the visual result at normal viewing size and at 100% zoom. A format that looks good at 1200px may show banding or blur at 200% zoom, which matters for high-quality print work.
Recommended Settings by Use Case
- Website photos: WebP or AVIF, quality 75-85, resized to the maximum display width.
- Product images: WebP quality 80-90, with a PNG version only when transparency is needed.
- Screenshots and UI assets: PNG or lossless WebP to keep text sharp.
- Email attachments: JPEG quality 85 for photos, PNG for graphics with text.
- Archives: keep the original files and generate optimized versions separately.
These settings are starting points. The right value depends on the image and the platform, so always inspect the result.
Common Artifacts and How to Avoid Them
Common compression artifacts include blocking, banding, blur, and color shifts. Blocking appears as visible squares in smooth areas. Banding appears as visible steps in gradients. Blur appears when fine detail is removed. Color shifts can appear when the color profile is not preserved.
To avoid them, start from the best source file, use a reasonable quality setting, and check gradients and edges before publishing. Avoid compressing a file that has already been compressed, because artifacts accumulate.
A Step-by-Step Workflow Example
Suppose you have a 24-megapixel JPEG from a camera that is 6000 pixels wide and 6MB in size.
- Resize the image to 1920 pixels wide, the maximum size it will be displayed.
- Export a WebP at quality 75 and quality 85, and an AVIF at quality 70.
- Compare the three files at normal viewing size and at 100% zoom.
- Choose the file with the best balance of size and visible quality.
- Apply the same settings to the rest of the batch.
- Keep the original file for future edits.
In this example, the resized WebP is often 80-90% smaller than the original JPEG, with no visible difference at normal screen sizes.
Quality Settings by Output
- Thumbnails: quality 60-70 is usually enough because the image is small.
- Social media: quality 80-90 keeps the result clean after platform re-encoding.
- Hero images: quality 80-85 for WebP and AVIF, with a JPEG fallback when needed.
- Print: keep the highest practical quality and avoid aggressive lossy compression.
The same file can have different optimal settings depending on where it is used. Store the original and generate output-specific versions.
Batch Compression Strategy
For a batch of images, start with a small sample that represents different types of content. Apply the candidate settings, inspect the results, and then process the full batch. Keep filenames consistent and verify that the output folder contains the expected number of files. Batch processing is efficient only when the settings are validated first.
Metadata and Privacy
Compression tools may strip EXIF and other metadata. This is often desirable for privacy, but it matters for photographers who need to preserve camera information. Keep a separate original file when metadata must be retained, and use a cleaned copy for publishing.
FAQ
What is the best quality setting? There is no universal number. Quality 75-85 is a common starting point for WebP and JPEG, but the right value depends on the image and use case.
Can I compress without visible loss? For most photos, moderate lossy compression is visually indistinguishable at normal sizes. For graphics with text or sharp edges, use lossless formats.
Why does a small image still have a large file size? The image may contain complex textures, or it may already be highly optimized. Resolution reduction usually has a larger effect than quality changes.
Does PictKit upload my images? No. All processing happens locally in the browser.