Image weight budgets in CI: preventing silent bloat (2025)
Define and enforce image size & variant budgets in CI/CD to prevent performance regressions and CDN cost creep.
Problem
Aggregate image weight grows silently, degrading LCP and increasing CDN cost unless continuously and automatically controlled.
1. Budget definitions
Types:
- Max size per category (hero, thumbnail, icon).
- Total KB cap per critical page.
- Max number of variants per asset.
- Minimum compression ratio (original vs optimized).
2. CI tracked metrics
| Metric | Source | Tool |
|---|---|---|
| Hero weight p95 | Build artifacts | Internal script |
| Total home image bytes | Static export | Sitemap analysis |
| Variants per image | Generation pipeline | Auditor script |
| % Savings vs original | Encode metadata | Encode log |
3. Suggested CI flow
- Generate/optimize images.
- Extract metadata (pre/post bytes, format, quality).
- Compare against versioned thresholds (JSON).
- Fail job if exceeded (readable diff).
- Persist history artifact for regression tracking.
4. Threshold storage
Versioned image-budgets.json (example pending) with categories & limits; PRs intentionally adjust.
5. Enforcement strategies
| Strategy | Benefit | Risk |
|---|---|---|
| Hard fail | Prevents unnoticed regression | Possible false positives |
| Warning + tracking | Lower friction | Debt accumulation |
| Progressive degradation | Adjusts with trend | More complexity |
6. Web Vitals integration
Correlate LCP/INP real-user (RUM) evolution with aggregate weight changes; adapt budgets dynamically.
7. Team communication
Weekly dashboard: top offenders, % budget use, 4-week trend.
8. Pre-publication steps
- Provide real JSON budgets example.
- Add Node snippet validating diffs.
- Insert dashboard screenshot (future).
Conclusion
Without explicit budgets, growth is inevitable. Automating verification in CI sustains performance discipline without constant manual policing.