Utilify

Image Compressor

Compress JPG, PNG, and WebP images directly in your browser. Tune quality, see savings instantly.

Built and maintained by Jay SooUpdated August 22, 2026

How to use Image Compressor

  1. 1
    Drop an image

    Drag and drop or pick a file. Up to 20 MB.

  2. 2
    Adjust quality

    Move the quality slider to balance file size and fidelity.

  3. 3
    Download

    Save the compressed image — original is never uploaded.

About Image Compressor

Web pages today routinely load megabytes of images, often most of which is wasted: a 4000×3000 photo from a smartphone might be displayed at 800×600 in the actual layout, with the browser scaling it down at render time. Compressing images before upload — both by re-encoding at lower quality and by switching to a more efficient format — typically cuts file sizes by 60-90% with no perceptible visual loss.

WebP, a modern format from Google, achieves 25-34% better compression than JPEG at the same visual quality according to Google's own WebP compression study, with full alpha-channel transparency support — making it the right default for almost all web use. Utilify compresses images using your browser's Canvas API: your photos never leave your device, regardless of size or content. The quality slider controls lossy encoding strength; 80-85 is typically indistinguishable from the original at roughly half the file size.

It helps to understand the difference between lossy and lossless compression. Lossy formats like JPEG and lossy WebP discard image detail that the eye is unlikely to notice, achieving dramatic size reductions; lossless formats like PNG preserve every pixel exactly but compress far less. For photographs, lossy is almost always the right choice — the savings are huge and the loss is invisible at sensible quality settings. For sharp-edged graphics, logos, and screenshots with text, lossless or high-quality settings avoid the smudgy artifacts lossy compression can introduce around hard edges.

The quality slider is the main lever, and its effect is non-linear. Dropping from 100 to 85 often removes more than half the file size while leaving the image visually identical, whereas pushing below about 60 starts to show blocky artifacts in skies, gradients, and flat color areas. The sweet spot for web photos is generally 75-85; nudge it up for hero images where fidelity matters and down for thumbnails where small size wins.

Smaller images do more than load faster — they directly improve Core Web Vitals, especially Largest Contentful Paint, which Google uses as a ranking signal. Re-encoding through the canvas also has a useful side effect: it strips embedded EXIF metadata such as GPS coordinates and camera details, so compressing a photo before publishing it removes location data you may not want to share.

WebP vs JPEG vs PNG — what the output selector actually changes

The three output choices are not interchangeable containers for the same pixels. Each one makes a different trade, and the quality slider only applies to two of them:

WebPJPEGPNG
CompressionLossy — discards detail the eye is unlikely to noticeLossyLossless — every pixel preserved exactly
Quality sliderAppliesAppliesIgnored — PNG has no lossy quality knob, which is why the slider disappears when you select it
TransparencyPreservedLost — transparent areas are filled with blackPreserved
Best forAlmost everything: the default here for a reasonWhen the destination strictly requires a .jpgScreenshots, logos, and text, where lossy artifacts are unacceptable
Typical size for a photoSmallestSmallLargest — often bigger than the JPEG you started from

WebP also has a lossless mode, but browser canvas encoders are geared toward the lossy one — for guaranteed-lossless WebP, use a dedicated encoder such as cwebp.

When to use Image Compressor

  • Faster page loads

    Shrink hero images and gallery photos before uploading to improve Core Web Vitals scores.

  • Email attachments

    Reduce photo file sizes to fit inside email attachment limits without resizing dimensions.

  • Social media uploads

    Pre-compress so platforms do not re-encode your images with their own (worse) settings.

The six ways image compression goes wrong

  • Exporting a photograph as PNG

    PNG is lossless, so it cannot discard any of the sensor noise and fine gradient detail that makes photographs expensive to store. Run a photo through PNG output and the "compressed" file routinely comes out larger than the original — which is why this tool shows a warning and suggests switching to WebP when that happens. PNG output is for screenshots and graphics, not photos.

  • Converting a transparent logo to JPEG

    JPEG has no alpha channel. When the canvas encoder writes a JPEG, every transparent pixel is composited onto black — so a logo with a transparent background comes back sitting on a solid black rectangle. Keep transparency by choosing WebP or PNG output instead.

  • Treating quality 100 as "the original"

    A lossy encode at quality 100 is still a re-encode: the image is decoded, requantized, and written again. You usually get a file larger than a well-tuned source with zero visible fidelity gained. The slider value is an encoder parameter, not a percentage of the original — which is also why quality 80 in one tool does not look identical to quality 80 in another.

  • Re-compressing the same image again and again

    Each lossy pass discards a little more detail, and the artifacts compound — the digital equivalent of photocopying a photocopy. An image that has been through three rounds of "download, edit, re-export" shows ringing and blockiness that no quality setting can undo. Compress once, from the best original you have, and keep that original.

  • Compressing when the real problem is pixel count

    A 4000×3000 phone photo displayed at 800px wide carries 25 times more pixels than the layout will ever show. No quality slider can compete with removing them: resize to the display dimensions first (our Image Resizer does this locally too), then compress what remains. The two operations together routinely beat either one alone by a wide margin.

  • Counting on metadata to survive — or forgetting that it will not

    Re-encoding through the canvas produces a brand-new file with no EXIF block, which cuts both ways. If you rely on embedded copyright, camera, or GPS fields, export from your photo tool instead, because compression here removes them all. If you want them gone before publishing — location data especially — that same behavior is a quiet privacy win. Modern browsers apply the EXIF orientation to the pixels before re-encoding, so photos stay upright even though the orientation tag itself is gone.

Frequently asked questions

Is my image uploaded anywhere?+

No. Compression happens entirely in your browser using the Canvas API, so even large or sensitive images never leave your device.

Why is my "compressed" file larger than the original?+

Two usual causes: the source was already well-optimized, so re-encoding has nothing left to remove, or the output format is wrong for the content — a photograph sent to lossless PNG output almost always grows. The tool flags this case with a warning; switching the output to WebP usually turns the loss into a real saving.

What is a good quality setting?+

75–85 is the web sweet spot — usually indistinguishable from the original at roughly half the file size. Below about 60, blocky artifacts start to appear in skies and gradients.

Which formats can I compress?+

JPG, PNG, and WebP. For photographs, exporting to WebP at 80 gives the best size-to-quality ratio in almost every case.

Does compressing strip EXIF metadata?+

Yes. Re-encoding through the canvas drops embedded metadata such as GPS coordinates and camera info — a useful privacy benefit before publishing a photo.

What is the difference between lossy and lossless?+

Lossy (JPEG, lossy WebP) discards barely-noticeable detail for big size savings — ideal for photos. Lossless (PNG) keeps every pixel but compresses far less — better for logos, screenshots, and sharp-edged graphics.

Related tools

From the blog