Compress Images for the Web: The Complete Guide

Pick the right format, find the quality sweet spot, and hit exact upload limits like 100 KB — this guide covers the whole job, with free browser tools for each step and no uploads anywhere along the way.

Why image compression matters

Images are the heaviest thing on most web pages — typically more than half of a page's total bytes. Every megabyte you shave off is download time your visitors do not spend waiting, and on mobile connections the difference between a 2 MB photo and a 200 KB one is often the difference between a page that loads and one that gets abandoned. Compression also matters far from the web: job portals cap uploads at 100 or 200 KB, visa and government forms enforce strict limits, email attachments choke around 10-25 MB, and marketplaces reject product photos over a few hundred kilobytes. In all of these cases the file must shrink without turning into mush — which is exactly what this guide teaches.

Lossy vs lossless: the one distinction that matters

Compression comes in two flavors. Lossless shrinkage re-describes the image more efficiently and restores every original pixel perfectly — PNG and WebP both support it. Lossy compression throws away detail the eye is least likely to miss, trading small visible losses for large size wins — JPG is always lossy; WebP can be either. The practical rule: photos (where tiny losses are invisible) compress dramatically with lossy methods, while screenshots, logos and anything with sharp text or transparency need lossless PNG so edges stay crisp and see-through areas stay see-through.

Choosing the format: JPG vs PNG vs WebP

Format	Best for	Why
JPG	Photographs, gradients	Lossy but efficient on smooth tones — no transparency support
PNG	Screenshots, logos, graphics, transparency	Lossless and alpha-channel aware, but heavy on photos
WebP	Both — modern websites and apps	Lossy or lossless, usually 25-35% smaller than the JPG/PNG equivalent

Three decision rules cover almost everything. If the image is a photo and the destination accepts WebP, export WebP. If it must open anywhere — old upload forms, email clients, forums — export JPG for photos and PNG for graphics. And if the image has transparency, it is PNG or WebP territory, never JPG, which fills transparent areas with solid color.

The quality-size tradeoff

Lossy quality settings do not shrink the file linearly — they collapse it. Dropping from 100 to 80 usually halves the file; dropping from 80 to 60 halves it again, with the first visible artifacts (soft halos around sharp edges, faint blockiness in flat skies) typically appearing somewhere below 60-70. The efficient zone for photos is quality 70-80: roughly a quarter of the original size with quality the eye cannot separate at normal viewing dimensions.

Two habits make this tradeoff painless. First, always judge artifacts on the actual image at its real display size — a portrait compresses differently than a starfield, and universal numbers are only starting points. Second, use a tool with a live before/after preview and a real-time size readout, so you see the file size respond as you move the slider instead of exporting blindly. The free image compressor works exactly this way in your browser: drag the quality slider, watch the size, download when the tradeoff looks right.

The same photo exported at quality 90 and quality 60 side by side — visually near-identical, with the quality-60 file roughly half the size — Quality 90 vs 60: the difference lives in the file size first, in the pixels last.

The target-size method: hitting exact limits like 100 KB

Upload forms do not ask how your file looks — they ask how much it weighs. When a portal says "maximum 100 KB", guessing with a slider means exporting, checking the size, lowering the quality, exporting again. The target-size method inverts that loop: you state the limit and the tool finds the highest quality that fits under it automatically.

The free PNG to 100KB compressor is built for this exact job: it takes your target (100 KB by default), searches the quality range, and hands back the best-looking file that passes — processed locally, nothing uploaded. It matters because PNG files are the usual offenders: a phone screenshot or an exported graphic routinely weighs 1-3 MB, ten to thirty times over a typical 100 KB cap. The same logic applies at other targets — 200 KB for job portals, 500 KB for marketplaces — so whatever the limit is, work to the target, not to a quality guess.

Resize first, compress second

The single biggest lever is not quality — it is dimensions. A 4000×3000 phone photo contains twelve million pixels whether it is displayed on a blog at 800 pixels wide or blown up on a cinema screen; showing it at 800 pixels wastes eleven million of them. Scaling the picture down to its real display size before compressing typically cuts the file by more than any quality setting could, with literally zero visible cost at the size it will be shown.

Sensible targets for the web: content images around 1200-1600 pixels wide, thumbnails 300-600 pixels, avatars 200-400. The free image resizer scales to exact pixels or quick percentages with the aspect ratio locked and transparency intact — make it step one of every compression job.

A 4000-pixel-wide phone photo resized to 1200 pixels and then compressed — file size dropping from megabytes to a couple hundred kilobytes with no visible difference — Resize first, compress second: dimensions do the heavy lifting, quality does the fine-tuning.

A workflow that covers 90% of cases

Resize the image to its real display dimensions (largest size it will actually appear at).
Pick the format: WebP where accepted; otherwise JPG for photos, PNG for graphics and anything transparent.
Compress: quality 70-80 for photos with a live preview; a target-size pass when a hard limit exists.
Check the bytes against the limit, and the pixels against where the image will live. Done.

Two mistakes undo otherwise good work. Never re-compress an already-compressed JPG repeatedly — each save-generation adds artifacts on top of artifacts; always go back to the highest-quality source you have. And do not export photos as max-quality PNG "to be safe": a PNG of a photo routinely weighs five to ten times its JPG equivalent while looking identical, and PNG's losslessness protects detail that lossy quality 75 would preserve just as effectively at a fraction of the size.

Frequently asked questions

Which image format gives the smallest file size?

WebP, in most cases — the same picture typically lands 25 to 35 percent smaller than a comparable JPG, with PNG savings often larger. Use WebP when the destination accepts it (modern websites do); fall back to JPG for photos and PNG for graphics when you need universal compatibility with older upload forms.

How far can I compress an image without visibly losing quality?

For photos, a JPG or WebP quality setting between 70 and 80 is usually indistinguishable from the original at normal viewing size, and roughly halves the file. Below 60, blurring around sharp edges starts to show. Judge with your own eyes on the actual image — compression artifacts depend far more on the picture's content than on any universal number.

How do I compress a PNG to under 100 KB?

Use a target-size tool instead of guessing with a quality slider. The free PNG to 100KB compressor takes the 100 KB limit as input and automatically searches for the highest quality that lands under it — no trial and error, and the file is processed in your browser without uploading.

Should I resize an image before compressing it?

Yes, almost always. A 4000-pixel-wide photo displayed at 800 pixels wastes more bytes than any quality setting will ever save. Scale it to the largest size it will actually be shown at first, then compress — resizing first typically cuts the file by more than compression alone could, at zero visible cost.

Does compressing an image reduce its resolution?

No — resolution (pixel dimensions) and compression quality are independent. Compression re-describes the same pixels more efficiently; it does not change how many pixels the image has. Only resizing changes resolution, which is why the two steps belong in your workflow separately: resize for display size, compress for file size.

Next step: shrink your images now

The free image compressor gives you the live quality slider and size readout — JPG, PNG and WebP, processed in your browser, no uploads, no watermark.

Open the compressor →