How I built pixtidy's browser layout for six 2 2-inch green card photos on a 4 6 print
USCIS asks for two identical colour 2×2-inch photos. I built pixtidy's browser layout to fit six on one 4×6-inch print: an 1800×1200-pixel sheet at 300 dpi. Below, I explain the layout function and how to draw the sheet
USCIS asks for two identical colour 2×2-inch photos. I built pixtidy's browser layout to fit six on one 4×6-inch print: an 1800×1200-pixel sheet at 300 dpi. Below, I explain the layout function and how to draw the sheet on a canvas for JPEG export. Print at actual size to preserve the dimensions.
You can check your own photo against these rules for free in your browser on this page; the photo is never uploaded (disclosure: I built it).
What are the USCIS green card photo requirements?
Start with a photo that meets the requirements before you repeat it.
You need two identical colour passport-style photos taken recently, each:
- 2×2 inches.
- Printed on thin paper with a glossy finish.
- Unmounted and unretouched.
- Taken against a white to off-white background.
The head, measured from the top of the hair to the bottom of the chin, must be 1 to 1⅜ inches. The eyes must be 1⅛ to 1⅜ inches from the bottom of the photo.
Lightly print your name and A-Number, if any, on the back with a pencil or felt pen. The same photos are used for Forms I-485, I-765 and I-131.
Meeting the rules does not guarantee acceptance.
How do six 2×2-inch photos fit on a 4×6-inch print?
1. Use a horizontal sheet with no space between photos.
At 300 dpi, the dimensions are:
| Item | Printed dimensions | Pixel dimensions |
|---|---|---|
| Sheet | 6 inches wide × 4 inches high | 1800×1200 |
| Each photo | 2 inches wide × 2 inches high | 600×600 |
Three photos fill the width, and two fill the height. One print therefore gives you the required pair and four spares.
The layout function calculates the columns and rows with:
columns = floor((sheet width + gap) / (photo width + gap))
rows = floor((sheet height + gap) / (photo height + gap))
For this sheet, gapPx = 0, so the result is three columns and two rows. The grid fills the canvas, and its centred starting position is (0, 0).
Top-left coordinates, in pixels:
(0, 0) (600, 0) (1200, 0)
(0, 600) (600, 600) (1200, 600)
The internal cut boundaries sit at x = 600, x = 1200 and y = 600.
How does the layout function work?
2. Calculate the slots for six copies of the photo.
This is my layout function from web/src/lib/photo/sheet.ts. It calculates how many photos fit and centres the resulting grid on the sheet.
export function layoutSheet(sheet, photo, gapPx = 0) {
const cols = Math.floor((sheet.widthPx + gapPx) / (photo.widthPx + gapPx));
const rows = Math.floor((sheet.heightPx + gapPx) / (photo.heightPx + gapPx));
const gridW = cols * photo.widthPx + (cols - 1) * gapPx;
const gridH = rows * photo.heightPx + (rows - 1) * gapPx;
const x0 = (sheet.widthPx - gridW) / 2, y0 = (sheet.heightPx - gridH) / 2;
const slots = [];
for (let r = 0; r < rows; r++) for (let c = 0; c < cols; c++)
slots.push({ x: x0 + c * (photo.widthPx + gapPx), y: y0 + r * (photo.heightPx + gapPx) });
return slots;
}
For the worked example, the sheet dimensions are 1800×1200, the photo dimensions are 600×600, and the gap is 0. The function returns the six positions shown above.
How do you draw the sheet on a canvas?
3. Fill the canvas white, then draw the same photo in each slot.
Use an 1800×1200-pixel canvas for the sheet. After filling it white, call drawImage for each returned slot, drawing the same photo at 600×600 pixels.
The arrangement is:
6 inches
┌─────────┬─────────┬─────────┐
│ │ │ │
│ Same │ Same │ Same │
│ photo │ photo │ photo │
│ │ │ │
4 inches├─────────┼─────────┼─────────┤
│ │ │ │
│ Same │ Same │ Same │
│ photo │ photo │ photo │
│ │ │ │
└─────────┴─────────┴─────────┘
Each cell: 2×2 inches
The 1-pixel light-grey cut guides are my design choice, not a USCIS rule. Draw them on the canvas before exporting the sheet as a JPEG so they appear in the exported image.
How do you print the JPEG at the correct size?
4. Export the JPEG and set its physical print size explicitly.
Use this compact checklist:
- [ ] Print the sheet 6 inches wide × 4 inches high.
- [ ] Turn off "fit to page" scaling.
- [ ] Use thin paper with a glossy finish.
- [ ] Check that each printed photo measures 2×2 inches before using it.
The intended conversion is 600 pixels ÷ 300 pixels per inch = 2 inches. The export provides the pixels; the print settings must preserve that physical relationship.
Which edge cases need a separate check?
The layout function accepts a gap. The zero-gap grid already occupies the entire sheet.
Check the photo requirements before making the sheet.
Where can you use pixtidy's green card photo tools?
You can use pixtidy's green card photo page for the green card workflow and pixtidy's photo requirements page to review the requirements.
Related: Why a ready-made ID photo failed our browser framing check · Schengen visa photos are 35 45 mm: turning millimetre rules into browser checks
Disclosure: I built pixtidy.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.