The latest articles on DEV Community by Rahul Kumar Verma (@rahul_kumarverma_805999a). https://dev.to/rahul_kumarverma_805999a https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4213100%2Fe621350d-b379-491b-8b06-89f4f1a0cac8.jpg https://dev.to/rahul_kumarverma_805999a en Rahul Kumar Verma Wed, 28 Oct 2026 12:49:37 +0000 https://dev.to/rahul_kumarverma_805999a/how-i-built-a-100-client-side-image-compressor-for-indian-government-exams-using-html5-canvas--3d9b https://dev.to/rahul_kumarverma_805999a/how-i-built-a-100-client-side-image-compressor-for-indian-government-exams-using-html5-canvas--3d9b <p>Applying for competitive exams in India (like SSC, UPSC, IBPS, and State PSCs) comes with a surprisingly frustrating bottleneck: strict, archaic image upload rules. </p> <p>One portal asks for a passport photo between <code>20KB and 50KB</code> with a specific pixel aspect ratio and a printed date of birth. Another demands a signature compressed strictly between <code>10KB and 20KB</code>.</p> <p>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.</p> <p>To solve this with zero server costs and 100% privacy, I built <strong><a href="https://sarkariphototool.com" rel="noopener noreferrer">Sarkari Photo Tool</a></strong>, a fully client-side image resizer and compressor built with <strong>Astro, Tailwind CSS, and Vanilla TypeScript</strong>.</p> <h3> How the Client-Side KB Targeting Works </h3> <p>Instead of sending images to a backend (like Sharp or ImageMagick), the entire compression pipeline runs inside the user's browser using the native <code>HTMLCanvasElement.toBlob()</code> API:</p> <ol> <li> <strong>Aspect Ratio &amp; Pixel Mapping:</strong> When a user selects an exam preset (for example, the <a href="https://sarkariphototool.com/ssc-gd" rel="noopener noreferrer">SSC GD Photo &amp; Signature Resizer</a> or <a href="https://sarkariphototool.com/upsc-cse" rel="noopener noreferrer">UPSC CSE Photo Resizer</a>), the canvas automatically locks into the exact official dimensions (e.g., <code>3.5cm x 4.5cm</code> or <code>350x350 px</code>).</li> <li> <strong>Dynamic Date &amp; Name Stamping:</strong> 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.</li> <li> <strong>Iterative Binary Search Compression:</strong> Since <code>canvas.toBlob(callback, 'image/jpeg', quality)</code> doesn't let you specify a target file size in kilobytes directly, the script runs a fast binary search over the <code>quality</code> parameter (<code>0.1</code> to <code>0.95</code>) until the resulting Blob size lands squarely within the required KB range (e.g., <code>20KB–50KB</code>).</li> </ol> <h3> Why Static + Programmatic SEO? </h3> <p>By combining <strong>Astro's static site generation</strong> with a centralized JSON specification database, every exam gets its own dedicated, ultra-fast route with zero runtime server overhead on Cloudflare Pages.</p> <p>I also open-sourced the exam specification dataset here on GitHub: <strong><a href="https://github.com/Rahulj02195/indian-govt-exam-photo-signature-specs" rel="noopener noreferrer">indian-govt-exam-photo-signature-specs</a></strong>.</p> <p>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!</p> webdev opensource javascript astro