What is image compression (and why file size matters)?
Image compression means reducing how many bytes an image uses while keeping it usable. On the web, smaller files load faster — which helps Core Web Vitals, mobile users on slow networks, and email inboxes with attachment limits. For personal use, compression makes it easier to share photos on WhatsApp, fit uploads into forms, or free up storage before backup.
There are two broad approaches: lossless compression (smaller file, identical pixels — typical for PNG) and lossy compression (smaller file by discarding imperceptible detail — typical for JPEG). This tool focuses on JPEG quality you control with a slider, so you decide the trade-off between size and fidelity.
Why compress JPG and PNG images?
JPEG photos are often exported from cameras or phones at higher quality than needed for screens. Dropping from an oversized original to 75–85% JPEG quality can cut file size dramatically with little visible change on a phone or laptop display.
PNG is ideal for screenshots, logos, and graphics with sharp edges; for photographic PNGs (e.g. exports from design tools), file size can be huge. Converting to JPEG with controlled quality is a standard way to shrink those assets when you do not need transparency.
If your goal is modern web formats (WebP, AVIF) for maximum savings on a site, see our image format guide — this compressor is optimized for fast JPG output and universal compatibility.
How Browser-Based Image Compression Works (Technical)
Unlike server-based compressors (TinyPNG, Compressor.io, Squoosh from Google), this tool processes images entirely in your browser. Here's the technical pipeline:
- File read: Your browser reads the image file using the FileReader API — no network request is made
- Decode to pixels: The image data is decoded and drawn onto an HTML Canvas element in memory
- Re-encode as JPEG: The Canvas exports the pixel data as a new JPEG blob at your selected quality level using
canvas.toBlob('image/jpeg', quality) - Size comparison: Original and compressed file sizes are compared and displayed
- Download: The compressed blob is made available for download via a local object URL — still no server involved
Proof it's private: Turn off your internet connection, then try compressing an image. It works — because no server communication is needed. Server-based tools like TinyPNG cannot function offline.
Trade-off: Browser-based compression depends on your device's processing power. Very large images (50+ MP) may be slow on older phones. Server-based tools handle large files faster because they use powerful cloud hardware — but at the cost of your privacy. For most images (up to 20-30 MP), browser-based compression is instant.
JPEG quality: what the numbers mean
| Quality range | Typical use |
|---|---|
| 90–100% | Minimal visible loss; larger files — good for archiving or high-res sharing when size is secondary. |
| 75–85% | Sweet spot for many websites and social posts — strong size reduction, usually fine on screen. |
| 60–75% | Smaller files; check thumbnails — may show banding on gradients or skies. |
| 30–60% | Maximum shrink; obvious artifacts on close inspection — use only when tiny file size is the priority. |
The slider on this page runs from 30% to 100%. Move it down to see smaller “After” sizes; move it up if you see artifacts you dislike.
How Much Can You Compress? Typical Results
Compression results vary by image content (photos compress more than graphics), original quality, and resolution. Here are typical results for common scenarios:
| Source | Original size | Quality 85% | Quality 70% | Reduction |
|---|---|---|---|---|
| Smartphone photo (12 MP) | 4-6 MB | 800 KB – 1.2 MB | 400-700 KB | 70-85% |
| DSLR photo (24 MP) | 8-15 MB | 1.5-3 MB | 800 KB – 1.5 MB | 75-90% |
| Screenshot (PNG, 1080p) | 1-3 MB | 200-500 KB | 100-300 KB | 80-90% |
| Product photo (e-commerce) | 2-5 MB | 300-800 KB | 150-400 KB | 75-85% |
| Already compressed web JPG | 100-300 KB | Similar or slightly larger | 80-200 KB | 0-30% |
Tip: If your images are very large (4000+ pixels wide), resize them first to your target display size, then compress. Resizing removes unnecessary pixels; compression removes unnecessary data within those pixels. Combining both gives the maximum reduction.
Best Quality Settings for Common Use Cases
| Use case | Recommended quality | Target file size | Why |
|---|---|---|---|
| Website hero images | 75-80% | 100-300 KB | Core Web Vitals, LCP optimization |
| Blog post images | 75-85% | 50-200 KB | Fast page load, good SEO signal |
| E-commerce product photos | 80-85% | 100-400 KB | Detail matters for purchase decisions |
| Email attachments | 70-80% | Under 1 MB | Inbox limits (Gmail: 25 MB total) |
| WhatsApp / messaging | 70-75% | Under 500 KB | Faster send on mobile data |
| Resume / ID photo upload | 80-85% | 50-200 KB | Government portals often cap at 100-200 KB |
| Social media posts | 80-85% | Under 1 MB | Platforms recompress anyway, start clean |
| Archiving / backup | 90-95% | Varies | Preserve quality, modest size reduction |
Why PNG uploads become JPEG downloads
PNG uses lossless compression — you cannot “turn down quality” the same way as JPEG. To achieve meaningful size reduction for photos, this tool outputs JPG. Transparent PNG areas are composited on a white background (same approach as our WebP to JPG tool). If you must keep transparency, keep the PNG or use a format that supports alpha (see the format comparison).
Image Compression for Web Performance (SEO Impact)
Images account for 50-80% of total page weight on most websites. Compressing them is the single highest-impact optimization for page speed — directly affecting Core Web Vitals scores and Google rankings.
How image size affects Core Web Vitals
- LCP (Largest Contentful Paint): If your hero image is 3 MB, LCP will be slow regardless of server speed. Compressing to 200-400 KB can improve LCP by 1-3 seconds
- CLS (Cumulative Layout Shift): Properly sized images with width/height attributes prevent layout shift
- Total page weight: Google PageSpeed Insights flags uncompressed images as the #1 opportunity on most sites
Optimal workflow for web images
- Resize first: Use our Image Resizer to match your display dimensions (don't serve 4000px images in 800px containers)
- Compress: Use this compressor at 75-85% quality for web photos
- Choose format: For maximum savings, convert to WebP — read our image format guide
- Test: Run Google PageSpeed Insights to verify improvement
This resize → compress → format workflow typically reduces image weight by 70-90% from camera originals.
DoItSwift vs Other Image Compressors
| Feature | DoItSwift | TinyPNG | Compressor.io | Squoosh (Google) |
|---|---|---|---|---|
| Privacy (files stay local) | Yes — never uploaded | No — uploaded to server | No — uploaded to server | Yes — browser-based |
| Batch compression | Yes — unlimited files | 20 files max (free) | 1 file at a time | 1 file at a time |
| Quality control | Yes — adjustable slider | No — automatic only | Yes | Yes — advanced |
| ZIP download | Yes | Yes (paid for bulk) | No | No |
| Before/after size | Yes — per file | Yes — per file | Yes | Yes |
| Free tier limits | None — fully free | 20 images, 5 MB each | 10 MB limit | None — fully free |
| Works offline | Yes | No | No | Yes (PWA) |
| WebP/AVIF output | No (JPG only) | WebP yes | Multiple formats | All modern formats |
Where DoItSwift wins: Unlimited batch compression with privacy — no other tool offers all three simultaneously. TinyPNG is the market leader but uploads your files and limits free usage. Squoosh is excellent but single-file only. DoItSwift fills the gap: private, batch, free, no limits.
Where others win: If you need WebP or AVIF output, Squoosh or TinyPNG are better choices. If you need advanced controls (chroma subsampling, color profiles), Squoosh offers more granularity. For most everyday compression needs — website images, email attachments, uploads — DoItSwift is faster and more private.
Troubleshooting
“After” is larger than “before”: Can happen if the original was already heavily compressed JPEG — re-encoding adds overhead or your quality setting is high. Try a lower quality or keep the original.
Errors or slow runs: Try another browser, close heavy tabs, or reduce image dimensions elsewhere (e.g. our image resizer) before compressing.