How We Built an In-Browser Passport Photo Checker with Next.js 16 & MediaPipe

Getting a passport photo in the US often feels unnecessarily frustrating. Retail pharmacies like CVS and Walgreens charge upwards of $17.99 for two small 2x2" prints, and worse, applicants frequently report rejections due to subtle biometric violations—incorrect head height ratio (must be between 50% and 69% of image height), harsh shadows, or slight head tilts.

To solve this friction, we built IdPhoto Studio, a privacy-first web utility that verifies and generates compliant passport photos directly within the browser.

In this post, I want to share the technical challenges and architecture behind building a client-side biometric compliance checker.

1. Why Run Biometric Checks in the Browser?

Most passport photo apps upload user photos to an external cloud server for face analysis. However, government documents and passport photos contain sensitive biometric face data.

We chose an edge-first and client-side approach:

• Face landmark detection runs entirely in the client using WebAssembly via @mediapipe/tasks-vision.
• The user's original image never leaves their device during the verification phase.
• Only when an applicant confirms the alignment do they have the option to generate official print sheets.

You can try the free online tool here: Passport Photo Checker.

2. Implementing the Biometric Geometry (ICAO & US State Dept)

The US Department of State Form DS-11 specifies strict geometric rules for 2x2 inch photos:

1. Head Size: The distance from the bottom of the chin to the top of the head must be between 1 inch and 1 3/8 inches (50% to 69% of the total image height).
2. Eye Height: The eyes must sit between 1 1/8 inches and 1 3/8 inches from the bottom of the photo (56% to 69%).
3. Face Angle & Tilt: Yaw and roll angles must stay within strict thresholds (no side profile, no tilting).

Using MediaPipe's Face Mesh landmarks, we calculate:

• Landmark 152 (Chin bottom) and Landmark 10 (Forehead top) to determine the vertical head scale.
• Landmarks 33 and 263 (Outer eye corners) to detect roll angle tilt and automatically suggest micro-rotations.

3. The Print Sheet Problem (Save $17.60 with 4x6" Layouts)

One of our favorite features is the print sheet layout generator. While CVS and Walgreens charge $17.99 if you order "Passport Photos", they only charge around $0.38 to print a standard 4x6" gloss photo.

We implemented an SVG-to-Canvas layout engine that automatically arranges multiple 2x2" copies onto a standard 1200x1800 px (4x6" at 300 DPI) sheet with exact cutting guidelines. This allows travelers to print their photos at local kiosks for less than 40 cents.

Check out our full cost breakdown and guide: CVS vs Walgreens Passport Photo Cost Comparison.

Tech Stack Overview

• Framework: Next.js 16 (App Router + Turbopack)
• Styling: Tailwind CSS v4
• Computer Vision: @mediapipe/tasks-vision (WebAssembly)
• Deployment: Vercel Edge Network

We hope this provides an interesting look into implementing client-side biometric verification! Feedback and questions are always welcome in the comments.