Compress Images for Instagram & Web

A photo straight off a phone is commonly 4-8 MB at 4032 pixels wide. Nothing on a social feed or a web page needs either number. This compressor re-encodes the image as JPEG at a quality level you control, optionally capping the width first, and shows you the resulting file size next to the original before you download anything.

The whole operation runs on a canvas element inside your browser. The file is read into memory from the drop zone, redrawn, and re-encoded locally - it is never sent to a server, which is why there is no upload progress bar and no wait.

Two separate levers reduce bytes, and confusing them is the usual reason people are disappointed. Quality changes how much detail the JPEG encoder discards at the same pixel dimensions. Max width changes the pixel dimensions themselves. The second is far more powerful, and on an oversized phone photo it is almost always the one you want first.

JPEG quality is a knob on the encoder, not a percentage of visual fidelity. Between 1.00 and about 0.85 the file shrinks substantially while almost nothing visible changes, because you are mostly discarding precision the eye was never going to use. Around 0.80 is where most photographic content still looks identical at feed size. Below roughly 0.60 you start seeing blocking in smooth gradients - skies, studio backdrops, skin - and around flat-coloured shapes.

The material matters more than the number. Photographs with fine texture hide compression artefacts well. Screenshots, logos, charts, and anything with crisp text against flat colour show them immediately as coloured fringing around the edges, because JPEG was designed for continuous-tone images and text is the opposite of that.

The preview updates live as you drag, so the reliable technique is to pull the slider down until you can see the damage, then move back up two or three steps. That lands you at the real threshold for this particular image rather than at a number someone recommended for a different one.

File size scales roughly with pixel count, which scales with the square of the width. Halving a 4000-pixel-wide photo to 2000 removes about three-quarters of the pixels before the encoder does any work at all. Dropping quality from 0.9 to 0.7 on the full-size original will not come close to the same saving.

Choose the cap by destination. Instagram serves feed images at roughly 1080 pixels wide, so anything beyond about 1440 is discarded by their pipeline anyway. Full-width web hero images are well served at 1920. Inline blog images rarely need more than 1200. Setting max width to 0 disables the cap and leaves the original dimensions intact.

There is no upscaling. If your image is already narrower than the cap, the width setting does nothing and only the quality slider affects the output.

Your file is read as a data URL and decoded into an image object. If a max width is set and the image is wider, target dimensions are computed by scaling the height proportionally so the aspect ratio is preserved exactly. A canvas is created at those dimensions, filled with opaque white, and the image is drawn onto it.

That white fill is deliberate and has a consequence worth knowing: JPEG has no alpha channel, so any transparent region in a source PNG becomes white rather than black or garbage. If your logo was designed to sit on a dark background, compressing it to JPEG here will surround it with white.

The canvas is then encoded with toBlob at image/jpeg and your chosen quality value. The resulting blob size is measured directly and compared with the original file size to produce the savings percentage - so that figure is a real byte-for-byte measurement, not an estimate. Every parameter change re-runs the whole pipeline from the decoded original, which means quality loss never accumulates across adjustments.