Skip to content

feat: add screenshot compression for baseline artifacts #50

Description

@tom-bot-for-rana

Problem

Baseline artifacts store full-page PNG screenshots which can be large (often 2-5 MB per route). This increases:

  • GitHub Actions artifact storage costs
  • Upload/download times for baseline artifacts
  • CI runtime (artifact upload is often the slowest step)

Proposal

Add optional PNG compression to reduce screenshot file sizes with minimal visual impact.

Config

{
  "screenshots": {
    "compression": "none" | "fast" | "aggressive"
  }
}
Mode Description Typical savings
none (default) No compression, original PNG output 0%
fast Lossy compression at quality 0.8 ~40-60%
aggressive Lossy compression at quality 0.5 ~70-80%

Implementation

Use pngquant (the de-facto standard for PNG compression) via its Node bindings or as a subprocess.

Implementation Plan

1. Config validation (lib/snapdrift-config.mjs)

  • Add screenshots.compression field to config validation
  • Validate: must be one of none, fast, aggressive
  • Default: none (no change to existing behavior)

2. Capture flow (lib/capture-routes.mjs)

  • After screenshot capture, apply compression based on config
  • pngquant via subprocess: pngquant --quality=80-90 --speed=1 --output <out> <in> for fast mode
  • pngquant --quality=50-70 --speed=1 --output <out> <in> for aggressive mode
  • Handle missing pngquant gracefully: log a warning and skip compression

3. Dependency

  • Add pngquant-bin as an optional dependency (or sharp which includes PNG compression)
  • In the action YAML, install the dependency before capture

4. Type definitions

  • Add screenshots?: { compression?: "none" | "fast" | "aggressive" } to VisualRegressionConfig

5. Tests

  • capture-routes.test.js: test that compression mode is applied
  • Test that missing pngquant logs a warning but doesn't fail
  • Test that compression: none produces identical output (no regression)

6. Documentation

  • docs/contracts.md: add screenshots.compression field
  • docs/integration-guide.md: add compression example with typical savings
  • CHANGELOG.md: add entry under Unreleased

7. GitHub Actions updates

  • actions/baseline/action.yml: add optional install-pngquant input (default: true)
  • Install pngquant in the action step when compression is enabled

Acceptance Criteria

  • Config validation accepts screenshots.compression field
  • Fast mode reduces file size by ~40-60% with no visually noticeable difference
  • Aggressive mode reduces file size by ~70-80%
  • Compression is optional (default: none, no change to existing behavior)
  • Missing pngquant logs a warning but doesn't fail the capture
  • Types updated
  • Tests added and passing
  • Docs updated
  • npm run ci passes on the branch

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions