SubFlow Logo

Image Compressor

Compress JPG, WebP, and PNG images. Tune the quality, watch the file size shrink in real time. Runs entirely in your browser, no upload.

Last updated

How image compression actually works

Modern image compression makes a deliberate trade: throw away information the human eye can't easily perceive, in exchange for a much smaller file. JPG, WebP, and AVIF all use variations of the same idea — split the image into small blocks, run a frequency-domain transform on each block, quantize the high-frequency coefficients aggressively, entropy-code the result. Lower quality settings quantize harder, which loses more detail.

PNG works differently. Its compression is lossless: a prediction filter on each row, then deflate (the same algorithm zip uses). PNG never throws anything away — which is why you can't shrink a PNG with a quality slider. The only way to make a PNG drastically smaller is to switch to a lossy format or to reduce the image's dimensions.

What the quality slider does to your image

Quality is on a 0–100 scale, but the relationship to file size is not linear:

  • 90–100: visually identical to the source for everything except specialist medical / forensic imaging. File size is only 15–30% smaller than at quality 75.
  • 75–89: the sweet spot for web photographs. Reliable, fast loads, no visible artifacts on real photos.
  • 60–74: noticeable softness on close inspection but acceptable for thumbnails and contexts where speed matters more than fidelity.
  • 30–59: block artifacts visible in flat color regions. Color banding starts appearing in skies and skin tones.
  • Below 30: deliberately stylized, broken-looking output. Not appropriate for production use.

How to use this tool

  1. Drop a PNG, JPG, or WebP image onto the drop zone.
  2. Pick the output format. "Same as input" keeps the format (best when re-compressing a JPG or WebP). Switch to JPG or WebP for real savings on a PNG.
  3. Drag the quality slider. Click Compress to encode. The widget shows the before/after sizes and the percentage saved.
  4. Adjust quality and re-compress as needed. The original file is held in memory unchanged, so each compression runs against the highest-quality source.

Beyond the quality slider — other ways to shrink images

Quality is the biggest lever, but not the only one. If you're shipping a 4000×3000 photo where the target displays at 800×600, downsizing the pixel dimensions shrinks the file far more than any quality tweak — by 90%+. Use our image resizer to drop the resolution before compressing.

Switching format can also unlock big savings. A 5 MB PNG photograph converted to WebP at quality 80 might be 400 KB — a 92% reduction with no visible quality loss. See our PNG to WebP converter for one-click format conversion.

Frequently asked questions

For photographs heading to the web, quality 75–85 is the visual sweet spot — savings are large, artifacts invisible. Below 60 you'll start seeing block artifacts on flat color regions. Above 90 the file size benefit is small. For UI screenshots and graphic art with text and hard edges, keep quality above 85 to avoid edge ringing.

Working in After Effects?

Doing motion graphics in After Effects? Subflow generates captions inside AE as native text layers — frame-accurate timing, three styles, broadcast positioning. See subflow.cc.

See Subflow