How to compress images without losing quality

"Without losing quality" is a half-truth. All lossy compression discards some information. What we really mean is: without losing visible quality. Without artifacts that any normal person would notice in normal viewing conditions.

That's an achievable goal. Almost every photo on the web could lose 70-90% of its file size with zero visible degradation. Here's exactly how.

The four levers of image size

Image file size is determined by four things, in roughly decreasing order of impact:

1. Pixel dimensions — a 4000×3000 image has 16× as many pixels as 1000×750.
2. Format — AVIF is roughly half the size of JPG at the same visual quality.
3. Quality setting — JPG at 85 is half the size of JPG at 95, with no visible difference.
4. Metadata — EXIF data, embedded thumbnails, and color profiles can add 50-500 KB.

Most "image compression" tools only touch the quality slider, which is the third-largest lever. The biggest wins come from the first one.

Step 1: resize to the actual display size

This is the single biggest mistake people make. They take a 4032×3024 photo from their iPhone and upload it directly. The browser then has to download all 12 million pixels, decode them, and scale them down to display at 800×600.

If your image will be shown at 800 pixels wide, resize it to 1600 pixels wide (2× for retina displays). That alone cuts file size by 75% before you touch quality.

Rule of thumb: never serve images more than 2× the display size. Hero images shown at 1200px? Resize to 2400px max. Thumbnails shown at 200px? 400px is plenty.

Step 2: pick the right format

Format choice can cut your file size in half before you do anything else:

• Photographs: WebP at quality 80 is typically 30% smaller than JPG at quality 85, visually identical. AVIF is another 30% smaller than WebP — but slower to encode and less universally supported.
• Screenshots and graphics: PNG for crisp edges, but WebP lossless is usually smaller. Use WebP whenever possible.
• Logos and icons: SVG when possible. Vector files are usually a few KB regardless of display size.

For broad compatibility, WebP is the modern default. All current browsers support it, including Safari since 2020.

Step 3: use the right quality setting

The quality slider in image encoders maps to compression aggressiveness. Higher numbers = more data preserved = larger files. But the relationship isn't linear — there's a sweet spot around 80-85 where you get most of the visual quality and most of the size reduction.

Practical settings by use case:

• Archival storage: quality 95-100. Visually indistinguishable from the original.
• Print or large display: quality 90. Imperceptible loss even on close inspection.
• Web content (default): quality 80-85. Sweet spot. Most people can't tell the difference from quality 100 in side-by-side comparison.
• Thumbnails: quality 70-75. Subtle artifacts only visible when zoomed in.
• Background images: quality 60-65. Visible artifacts on close inspection, but fine when the image is in the background.

If you're not sure, use 82. It works for the overwhelming majority of cases.

Step 4: strip metadata you don't need

A photo from a modern phone can have 50-200 KB of metadata: GPS coordinates, camera settings, embedded thumbnails, color profiles. For web display, most of this is dead weight. Stripping it costs nothing visually and saves real bytes.

The exception: if you're a photographer publishing portfolio work, you may want to keep the camera settings and copyright information. Use a tool that lets you selectively strip metadata rather than removing all of it.

The complete workflow

1. Start with the best source — the original file from your camera or design tool, not a re-saved JPG.
2. Resize to 2× display size. If unsure of display size, 2000px on the long edge is a safe default.
3. Pick the format: WebP for photos and web graphics, PNG only when you need lossless or maximum compatibility.
4. Set quality to 82. Adjust only if you can see artifacts that bother you.
5. Strip metadata unless you need to preserve specific fields.
6. Compare visually for important images. Open the original and the compressed file side by side at 100% zoom.

Following this workflow, a 6 MB iPhone photo typically becomes a 200-400 KB WebP file — a 90-95% reduction — with zero visible degradation when viewed at normal sizes.

When compression actually does damage

Some content types degrade visibly under standard compression and need special care:

• Text in images — sharp letter edges get fuzzy under JPG compression. Use PNG or WebP lossless.
• Line art and diagrams — same problem. Sharp transitions become muddy. PNG or WebP lossless.
• Screenshots — usually full of text. Use PNG or WebP lossless.
• Gradients — can develop "banding" (visible color stripes) at low quality. Bump quality to 90+ if banding appears.
• Already-compressed images — re-compressing a low-quality JPG amplifies its existing artifacts. Start from the highest-quality source you have.

Don't compress twice

Every lossy compression cycle throws away more data. If you compress a JPG, then edit it and save again, you've lost quality twice. For images that will be edited, keep the master file in a lossless format (PNG, TIFF, or RAW) and only compress to JPG/WebP at the final export step.

Try the workflow with pictoolkit's image compressor. Drop a file, adjust the quality slider, and watch the file size and visual difference in real time. All processing happens on your device — your images never leave your browser.