Compress Images Without Wrecking Quality: JPG vs PNG vs WebP

Pick the format before you touch a slider

Most "my image is too big" problems are format problems, not compression problems. A photograph saved as PNG can be several times larger than the same photograph as a JPEG, and no amount of slider-dragging fixes that, because PNG is not built for continuous-tone images. Start here:

Our image converter exports to PNG, JPG or WebP in the browser, encoding JPG and WebP at a fixed 92% quality and PNG losslessly. Converting a PNG to JPG fills the canvas with white first, because JPEG cannot store transparency — that is the one conversion that changes your image in a way no quality setting can undo.

What a quality slider actually does

JPEG does not store your pixels. It converts blocks of the image into frequency components, then divides those components by a quantization table and rounds — throwing away the fine detail human vision is least likely to miss. The quality number scales that table. At 90% the divisors are gentle and little is lost; at 40% they are aggressive, and you start seeing the machinery: blocky 8×8 patterns, "mosquito noise" around hard edges, and banding where a smooth gradient gets flattened into steps. Lossy WebP works on a similar principle with a more modern encoder, which is why it usually produces a smaller file at the same perceived quality.

The important consequence: quality is not a percentage of anything you can see. It is a knob on an encoder, and the same setting produces wildly different file sizes depending on how much fine detail the image contains. A photo of foliage at 70% may stay large; a portrait against a plain wall at 70% may collapse to a fraction of its size.

How the slider behaves in our compressor

Our image compressor runs the open-source browser-image-compression library inside a Web Worker, so the pixels never leave your device. Four details are worth knowing before you interpret its numbers:

• The slider runs 10% to 100% in 5% steps and defaults to 70%, and compression re-runs each time you release it, so comparing two settings takes seconds.
• The output format always matches the input. A JPG comes back as a JPG, a PNG as a PNG. To change format, use the converter instead.
• For JPG and WebP the slider is the encoder quality described above. For PNG there is no such knob, so the library re-encodes with a color budget of 4,096 × the slider value — 2,867 colors at 70%. An image that already uses fewer colors than that is unaffected, which is exactly why recompressing a screenshot does very little.
• Images longer than 4,096 pixels on their longest side are scaled down to it. A 4032 × 3024 phone photo sits just under that cap and keeps its full dimensions, so the only thing changing is the encoding.

Cut pixels first — it beats every slider

File size scales with the number of pixels you keep, and this is where the largest painless wins live. A 12-megapixel phone photo is 4032 × 3024, or 12,192,768 pixels. Displayed in a 800 × 600 slot on a page, that is 480,000 pixels — the image carries 25 times more data than the layout can show. Even allowing for a high-density screen at double resolution, 1600 × 1200 still means you shipped 6.35 times the pixels needed.

So the order of operations is: resize to the largest size you actually display, then choose a format, then tune quality. Our image resizer keeps the aspect ratio locked by default so you set one dimension and the other follows. One thing to plan around: it exports PNG, which is lossless but bulky for photographs — so for a photo, run the resized file through the converter or the compressor afterward. Resize, then compress.

Hitting a page-weight budget

"Make it smaller" is not a target. A budget is. Decide what a page is allowed to weigh in total, subtract everything that is not images, and divide what remains by the number of images. Suppose you set a 1 MB budget for a page whose HTML, CSS, JavaScript and fonts come to about 300 KB. That leaves 724 KB for six images, or roughly 121 KB each. Now you have a number to aim at rather than a feeling.

Working backward from that per-image figure:

1. Resize each image to its real display width — usually the largest slot it occupies in your layout, optionally doubled for high-density screens.
2. Convert photographs to WebP or JPEG; keep screenshots and flat graphics as PNG.
3. Compress at 75–80% and read the output size. Our compressor shows the original and result side by side with the percentage saved, so you can see immediately whether you are near budget.
4. If a photo is still over budget, reduce its dimensions before you reduce quality further. Fewer pixels at good quality nearly always looks better than more pixels at bad quality.
5. If one image refuses to fit — a detailed panorama, say — spend another image’s allowance on it and compress the simple graphics harder. Budgets are per page, not per file.

For a folder of images at one setting, our bulk image compressor applies the same quality to every file you drop and lists the before and after sizes, which makes it easy to spot the one outlier eating your budget.

How compression loss compounds

Lossy formats have no memory of what they discarded. Re-open a 70% JPEG, save it again at 70%, and the encoder does not restore the original detail — it quantizes an image that was already quantized, adding a second layer of error on top of the first. Do that a few times across edits, downloads and re-uploads and you get the softened, blotchy look of an image that has been around the internet.

Two practical rules follow. First, do all your editing in a lossless working file and export the lossy version once, at the end. Second, when someone sends you a compressed JPEG and you need a smaller one, resizing is safer than re-compressing, because throwing away whole pixels does less visible damage than re-quantizing the ones you keep.

A side effect worth knowing: any tool that redraws an image through a canvas — our converter, resizer and EXIF remover all do — writes a brand-new file containing only pixels, so camera details, capture time and GPS coordinates are dropped. That is usually welcome. If it is the actual goal, our guide on the location data hidden in your photos covers what to check before sharing.

Two things that are not compression

Base64 encoding. It converts binary to text by representing every 3 bytes as 4 characters, so the payload grows by exactly one third plus padding: a 120 KB image becomes 160 KB. Inlining a 30 KB icon that way costs 40 KB of markup but saves a network request, which can be a fair trade. Doing it to a hero photo is never one.

Changing the extension. Renaming photo.png to photo.jpg does nothing to the bytes inside; the file is still a PNG that now misdescribes itself. Real conversion re-encodes the image data, which is what the converter does.

The short version

• Photographs: WebP or JPEG. Screenshots, text, logos: PNG. Transparency: PNG or WebP.
• Resize to display size before you compress. It is the biggest and safest saving.
• Start at 75–80% quality and check gradients and edges at real viewing size.
• Compress once, from the original, and archive that original.
• Set a per-page byte budget so "small enough" has a definition.