TL;DR: I built a free browser-based image compressor that hits an exact KB target using a binary search algorithm. No file uploads, no server, no account needed. Works for UPSC, SSC, IBPS, FPSC, PPSC, NTS, CSS exam forms — and any government portal that rejects "too large" photos.
The Problem Every Exam Applicant Knows
You have a perfectly clear photo from your phone. The UPSC portal says: "Photo must be under 50KB." Your photo is 3.8 MB.
You open some random online compressor. It uploads your photo to a server in who-knows-where, makes you wait, and spits out a blurry 18KB mess that looks like it was photographed through a foggy window. Or worse — the tool hits exactly 50KB but you needed 20KB and now you have to start over.
This happens to millions of students across India and Pakistan every exam season. I got tired of it, so I built something better.
What I Built
Image Resizer & Compressor — WebToolsHub
A fully client-side image compressor and resizer. Key things that make it different:
- Hits an exact KB target — you type "20" and get a file under 20KB, not "approximately 20KB"
- Best possible quality at that size — uses binary search, not a fixed low-quality setting
- Your photo never leaves your device — everything runs in your browser via Canvas API
- One-click exam presets — UPSC, SSC, IBPS, RRB, FPSC, PPSC, NTS, CSS all configured correctly
- No account, no watermark, no upload limit
The Technical Bit: Binary Search Compression
Most image compressors work by applying a fixed quality setting — something like "quality 30" — and hoping the result is small enough. The problem: quality 30 on a 200×230px photo might give you 12KB, but quality 30 on a 1200×1600px photo gives you 180KB. The output is unpredictable.
This tool uses a binary search on the JPEG quality parameter:
async function compressToTargetKb(
canvas: HTMLCanvasElement,
format: 'image/jpeg' | 'image/webp',
targetSizeKb: number
): Promise<{ blob: Blob; quality: number }> {
const targetBytes = targetSizeKb * 1024;
let low = 0.01, high = 0.99;
let bestBlob: Blob | null = null;
let bestQuality = 0.8;
for (let i = 0; i < 8; i++) {
const mid = (low + high) / 2;
const blob = await canvasToBlob(canvas, format, mid);
if (blob.size <= targetBytes) {
bestBlob = blob;
bestQuality = mid;
low = mid; // can go higher quality
} else {
high = mid; // needs more compression
}
}
return { blob: bestBlob!, quality: bestQuality };
}
8 iterations. Converges in under 50ms on most devices. The result is always the highest quality that fits within your target — not just "something small enough."
Exam Presets: India & Pakistan
One of the most frustrating things about government exam portals is that the photo requirements are buried in a 40-page PDF prospectus. You have to hunt for the exact pixel dimensions, KB limit, and accepted format.
I've done that work. Here's what's built into the tool:
🇮🇳 India
| Exam | Photo Size | KB Limit | Format |
|---|---|---|---|
| UPSC Civil Services | 200×230 px | 40 KB | JPEG |
| UPSC Signature | 140×60 px | 20 KB | JPEG |
| SSC (CGL/CHSL/MTS) | 200×240 px | 50 KB | JPEG |
| SSC Signature | 200×80 px | 20 KB | JPEG |
| IBPS / SBI Bank PO | 200×230 px | 50 KB | JPEG |
| RRB Railway | 200×230 px | 40 KB | JPEG |
| NEET | 3.5×4.5 cm | 200 KB | JPEG |
| JEE Main | 3.5×4.5 cm | 10–200 KB | JPEG |
🇵🇰 Pakistan
| Exam | Photo Size | KB Limit | Format |
|---|---|---|---|
| FPSC | 200×200 px | 50 KB | JPEG |
| PPSC | 300×300 px | 100 KB | JPEG |
| NTS | 200×200 px | 50 KB | JPEG |
| CSS Competitive | 192×192 px | 50 KB | JPEG |
Click the preset → dimensions and KB target are set automatically. No manual entry needed.
Why PNG Doesn't Work for KB Targets (Important)
A lot of people try to compress a PNG to 20KB and wonder why the tool won't do it. The reason is technical but simple:
PNG is a lossless format. There is no quality parameter to adjust. You can make a PNG smaller only by reducing its pixel dimensions — you cannot compress it to an arbitrary file size the way you can with JPEG.
If you need to hit a specific KB limit (like 20KB or 50KB), switch to JPEG. Government portals almost always require JPEG anyway — PNG is rarely on the accepted formats list.
The tool shows a warning when you select PNG with a KB target enabled.
Privacy: Your Photo Never Leaves Your Browser
This is not marketing copy — it's a technical constraint. The tool uses:
- HTML5 Canvas API for resizing and drawing
- Blob API for generating the compressed file
- No network requests after the page loads (you can verify this in DevTools → Network tab)
Sensitive documents — passport photos, government IDs, signature scans — should not be uploaded to random third-party servers. With this tool, there is no server to upload to.
Practical Tips for Better Results
1. Resize dimensions before compressing to a tiny KB target
If you have a 4000×3000 photo and need 20KB, don't compress the large image directly. You'll get extreme compression artifacts. Instead:
- Resize to ~300×400px first
- Then apply the 20KB target
A smaller canvas needs less compression to hit a small file size, which means better quality.
2. Use the exam preset, not manual settings
The presets are configured with the exact pixel ratios the portals expect. Manual entry is fine, but if you're applying for UPSC or FPSC, the preset already has the right settings.
3. Start with the best source photo you have
If your source photo is already blurry or poorly lit, compression makes it worse. A well-lit, sharp original photo always compresses better — the JPEG algorithm works best when there's less noise in the image data.
How It Compares to Other Tools
| Feature | This Tool | TinyPNG | iLoveIMG | Squoosh |
|---|---|---|---|---|
| Exact KB target | ✅ | ❌ | ❌ | ❌ |
| Client-side only | ✅ | ❌ | ❌ | ✅ |
| Exam presets (UPSC/FPSC) | ✅ | ❌ | ❌ | ❌ |
| Pixel resize + compress together | ✅ | ❌ | ✅ | ✅ |
| No account needed | ✅ | ✅ | ✅ | ✅ |
Squoosh is excellent for general use, but it doesn't have exam presets or an exact KB target mode. For government form submissions specifically, this tool is the most purpose-built option I've found.
Related Resources on WebToolsHub
If you're working with images beyond exam forms, these might be useful:
- Image to WebP Converter — convert JPEG/PNG to WebP for faster web loading
- Why You Must Convert JPEG to WebP in 2026 — the performance case for WebP
- WebP vs AVIF: Which Format Wins in 2026? — detailed format comparison
- Stop Using JPG/PNG — They're an SEO Killer — why modern formats matter for rankings
- WebP Quality Settings Guide — choosing the right quality for web images
-
Next.js Image Optimization Guide — for developers using Next.js
<Image> - Bulk Image to WebP Converter Guide — automating image conversion at scale
Try It
→ Compress Image to 20KB, 50KB, 100KB Free — WebToolsHub
If you find it useful, drop a comment — and if you have a specific exam format that's not in the presets yet, let me know and I'll add it.
Built with Next.js, Canvas API, and a mild obsession with making government portals less annoying.
Tags
image-compression webdev tools javascript upsc government-forms canvas-api productivity pakistan india
Top comments (0)