How to Compress Images Without Losing Quality
Why image compression matters more than you think
You're uploading product photos to your store and each one is 4MB. Page load crawls. Customers bounce. Google notices the slow Core Web Vitals and pushes you down in search results. A single uncompressed hero image can add three or four seconds to your page load on a mobile connection, and studies consistently show that every additional second of load time costs you conversions.
This isn't a niche problem. Images account for roughly half of the total transfer size on the average web page. If your site loads 2MB of images, that's 2MB your visitors are waiting for before they can scroll, read, or buy anything. On a 3G connection — still common in much of the world — that's upwards of 10 seconds of staring at a blank screen.
The good news is that most images carry far more data than the human eye can distinguish on screen. A 5MB JPEG straight from your phone contains detail that matters for printing a poster, but is completely wasted on a 600-pixel-wide content area. Compression removes that invisible overhead, and when done correctly, the result is visually identical to the original at a fraction of the file size.
Compression also matters for email. Many email providers reject attachments over 20-25MB, and large inline images slow down email rendering. If you're sending a newsletter or attaching photos to a client email, compressing them first is basic hygiene.
Image format comparison
Before you compress anything, you need to know what format you're working with and what alternatives exist. Each format handles compression differently, and picking the right one can matter more than the quality slider itself. If you need to switch formats, an image format converter makes that painless, and our format conversion guide covers the details.
| Format | Lossy / Lossless | Transparency | Animation | Typical Compression Ratio | Best For |
|---|---|---|---|---|---|
| JPEG | Lossy only | No | No | 10:1 to 20:1 | Photographs, complex images with smooth gradients |
| WebP | Both | Yes | Yes | 25-35% smaller than JPEG at equivalent quality | Web images where broad browser support exists |
| PNG | Lossless only | Yes | No (APNG exists but limited) | 2:1 to 5:1 (lossless) | Screenshots, logos, graphics with text or sharp edges |
| AVIF | Both | Yes | Yes | 50% smaller than JPEG at equivalent quality | Next-gen web images; best compression but slower encoding |
| GIF | Lossless (256-color palette) | Yes (binary only) | Yes | 3:1 to 5:1 | Simple animations, low-color graphics; avoid for photos |
A few things stand out from this table. JPEG is still the universal default — every device, browser, and email client on earth can render it. But WebP beats it on file size at the same visual quality, and browser support is now effectively universal (everything except IE11, which is long gone). AVIF pushes even further, delivering roughly half the file size of JPEG, but encoding is slower and older browsers need a fallback.
PNG is the odd one out because it's lossless. You can't "quality slider" a PNG the way you can a JPEG — its compression is about removing redundancy in pixel data, not discarding detail. That's why PNGs of photographs are enormous. But for screenshots, UI mockups, and anything with text, PNG preserves every pixel exactly. If you're working with web images and want the best of both worlds, our web image optimizer can auto-select the best format and compression for you (more on that in our web optimization guide).
Quality setting recommendations by use case
The "right" quality setting depends entirely on where the image will be used. A hero banner that fills a 27-inch monitor deserves more care than a 150-pixel thumbnail in a product grid. Here's a practical reference:
| Use Case | Recommended Quality | Why |
|---|---|---|
| Web hero images | 75-85% | Large on screen, so artifacts are more visible. Keep quality higher but pair with proper sizing — an image resizer helps you match dimensions to your layout (see our resizing guide). |
| Thumbnails and previews | 60-70% | Small display size hides compression artifacts. Aggressive compression is fine here. |
| Print-quality images | 90%+ | Print reveals detail that screens cannot. Stay at 90 or above, and keep dimensions at 300 DPI for the target print size. |
| Email attachments | 60-75% | Recipients view at screen resolution. Smaller files avoid rejection by mail servers and load faster in webmail clients. |
| Social media uploads | 70-80% | Platforms re-compress your image anyway. Starting at 70-80% avoids double-compression artifacts while keeping uploads fast. |
These ranges assume JPEG or WebP. If you're using PNG, the quality slider doesn't apply — PNG is always lossless. For a deeper look at reducing file size across all these scenarios, our guide to reducing image file size walks through the full process.
What happens at each quality level
Quality settings in JPEG and WebP work by controlling how much detail the encoder throws away. Higher numbers keep more detail; lower numbers discard more aggressively. But the relationship between quality and file size isn't linear. The biggest savings come from dropping from 100% to 90%, and the visual difference is almost invisible. Here's what to expect at each level:
100% quality: The encoder preserves maximum detail. For JPEG, this still isn't truly lossless (JPEG always discards some data), but it's as close as the format gets. File size is only slightly smaller than the raw uncompressed image. There is almost never a reason to use 100% for web delivery — you're paying for data nobody can see.
90% quality: Typically 30-40% smaller than 100%. The difference is invisible to the naked eye on screen, even at full zoom. This is the go-to setting for archival quality when you need JPEG format. Photographers often use this as their "high quality" export.
80% quality: Typically 60-70% smaller than the original. Still no visible difference on screen at normal viewing distance. This is the sweet spot for most web images. You're saving massive bandwidth with zero perceptible quality loss. If you're unsure what setting to use, start here.
70% quality: Typically 70-80% smaller. Under close inspection, you might notice very slight softening in fine textures — hair strands, fabric weave, grass blades. At normal viewing distance on a webpage, it still looks great. This is a solid choice for content images, blog post photos, and product listings.
50% quality: Typically 80-85% smaller. Now you'll start to see artifacts if you look for them — slight blockiness around high-contrast edges, loss of fine detail in gradients. For thumbnails and preview images, this is perfectly acceptable because the small display size hides the artifacts. For full-size images, it depends on how critical visual fidelity is to your use case.
30% quality: Typically 90%+ smaller. Visible artifacts even at casual glance — blocky regions, color banding in gradients, smeared edges. Useful only for very small thumbnails, placeholder images, or situations where file size is far more important than appearance (like extremely bandwidth-constrained environments).
The takeaway: the range between 75% and 85% gives you the best ratio of quality to file size for the vast majority of use cases. Below 70%, you're trading visible quality for diminishing size gains. Above 90%, you're paying for invisible detail.
Compression and web performance
Image compression is one of the highest-impact, lowest-effort improvements you can make to web performance. Unlike code splitting, lazy loading, or CDN configuration, compressing your images requires no architectural changes. You process the files once, and every visitor benefits on every page load.
Google's Lighthouse audit specifically flags images that could be smaller. The "Properly size images" and "Serve images in next-gen formats" recommendations are among the most common audit failures. Fixing them can move your Performance score significantly — often by 10 to 20 points for image-heavy pages.
For a complete web performance workflow, combine compression with proper sizing. There's no point compressing a 4000x3000 image to 80% quality if it's displayed at 800x600. First resize the image to match your layout dimensions, then compress it. That two-step process typically reduces file size by 90% or more compared to the raw camera output.
Common mistakes to avoid
Re-compressing already compressed images. Every round of lossy compression introduces new artifacts. If you compress a JPEG to 70%, then later re-open and compress it to 80%, the result is worse than a single pass at 70%. Always compress from the highest-quality source you have.
Using PNG for photographs. A photographic PNG can be 5-10x larger than a JPEG at 85% quality with no visible difference. PNG is for graphics, screenshots, and anything with text or sharp edges — not for photos.
Ignoring dimensions. Compression and sizing work together. A 6000x4000 photo compressed to 75% is still much larger than a 1200x800 version at the same quality. Size your images for their display context first.
Compressing for social, then re-using for print. Social media quality (70-80%) is fine for screens, but if you later need the same image for a brochure or poster, you'll wish you'd kept the high-resolution original. Always archive your originals separately.
Everything runs in your browser. Your photos stay on your device — no uploads, no servers, no waiting.