🗜️ Image Compressor

Shrink JPEG, PNG, WebP and AVIF images with a live before/after preview. Runs entirely in your browser — your image is never uploaded.

About the Image Compressor

This tool re-encodes an image at a quality level you control and shows you the result next to the original before you commit to it. Everything — decoding, re-encoding, the preview — happens inside your browser using the Canvas API. The image is never uploaded, which is a claim worth checking rather than trusting: open your browser's network panel and watch nothing leave.

Compression here means two levers. Quality trades file size against visual fidelity in lossy formats (JPEG, WebP, AVIF). Format changes the codec doing the compressing: WebP typically beats JPEG by 25–35% at the same visual quality, and AVIF beats WebP where the browser can encode it. The before/after slider exists because the only honest answer to "how low can I go?" is your own eyes on your own image.

How to use it

Drop an image (or click to pick one) — PNG, JPEG, WebP, AVIF or GIF up to 20 MB.
Pick an output format. WebP is the usual best answer for photos.
Drag the quality slider and watch the size verdict update live.
Sweep the before/after divider across detailed areas to check for artefacts.
Download — the filename keeps your original name with the new extension.

Frequently Asked Questions

Does this upload my image to a server?

No. The image is decoded, re-encoded and previewed entirely inside your browser using the Canvas API. You can verify this in your browser's network panel: after the page loads, no request carries your image anywhere. That is also why there is no file-size meter counting against a plan — there is no server doing the work.

Which output format should I choose?

For photographs, WebP at quality 75–85 is usually 25–35% smaller than an equivalent JPEG, and AVIF smaller still where your browser supports encoding it. For screenshots, diagrams and anything with sharp edges or text, PNG stays crisp; WebP handles those well too. JPEG remains the safe choice when the file must open absolutely anywhere, including very old software.

Why did my file get BIGGER after compressing?

The original was already well optimised — often by the tool that produced it. Re-encoding cannot always beat a good previous encode, especially at high quality settings or when converting a small graphic from PNG to a lossy format. The tool tells you when this happens instead of handing you a worse file; keep the original in that case.

Is quality 80 always safe?

For most photos, quality 75–85 is visually indistinguishable from the original at normal viewing sizes — that range is where the big savings live. Use the before/after slider to check areas with fine texture, gradients (skies!) and text. Banding in a gradient is usually the first artefact to appear.

What happens to the EXIF metadata in my photo?

Re-encoding through a canvas drops all metadata: EXIF camera settings, GPS location, colour profiles and thumbnails. For a file you are about to publish, that is usually what you want — smaller and more private. If you need to inspect what was in there first, use the EXIF Viewer tool.

Can I compress an animated GIF?

Only its first frame — the Canvas API decodes a single frame, so animation is not preserved. The tool warns you when it detects a GIF. For animated content, converting to a video format (MP4/WebM) with a desktop tool is the real size win anyway.

Complete guide to compressing images for the web

Images are the heaviest thing most web pages ship. The median page sends more image bytes than JavaScript, CSS and HTML combined, and a single unoptimised phone photo — 4 to 8 megabytes straight off the camera — can outweigh everything else on the page put together. Compressing images is the single highest-leverage performance fix available to most sites, and it requires no code changes at all.

Braxik's image compressor re-encodes JPEG, PNG, WebP and AVIF images at a quality level you control, entirely inside your browser. The file is decoded with the Canvas API, re-encoded at your chosen quality, and previewed against the original with a draggable before/after slider — so the decision about how much quality to trade is made with your eyes on your image, not with a rule of thumb.

Because everything runs client-side, there is nothing to wait for and nothing to trust: no upload queue, no server processing your photo, no size meter counting against a plan. Your browser's network panel will confirm that the image never leaves your machine. That matters for unreleased product screenshots, client work under NDA, and personal photos alike.

The tool is also honest about the cases where compression loses. Re-encoding an already-optimised file, or converting a small sharp-edged graphic from PNG into a lossy format, can produce a bigger file — and when that happens the tool says so plainly and tells you to keep the original, instead of handing you a worse file with a success message.

How it works

The image is decoded off the main thread with createImageBitmap, validated by its actual file signature (magic bytes) rather than its extension, and checked against both a byte cap and a decoded-pixel cap — the latter protects against decompression bombs, tiny files that declare enormous pixel dimensions.

Re-encoding happens in a Web Worker on an OffscreenCanvas, so dragging the quality slider never freezes the page — a full-quality re-encode of a 12-megapixel photo costs hundreds of milliseconds, and doing that on the main thread would destroy the page's responsiveness. Each slider movement supersedes the previous encode, so only the latest settings ever reach the output.

The output is compared byte-for-byte against the input and the verdict is displayed as a percentage. For JPEG output, transparent regions are flattened onto white first, because JPEG has no alpha channel and would otherwise render transparency as solid black.

Common uses

Compress hero images and product photos before uploading them to a CMS, so the page's Largest Contentful Paint isn't waiting on a 6 MB original.
Convert PNG screenshots to WebP for documentation sites and README files, typically cutting size by half or more with no visible difference.
Shrink photos below an upload limit — job portals, government forms and email attachments with 2 MB caps are the classic cases.
Prepare images for a blog post or newsletter where total page weight affects deliverability and reader experience on mobile connections.
Batch-shrink a folder of images one at a time before committing them to a git repository, where large binaries bloat every future clone.
Re-encode AI-generated images, which are typically delivered as oversized PNGs, into web-appropriate WebP or JPEG.
Strip metadata as a side effect: a canvas re-encode drops EXIF data, GPS coordinates and colour profiles, which is usually what you want for published images.

Before you rely on the result

Use the before/after slider on areas with smooth gradients — skies, shadows, skin — because banding appears there first as quality drops.
Check text and sharp edges when compressing screenshots; if they smear, switch the output format to PNG or raise the quality rather than accepting artefacts.
Compare the output size honestly: if the tool reports the file got bigger, keep your original — that result is real and common with already-optimised files.
Prefer WebP at quality 75–85 for photos as the default web format in 2026; use AVIF where the browser supports encoding it and maximum savings matter.
Remember that GIF input is flattened to its first frame — animation does not survive a canvas decode, and the tool warns when this applies.
Keep an uncompressed master copy of important images; lossy compression is one-way, and re-compressing an already-compressed file compounds the loss.
For images that must carry an ICC colour profile (professional photography workflows), use a colour-managed desktop tool — canvas re-encoding drops the profile.