Image compression is one of the most impactful things you can do for your website's performance — yet most people treat it as an afterthought. In this guide, we'll walk through everything you need to know about image compression: how it works, which format to choose, what file size to target, and how to compress images without killing quality.
What Is Image Compression?
Image compression is the process of reducing an image's file size while attempting to preserve its visual quality. There are two fundamental approaches:
Lossy Compression
Lossy compression permanently removes some image data to achieve smaller files. It works by discarding details the human eye is unlikely to notice — subtle color variations, high-frequency textures, and metadata. JPEG is the most common lossy format. A JPEG at quality 85 is typically 5-10x smaller than the original with no visible difference on screen.
Lossless Compression
Lossless compression reduces file size without discarding any image data. It works by finding patterns and redundancies in the data and encoding them more efficiently. PNG uses lossless compression. The trade-off: PNG files are typically 3-10x larger than JPEG for the same photograph.
Why Image Size Matters
Uncompressed or poorly compressed images are the #1 cause of slow-loading web pages. Here's why that matters:
- Core Web Vitals: Google's LCP (Largest Contentful Paint) metric measures how fast the main content loads. Large images directly hurt this score — and poor Core Web Vitals hurt your search rankings.
- User Experience: 53% of mobile users abandon a site that takes longer than 3 seconds to load. Every 100KB of unnecessary image weight costs you visitors.
- Bandwidth Costs: If you're serving images from a CDN or cloud storage, every uncompressed megabyte costs real money in bandwidth.
- Conversion Rates: Amazon found that every 100ms of page load delay cost them 1% in revenue. For e-commerce, image optimization is revenue optimization.
How to Choose the Right Image Format
| Format | Compression | Best For | Not Good For | Browser Support |
|---|---|---|---|---|
| JPEG | Lossy | Photos, web images, social media | Text, logos, graphics with sharp edges | 100% (all browsers) |
| PNG | Lossless | Logos, icons, screenshots, graphics with transparency | Photos (files will be huge) | 100% |
| WebP | Both | Websites — 25-35% smaller than JPEG/PNG | Legacy apps that don't support it | 97%+ (all modern browsers) |
| AVIF | Both | Next-gen web — even smaller than WebP | Older browsers (Safari < 16) | ~93% |
| HEIC | Both | iPhone photos (default format) | Web use (convert to JPEG/WebP first) | Safari only for web |
Rule of thumb: Use JPEG for photos, PNG for graphics with transparency or text, and WebP whenever browser support allows — it's the best all-around web format today.
How to Choose the Right File Size
Different use cases demand different file sizes. Here's a practical guide:
| Target Size | Best For | Example Use Cases |
|---|---|---|
| 10-30KB | Tiny icons, favicons, email signature logos | Browser tab icons, forum avatars, HTML email graphics |
| 50-100KB | Web thumbnails, profile photos, passport/visa photos | Blog post featured images, LinkedIn headshots, government form uploads |
| 150-300KB | Product photos, portfolio images, blog inline images | E-commerce product galleries, photography portfolios, article illustrations |
| 500KB-1MB | High-quality web images, email attachments | Website hero banners, marketing materials, presentation images |
| 2-5MB | Print-quality submissions, archives | Print-on-demand files, competition entries, archival copies |
For most web images, target 100-200KB. This gives you a great balance of quality and loading speed. Google's PageSpeed Insights recommends keeping images under 200KB for optimal LCP scores.
Step-by-Step: Compress Any Image with CompressNow
- Upload your image — drag and drop or click to select. Supports PNG, JPEG, WebP, and HEIC.
- Pick your target size — choose from 18 preset sizes (10KB to 5MB) or use the quality slider for manual control.
- Review the result — use the before/after comparison slider to check quality.
- Download — save the compressed image. No signup, no upload to any server.
Common Image Compression Mistakes
- Over-compressing: Pushing a photo down to 10KB will make it look terrible. Match the target size to the use case.
- Wrong format: Using PNG for photos produces files 5-10x larger than JPEG at the same visual quality.
- Not pre-compressing for platforms: Instagram, Twitter, and WhatsApp all apply their own compression. If you upload an already-large file, you're letting their algorithm decide your quality. Pre-compress to control the result.
- Ignoring dimensions: A 6000×4000 pixel image will always be large, even with aggressive compression. Resize to the actual display size first, then compress.
- Compressing already-compressed images: Re-compressing a JPEG creates generation loss — each pass degrades quality. Always work from the original when possible.
Compression for Specific Platforms
Every major platform has its own file size limits and image requirements. We've built dedicated tools for many of them: