How to Compress Images Without Losing Quality

Published July 29, 2026 · By the PixelPalette team

Large, uncompressed images are one of the most common reasons websites load slowly — and slow websites lose visitors, conversions, and search ranking. The good news is that "compress" does not have to mean "look worse." Understood correctly, image compression is mostly about removing information a viewer would never notice was missing in the first place. Here is how it actually works, and a practical workflow for shrinking images with no visible quality loss.

Two fundamentally different kinds of compression

Lossless compression shrinks a file by finding more efficient ways to store the exact same information — similar to how zipping a folder makes it smaller without changing any of the files inside. Unzip it, and you get back precisely what you started with, bit for bit. PNG uses lossless compression, which is why a PNG can be compressed somewhat but never nearly as small as a photographic JPEG of the same image — there is a hard limit to how much smaller data can get without actually discarding some of it.

Lossy compression shrinks a file by identifying and discarding information the human eye is least likely to miss, then storing an approximation of the rest. JPEG and lossy WebP both work this way. Crucially, "lossy" does not mean "low quality" — it means some data is discarded, and the skill (largely automated by good software) lies in discarding the data that costs the least perceptible quality relative to the file size saved. A well-compressed lossy JPEG at 85% quality is often visually indistinguishable from the uncompressed original while being a fraction of the size.

Where the "sweet spot" actually is

Compression quality settings typically run from 0 (maximum compression, maximum quality loss) to 100 (minimum compression, maximum quality). The relationship between quality setting and file size is not linear — going from 100 to 90 often cuts file size dramatically with a quality difference invisible to most viewers, while going from 20 to 10 saves comparatively little extra space while introducing very visible artifacts. This is because the algorithm spends its early compression "budget" discarding genuinely imperceptible data, and only starts cutting into noticeable detail once the easy savings are exhausted.

For most web use, JPEG quality settings between 75 and 85 hit this sweet spot: substantial size reduction from the original, with no quality loss visible at normal viewing distance and zoom level. Go much below 60 and compression artifacts — blocky patches, especially around sharp edges and text — start becoming visible even to casual viewers.

A practical compression workflow

1. Resize to actual display dimensions first. This is the single biggest lever, and it is not really "compression" at all — it is simply not storing pixels nobody will ever see. An image displayed at 800px wide gains nothing from being saved at 4000px wide except wasted file size; resize before you compress, not after.
2. Choose the right format for the content. Photographs compress far more efficiently as JPEG or WebP than as PNG; flat-color graphics and text-heavy images compress better as PNG (or, better yet, as SVG if they are simple shapes). Using the wrong format is often a bigger cost than any quality setting — see our image file formats guide for the full breakdown.
3. Compress at 75–85% quality for photographic JPEGs. Export at this range as a strong starting point, then spot-check the result at actual size (not zoomed in past 100%, which exaggerates artifacts no viewer will actually encounter).
4. Strip unnecessary metadata. Photos, especially straight from a camera or phone, often carry substantial embedded metadata (camera settings, GPS location, color profiles) that adds file size without contributing to the visible image. Most compression tools offer an option to strip this automatically.
5. Consider modern formats for web delivery. WebP typically produces 25–35% smaller files than equivalent-quality JPEG or PNG, which is why so many websites now serve it as their default format. See our format guide for browser support considerations.
6. Use responsive images for the web. Rather than sending one large image to every device, modern websites use the HTML srcset attribute to serve appropriately sized versions to phones, tablets, and desktops — a technique worth knowing even if you rely on a website builder that handles it automatically, so you can verify it is actually happening.

Common compression mistakes

• Re-saving a JPEG repeatedly. Every time a lossy JPEG is opened, edited, and re-saved as JPEG again, another round of compression is applied on top of the last, compounding quality loss — a phenomenon sometimes called "generation loss." Always edit from the original source file, not from an already-compressed export, and only export to the final lossy format once, at the end.
• Compressing already-tiny thumbnails aggressively. Compression artifacts are proportionally more visible on small images, since there is less detail to begin with to mask the loss — small images often need a higher quality setting than large ones to look equally clean.
• Ignoring dimensions and only adjusting quality. A correctly sized image at 85% quality will almost always beat an oversized image compressed down to 40% quality, both in file size and in visible result. Resize first.
• Using PNG for photographs "to be safe." This is one of the most common and costly mistakes — a photographic PNG can be five to ten times larger than an equivalent-quality JPEG for no visible benefit, since PNG's lossless approach is not built to approximate photographic gradients efficiently.

Tools that make this easy

You do not need professional software to compress images well. Built-in export dialogs in Photoshop, Figma, and Affinity Photo all include a live quality slider with a file size preview, letting you find the sweet spot visually. Dedicated web-based compressors (Squoosh, TinyPNG, and similar tools) let you drag and drop an image and compare compressed versus original side by side before downloading. For bulk workflows, command-line tools and build-pipeline plugins can automatically compress every image in a project to a target quality on export, removing the need to think about it per image.

How to verify you have not gone too far

Animated content: compress or replace?

Animated GIFs deserve a special mention in any compression discussion, because they are frequently the single heaviest asset type on a page relative to how much visual value they add. A GIF's limited 256-color palette compresses poorly compared to modern alternatives, and a short looping clip that would be a lightweight video file balloons into a surprisingly large GIF simply because of how the format encodes color and motion. Where compatibility allows, converting animated GIFs to a short looping MP4 video or an animated WebP typically cuts file size dramatically — often by 80% or more — with equal or better visual quality, since video codecs and modern image formats are built with far more efficient motion compression than GIF's decades-old approach ever was. If GIF compatibility is still required for a specific platform, at minimum reduce the frame count and physical dimensions to the minimum acceptable for the use case, since both directly and significantly affect file size.

Compression and color accuracy

Aggressive lossy compression can subtly shift colors, since the algorithm approximates similar-looking shades to save space — this matters if you are relying on precise brand colors from a compressed image. When accuracy matters, extract colors from the highest-quality version of an image available, ideally before heavy compression has been applied. Our color extraction guide covers this in more detail.

Batch compression for larger projects

Compressing images one at a time through a web tool works fine for the occasional photo, but it does not scale to a project with hundreds of product images or a photographer's full shoot. For larger workflows, most professional editing tools support export presets and batch actions that apply the same resize, format, and quality settings across an entire folder in one operation. Website build tools and content management systems increasingly handle this automatically on upload, generating multiple appropriately sized and compressed versions of every image behind the scenes — but it is worth verifying this is actually happening on your specific platform rather than assuming it, since an unoptimized media library is one of the most common hidden causes of a slow website.

Compression is one part of a larger performance picture

Well-compressed images help most when paired with a few complementary techniques. Lazy loading defers loading images that are not yet visible in the viewport until the visitor scrolls near them, meaning a page with fifty images does not force the visitor's browser to download all fifty before the page becomes usable. Responsive images, mentioned earlier, ensure a phone visitor downloads a phone-appropriate file size rather than the same oversized file a desktop visitor receives. And a content delivery network caches compressed images closer to each visitor geographically, reducing load time further regardless of compression quality. None of these replace good compression — they compound with it, which is why the fastest-loading websites are usually applying several of these techniques together rather than relying on any single fix.