Guide: compress images with quality control
Core Web Vitals punish heavy hero images. CI tools compress on build, but sometimes you only have a raw design export pre-deploy.
Canvas/WebAssembly compression stays local — pixels never upload. Tune quality and compare before/after KB and visual fidelity.
Use for marketing assets, doc screenshots, or oversized icons. Keep masters in Figma; commit only optimized outputs.
Step by step
- Drop images into the area — JPEG and PNG are most common; transparency needs care at low quality to avoid halos.
- Adjust compression level — Lower quality until artifacts appear — stop one step earlier for balance.
- Compare size and preview — Typical targets: hero < 200KB, icons < 20KB — project-dependent.
- Download optimized bundle — Replace in `public/` and rerun Lighthouse to confirm LCP gains.