Applying for competitive exams in India (like SSC, UPSC, IBPS, and State PSCs) comes with a surprisingly frustrating bottleneck: strict, archaic image upload rules.
One portal asks for a passport photo between 20KB and 50KB with a specific pixel aspect ratio and a printed date of birth. Another demands a signature compressed strictly between 10KB and 20KB.
Most students end up uploading their personal photos and signatures to ad-heavy online resizers that process files on remote servers—creating an unnecessary privacy risk.
To solve this with zero server costs and 100% privacy, I built Sarkari Photo Tool, a fully client-side image resizer and compressor built with Astro, Tailwind CSS, and Vanilla TypeScript.
How the Client-Side KB Targeting Works
Instead of sending images to a backend (like Sharp or ImageMagick), the entire compression pipeline runs inside the user's browser using the native HTMLCanvasElement.toBlob() API:
- Aspect Ratio & Pixel Mapping: When a user selects an exam preset (for example, the SSC GD Photo & Signature Resizer or UPSC CSE Photo Resizer), the canvas automatically locks into the exact official dimensions (e.g.,
3.5cm x 4.5cmor350x350 px). - Dynamic Date & Name Stamping: If the exam notification requires a printed name and date at the bottom of the photograph, the Canvas 2D context draws a clean white bar and renders the text dynamically before compression.
- Iterative Binary Search Compression: Since
canvas.toBlob(callback, 'image/jpeg', quality)doesn't let you specify a target file size in kilobytes directly, the script runs a fast binary search over thequalityparameter (0.1to0.95) until the resulting Blob size lands squarely within the required KB range (e.g.,20KB–50KB).
Why Static + Programmatic SEO?
By combining Astro's static site generation with a centralized JSON specification database, every exam gets its own dedicated, ultra-fast route with zero runtime server overhead on Cloudflare Pages.
I also open-sourced the exam specification dataset here on GitHub: indian-govt-exam-photo-signature-specs.
If you are building micro-utilities, shifting heavy media processing to the client browser is the easiest way to keep hosting 100% free while giving users instant results!