Image Compressor for Designers

Pull a JPG or PNG down to a smaller file size for the web, with a quality dial you can preview.

Every visual artefact you ship has a tool behind it. The tabs that do not need a design system: a drop-resize-compress loop before a hero lands, a QR for a poster, a swatch you picked off a screenshot. All of those happen in your browser, so the artefacts never leave the machine you are sitting at.

Open the Image Compressor →

What it does for Visual designers and brand teams

How to use it

  1. Drop the image you want to compress. The output format follows the input (JPG stays JPG, PNG stays PNG).
  2. Drag the quality slider. The preview re-encodes in real time so you can stop at the lowest number that still looks good.
  3. Save the result. The page tells you exactly how many bytes you saved and what percent of the original the new file is.

Other tools Designers reach for

Color PickerSample any pixel in an image, get hex / RGB / HSL, and pull a full palette in one click.Image ResizeResize a hero or a thumbnail to exact pixel dimensions, with export to JPG / PNG / WebP.Image Format ConverterConvert between JPG, PNG and WebP without a privacy-leaking upload.QR Code GeneratorGenerate a QR for a poster, a card, or a product label, with a foreground color you chooseBase64 Encoder / DecoderInline small assets into CSS or HTML without an upload step.

Common questions

Should I ship WebP, AVIF or plain JPEG?

Serve a newer format when your stack can negotiate it and keep a JPEG fallback for everything else. Check what your CMS and your review process accept before converting a whole library, and do not expect a client on an older toolchain to open an AVIF you sent them.

Why do my flat interface shapes look dirty after compression?

Lossy encoders spend their budget on texture, so large flat areas and soft gradients show banding and blocking first. For screenshots, icons and interface art, prefer PNG or lossless WebP and reserve lossy JPEG for photographs.

Does it matter whether I resize before or after compressing?

Resize first, then compress. Encoding a 4000px image that will be displayed at 800px spends quality on detail that is about to be thrown away, and the artefacts you introduce at full size survive the downscale where they are harder to see and harder to justify.