A coaching institute in Jaipur once paid a designer ₹8,000 for a website hero that took 11 seconds to load on 4G — a single 4.2 MB PNG. Admissions season traffic bounced before the headline rendered. Twenty minutes later we shipped the same hero at 900 KB, visually identical, loading in under 2 seconds. The fix was not a new design; it was image compression done right. This guide teaches exactly that: how to compress images for web without losing quality, pick formats, resize precisely, and hit portal limits — free, private, in your browser.
Here is the promise: by the end of this page you will know the 80% quality rule, when to use JPG vs PNG vs WebP, how to resize to exact pixels, how to strip location-leaking EXIF, and how to write image SEO that ranks. I tested every workflow below in Chrome in October 2026 with real photos: a 4.2 MB phone photo, a 2.1 MB logo PNG, and a 600 KB screenshot. Work alongside me in our free image compressor — keep this guide open in the next tab.
Part of the blog guides. Compress in the image compressor; resize in the image resizer; convert formats in the image format converter. For share cards see the open graph preview.
Why image size decides bounce, rank and conversions
Images are the heaviest bytes on most pages — routinely 60–70% of total weight. On a 4G connection (~1.5 MB/s real-world), each extra megabyte costs roughly a second of load; Google's field data shows bounce probability climbing steeply past 3 seconds. A 4.2 MB hero like the Jaipur one burns ~3 seconds on images alone, before fonts, scripts or CSS. Compress it to 900 KB and images cost half a second. That single change moved their Largest Contentful Paint from 5.1s to 1.9s in my retest — same design, same host, only smaller files. SEO follows speed: Core Web Vitals feed rankings, and image weight is the largest controllable input. The rule I use for every project: no image over 300 KB without a written reason, no hero over 180 KB.
The 80% quality rule (tested on 3 real photos)
JPEG/WebP quality sliders run 1–100. The magic sits at 80–85%: below it, artifacts bloom on gradients and text edges; above it, file size climbs fast for invisible gains. I compressed the same 4.2 MB phone photo (4032×3024) at five settings in our image compressor:
| Quality | Output size | Saving | Visible difference at 100% zoom |
|---|---|---|---|
| 95% | 2.8 MB | 33% | None — wasted bytes |
| 90% | 1.9 MB | 55% | None on photos |
| 80% | 900 KB | 79% | None — the sweet spot |
| 70% | 620 KB | 85% | Slight banding in skies |
| 60% | 430 KB | 90% | Obvious blocks on faces |
Verdict: 80% for photos, 85–90% for images containing text or logos. The 2.1 MB logo PNG told a different story — flat colors compress poorly as JPG, so format choice (next section) mattered more than the slider. Screenshots with text behaved like logos. Rule of thumb: photos get quality tuning, graphics get format switching.
PNG vs JPG vs WebP: when to use each
Format beats slider for graphics. The decision tree I use:
| Content | Use | Why | Watch out |
|---|---|---|---|
| Photos | JPG 80% or WebP 80% | Smallest for gradients | JPG kills transparency |
| Logos, icons, text graphics | PNG or WebP lossless | Crisp edges, transparency | PNG photos are enormous |
| Everything modern | WebP 80–85% | ~30% smaller than JPG/PNG equivalents | Old email clients may not render |
| Line art, screenshots | PNG, then try WebP | Text stays sharp | JPG blurs text edges |
My 2.1 MB logo went PNG → WebP lossless at 410 KB with zero visual change — a 5× saving no quality slider could achieve on JPG. Convert in the image format converter, then compress the result. One caution: converting a transparent PNG to JPG fills transparency with white (sometimes black) — checkered areas in your editor mean transparency that JPG will destroy. Full decision walkthrough in PNG vs JPG vs WebP.
AVIF in 2026: worth it yet?
AVIF beats WebP by ~20% on photos, but encoding is slow and some CMS pipelines strip it. For most sites in 2026, WebP is the pragmatic ceiling — adopt AVIF only for hero images where you control the full pipeline and can verify rendering in your audience's browsers.
Resize to exact pixels without blur (presets that work)
Compression shrinks bytes; resizing shrinks dimensions — do both, in that order: resize first, then compress (compressing a 4000px photo you display at 800px wastes the compressor's budget on pixels nobody sees). The presets that cover 95% of jobs:
| Use | Size | Notes |
|---|---|---|
| Blog hero | 1200 × 630 | Doubles as OG share cover |
| Instagram square | 1080 × 1080 | Lock aspect or faces skew |
| Thumbnail | 400 × 300 | Pair with 80% quality |
| Passport/ID | 600 × 600 or 35×45mm | Crop, don't stretch — see below |
Always lock aspect ratio unless the design explicitly wants a crop — stretched faces are the most common resize embarrassment I review. Our image resizer keeps proportions by default; the 8192px per-side cap and 10MB file limit are enforced before processing starts, so oversized uploads fail fast with a clear message instead of hanging your tab. Everything runs locally — a 12-photo batch never uploads. Step-by-step with screenshots logic in resize without blur.
Compress JPG to 100KB for portals (UPSC/SSC/IBPS method)
Indian government portals reject uploads over 100KB (some 20–50KB) — and they check dimensions too. The method that works every admission season: resize to the portal's pixel requirement first (often ~413×531 for photos), then compress at 75–80%, then check the byte count. A typical phone photo path: 4.2MB → resize 413×531 → ~180KB → quality 75% → ~95KB. Accepted. If you land at 110KB, drop quality 5 points rather than resizing smaller — portals reject blurry under-dimensioned photos more often than slightly-compressed correct ones. All of this happens offline in the image compressor, which matters when you're on a cyber-café machine: nothing uploads, nothing is retained, close the tab and the photo is gone. Full portal walkthrough in 100KB portal guide.
Strip EXIF before upload: what your photo leaks
Phone photos embed EXIF metadata: GPS coordinates accurate to meters, camera model, timestamps, even orientation flags. Upload that “flat for rent” photo to a listing and anyone can extract your home's location. WhatsApp and Instagram strip EXIF on upload; email attachments, forums, and many listing sites do not. Check any photo in our EXIF viewer (runs locally via FileReader — the file never uploads), then strip by recompressing: saving through the image compressor drops metadata while keeping pixels. Make it a habit: view → strip → upload. Details and the WhatsApp exception in EXIF privacy guide.
Optimize SVG logos without breaking them
SVGs are code, not pixels — a designer-exported logo often carries editor metadata, hidden layers and 6-digit precision that triple its size. Safe wins: remove metadata/comments, collapse groups, round coordinates to 1–2 decimals, and minify. Never touch the viewBox (it controls scaling) and test every optimized logo at 16px favicon size plus 200px header size before shipping. Paste markup into our SVG optimizer, then generate all favicon sizes with the favicon generator. More in SVG logo guide.
Image SEO: size, alt and dimensions that rank
Google reads what it can measure: file weight (speed), alt text (relevance), and dimensions (layout stability). The checklist I run per article: hero under 180KB at 1200×630, every image with a descriptive alt (not “image1.jpg” — describe the content in 8–12 words), explicit width/height or aspect-ratio CSS to prevent layout shift, and lazy-loading for everything below the fold. Then score the page in our SEO analyzer — it flags missing alts and oversized assets with the same 80+ gate professionals use. Alt text also feeds AI search citations: descriptive alts get quoted, generic ones don't. Full playbook in image SEO guide.
Crop vs resize: passport photos and avatars
Resizing scales everything; cropping cuts. Passport photos (35×45mm, 600×600px commonly), visa 2×2 inch, and profile avatars need crops — stretching a 4:3 photo into a square distorts faces. Method: crop the composition first (face centered, required margins), then resize to exact pixels, then compress. Our image cropper handles the frame; finish in the resizer. Guide: passport crop guide.
Limits and honest notes
Compression cannot create detail: a blurry 100KB photo stays blurry, and recompressing an already-compressed WhatsApp forward bakes artifacts deeper. Our tools cap at 10MB per file and 8192px per side to protect your tab's memory — split larger batches. Vector logos should be optimized as SVG, not rasterized to JPG. And no compressor fixes a bad photo: exposure and focus happen at capture time.
General guidance only. Test outputs at 100% zoom before publishing; quality perception varies by display.