</>

WebDevTools

Image Compressor

Resize and compress in the browser

Reduce file size before upload. See WebP estimates and download the best format for the web.

You can pick multiple images at once. New selections are added to the list.

1920px

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

  1. Drop images into the area — JPEG and PNG are most common; transparency needs care at low quality to avoid halos.
  2. Adjust compression level — Lower quality until artifacts appear — stop one step earlier for balance.
  3. Compare size and preview — Typical targets: hero < 200KB, icons < 20KB — project-dependent.
  4. Download optimized bundle — Replace in `public/` and rerun Lighthouse to confirm LCP gains.

Frequently asked questions