Photo Editing

Make a tidy application photo out of an ordinary phone snapshot

A face detector of 190 KB returns a grid of anchors, a box and five landmark points, and everything after that is arithmetic: head height, eye line, the angle to level by, millimetres to pixels. An application photo, explicitly not an official passport photo, made without uploading your face anywhere.

Make a tidy application photo out of an ordinary phone snapshot

A CV needs a photograph that looks deliberate. What most people have is a snapshot: head slightly tilted, kitchen behind them, framed for a phone screen rather than for a 35 by 45 millimetre box. Cropping it by hand produces something that is almost right in a way that is hard to fix and easy to see.

Before anything else, the boundary this article stays inside. What follows makes an **application photo**, for a CV, a team page or a profile. It is not an official passport or identity document photograph. Those are governed by published requirements that the issuing authority checks, covering expression, lighting, shadow behind the head, sharpness and more, and nothing here verifies any of them. For a document, go to a photographer.

Within that boundary the job breaks into three parts, and two of them are pure geometry.

Finding the face, and what the detector actually returns

The face detector is remarkably small: about 190 KB. It does not return a picture or a mask. It returns a grid of candidate positions, and for each one a score, a box and five landmark points.

The grid part is worth unpacking because it is how most detectors of this shape work and it is rarely written out. The picture is examined at three scales at once, called strides: one anchor every 8 pixels, one every 16, one every 32. For a 320 pixel wide picture that is 40 columns at stride 8, so the stride 8 grid alone has 1600 anchors. Every anchor carries a prediction, and turning an anchor index back into a pixel coordinate is arithmetic:

cols   = width / stride
cx     = (index modulo cols) * stride
cy     = floor(index / cols) * stride
width  = exp(prediction) * stride
x      = cx + offset * stride - width / 2

The exponential is there so the model can predict a size on a logarithmic scale, where a factor of two up and a factor of two down are the same distance. The five landmarks come back the same way, as offsets from the anchor in units of the stride: right eye, left eye, nose tip, right mouth corner, left mouth corner.

The whole thing runs in this browser tab. Nothing is uploaded, and the only thing fetched is the model, coming down from this site the first time you ask for it.

Application photo from a phone snapshot

A photo from a phone becomes something you can attach to an application: the face is found, the head is levelled, the frame is cut to the usual proportions, the background can be swapped for a quiet surface, and the result comes out at print size. Two small models do that, about 5.1 MB of weights together, and they run in this browser tab. Your photo is read here and never uploaded, and there is nowhere for it to be uploaded to.

This makes an application photo, not an official passport or ID photo. The rules for a biometric passport photograph are narrow, and the authority that issues the document is the one that checks them. This tool checks none of them: not the expression, not the lighting, not the shadow behind the head, not the sharpness. Use it for a CV, a team page or a profile, and go to a photographer for a document.

Photo
Drop a portrait here
or press Enter to pick one. JPEG, PNG or WebP.

Sample portrait, drawn in this browser.

35 by 45 mm at 300 dots per inch comes to 413 by 531 pixels.

Where the head sits

Levelling turns the picture until the line between the two eyes is horizontal. Placing the crop by hand skips the face search entirely, which is also what happens when no face is found.

Left as it is, so no second model is needed and nothing is cut out.

Load the model to begin.
As it came in
The crop, once it has run

What this deliberately cannot do. It is not an official passport photo and it checks none of the biometric requirements: not the expression, not the lighting, not the shadow behind the head, not the sharpness, not the pixel count an authority asks for. The face search finds faces seen from the front and grows unsure at a strong turn of the head, in deep shadow or behind sunglasses. Replacing the background leans on a model trained on people, so an unusual hairstyle is cut visibly wrong, and that model has no idea what to do with a hat or a raised hand. And a phone held at arm's length with a wide lens stays distorted: the nose comes out larger than it is and the ears smaller, and no crop repairs that.

How the crop is worked out. The detector returns a box around the face and five points: both eyes, the tip of the nose and the two corners of the mouth. The whole head is taken to be about 1.42 times the height of that box, because the box stops near the eyebrows and the hair is above it. The eye line is the midpoint of the two eye points. The frame is then placed so that the head fills the share of the height you asked for and the eyes land on the line you asked for, and levelling turns the picture by the angle between those two points, nothing more. Every one of those steps is arithmetic, which is why it sits outside the model and can be checked. Comparable tools exist, several of them good. What is different here is the mechanism: the picture is read in this tab, and the only thing fetched is the model.

WunderPaint
The Dynamic Design and Automation Studio
WunderPaint is a layered image editor for your WordPress media library. WunderPaint Studio is the same thing in any browser, free and without an account.

From a box and five dots to a crop

The detector’s box is not the head. It stops around the eyebrows, because that is where a face ends and hair begins, and hair is above it. So the head height is estimated as roughly 1.42 times the height of that box, which is the kind of constant that looks arbitrary and is simply the ratio between a face box and a whole head across a large number of faces.

From there it is arithmetic. You say what share of the frame the head should fill and where the eye line should sit, both as percentages, and those two numbers plus the head height and the eye midpoint determine the crop rectangle exactly. There is nothing to tune and nothing to iterate.

The levelling is the angle between the two eye landmarks, and one detail in it is worth stealing. The rotation happens about the midpoint of the eyes, not about the centre of the frame. Rotating about the frame centre is only correct when the eye line is asked for at exactly 50 per cent, and is wrong by a growing amount everywhere else, in a way that looks like a bad face detector rather than like a bad choice of pivot.

Table of the face detector's three strides on a 320 pixel square picture: stride 8 has 1600 anchors and finds small distant faces, stride 16 has 400 and finds faces at a normal distance, stride 32 has 100 and finds a face filling the frame, and every anchor carries a score, a box and five points recovered from its index.

Two numbers decide how the photograph reads

Head height and eye line are the whole framing, and they are worth understanding as a pair rather than as two sliders to nudge until it looks right.

Head height is how much of the frame the head occupies from chin to crown. Push it up and the photograph becomes intense and close, the kind of framing that suits an identity document and reads as slightly confrontational anywhere else. Pull it down and there is room for shoulders, which reads as relaxed and, past a point, as though the photograph was not really about you.

Eye line is where those eyes sit measured from the top of the frame. This is the one people never think about and it does more work than the other. Eyes placed near the middle read as a snapshot. Eyes placed somewhere between a third and a half of the way down read as a portrait, which is a convention old enough to predate photography and strong enough that breaking it feels wrong without being nameable.

The defaults sit in the range these conventions occupy, and moving them ten per cent in either direction changes the impression more than the background does.

The background is the only part that needs a second model

Replacing the kitchen with a quiet surface needs to know which pixels are the person, which is portrait matting: the same technique behind cutting a subject out with a soft edge. It is a separate model of about 5 MB and it is only fetched when you ask for a background change.

That separation is deliberate and it is the difference between a tool that costs 8.6 MB and one that costs 3.7. Leaving the background alone is a legitimate choice, often the right one when the wall behind you is already plain, and somebody who makes that choice should not pay for a model they never use.

It is also where the result is most likely to look wrong. Matting on a person against a busy room is harder than matting against a plain wall, an unusual hairstyle cuts visibly badly, and the model has no idea what to do with a hat or a raised hand. If the background is going to be replaced, the photograph to reach for is the one taken against the emptiest wall in the house, and then the model has an easy job rather than an impossible one.

Millimetres, pixels and the sheet

The output is specified in millimetres and produced in pixels, and the conversion is the one piece of this that people get wrong most often.

At 300 dots per inch, 35 by 45 millimetres is 413 by 531 pixels. That is not a suggestion, it is a division: 35 millimetres is 1.378 inches and 1.378 times 300 is 413. A file smaller than that cannot be printed at that size at that resolution, however it is labelled, and a file much larger gains nothing that the printer can put on paper.

The sheet of four exists because photo printing is priced per sheet and not per photograph. Four 35 by 45 photographs side by side is 152 by 51 millimetres, which fits comfortably inside a standard 15 by 10 centimetre print, so one order gets you four usable copies. That is the sort of practical detail that separates a file that looks right on screen from one that arrives correctly.

Table converting print formats to pixels: 35 by 45 millimetres is 413 by 531 pixels at 300 dots per inch and 827 by 1063 at 600, a 45 millimetre square is 531 by 531 and 1063 by 1063, and a sheet of four is 152 by 51 millimetres which fits inside a standard 15 by 10 centimetre print.

Why the sample is tilted on purpose

The tool opens on a drawn portrait that is deliberately rotated by seven degrees. That is not decoration, it is the case the levelling exists for, and seven degrees is roughly what a phone held casually produces.

It is a useful number to know because seven degrees is below the threshold at which most people notice a tilt in a photograph and well above the threshold at which they notice that something is off. That gap is exactly why levelling is worth automating: the fault is too small to see and too large to ignore, so it survives every manual check and shows up in the finished thing as an unease nobody can place.

It works before the model arrives

Placing the crop by hand needs no model at all. Choose that option, drag the frame, pick a format and a resolution, and download a correctly sized photograph without fetching a single byte of weights.

The same path is what happens automatically when no face is found, which is the honest fallback: the tool says it did not find a face and hands you the manual controls, rather than producing a confident crop of somebody’s shoulder. A detector that fails silently is worse than no detector, because you only discover the failure after you have sent the photograph somewhere.

What it deliberately cannot do

It checks none of the biometric requirements. Not the expression, not the lighting, not the shadow behind the head, not the sharpness, not the pixel count an authority might ask for. It is not an official passport photo and the tool says so above every control rather than at the bottom. It also leaves the file’s metadata alone: the photograph you download carries whatever the original carried, and if you have never looked at what a phone writes into a picture, a job application is a reasonable moment to start.

The face search finds faces seen from the front, and grows unsure at a strong turn of the head, in deep shadow or behind sunglasses. Background replacement leans on a model trained on people and cuts visibly wrong on unusual hair.

And a phone held at arm’s length with a wide lens stays distorted. Holding a camera close makes the nose larger and the ears smaller, because the nose is proportionally much closer to the lens than the ears are, and no amount of cropping repairs that. The fix is distance: have somebody take the picture from three or four metres away and zoom in, or use the longer lens if the phone has one. That single change does more for the result than everything in this tool put together.

Where it fits

Comparable tools exist and several of them are good. Most of them work by uploading your photograph, which for a picture of your own face going onto a job application is a decision worth making consciously rather than by default. The mechanical difference here is only that the weights come to your browser instead.

The part worth taking away is not the tool. It is that the hard sounding half of this problem, finding a face and levelling a head, is 190 KB and some arithmetic, while the easy sounding half, having a photograph worth cropping, is the part that actually decides the result. A well lit snapshot against a plain wall, taken from a sensible distance, crops into something good. A badly lit one taken at arm’s length in a kitchen crops into a smaller badly lit one. Every automated step in between is real and none of them changes that order.

Make a tidy application photo out of an ordinary phone snapshot

Table of Contents

Learn it by building something

Every week one thing you can make the same afternoon, from dynamic templates to 3D type. Written down step by step.

One mail a week, and then it ends.
Unsubscribe in one click.

Troubleshooting

Error Establishing a Database Connection: What WordPress Is Actually Telling You

The message means PHP ran, wp-config.php was read, and the connection to MySQL failed. Nothing more. Here is how to tell a wrong password from a downed server from a host that ran out of connections, and what to do about each.

WordPress Development

WordPress User Roles and Capabilities, Actually Explained

Subscriber holds one capability, Administrator all fifty. What the five WordPress user roles really grant, why code checks capabilities instead of role names, and how to build a role that fits the job.

WordPress Development

functions.php Explained: What It Is and How Not to Break Your Site With It

functions.php is a normal PHP file that ships with your WordPress theme and runs on every page load, which makes it powerful, easy to misuse, and the wrong place for anything you want to keep. Here's what it actually does, and how to edit it without taking your site down.

Photo Editing

Dithering Side by Side: Why Atkinson Looks Like a Mac and Bayer Like a Game

Eight dithering methods on one picture, with the same palette and the same options. Every kernel and divisor written out, the Bayer matrix built by recursion, and the linear light step that almost every quick implementation skips.

Security & Privacy

SPF, DKIM and DMARC Builder: Why Your Contact Form Mail Vanishes

Three DNS records decide whether your contact form mail arrives: SPF lists the servers, DKIM signs the message, DMARC ties both to the From address a reader sees. What each one checks, why a passing SPF record can still fail DMARC, and where WordPress mail goes wrong.

WordPress Images

WooCommerce Product Image Size: The Three Settings That Decide Everything

WooCommerce shows the same photograph in three places using three different files. Here are the three registered sizes, the cropping option that decides what happens to a mixed range, and why changing a width appears to do nothing.

Download the free WunderPaint Plugin for WordPress

The WunderPaint workspace with the layers panel, adjustment sliders, text style presets and the asset library along the bottom

The Image Editor & Design Studio

Everything described here can be done in the browser, on your own site. The live demo runs the full editor with nothing to install.

Free

Chaos Art

Autonomous painters make one-of-a-kind abstract art in 3D space - gestures, art movements, painterly media, and embeds that paint a new original for every visitor.

Pro

Particle Strokes

Paint with swarms of light: twenty-two movements, a stamp you draw yourself, and curves that give a stroke a shape - the swarm keeps painting for a few seconds after you let go.

Pro

City Diorama

Any place on earth as a miniature you could hold: real streets, water and building footprints raised into a 3D diorama - or wrapped around a sphere as your own tiny planet.

Free

Papercut Art

Layered paper pictures with real depth - a photo sliced along its actual depth into up to twenty layers, parametric landscapes, animals and clouds you can shape, letters with real counters, and a look that runs on three dials.

Pro

3D Earth Studio

A hyperrealistic globe - day and night with city lights, live clouds, atmosphere halo, country borders and highlights, click-to-place markers with flight-route arcs, satellite orbits, seamless rotation video and a live website embed.

Free

Mystic Studio

Turn a birth date into wall art - a real natal chart with houses and aspects, the moon of that night, zodiac and Chinese zodiac posters, numerology cards and a synastry wheel for two, in eight artful themes.

Free

Marble Bath

Marble paper on a virtual water bath - drop, rake and comb real Ebru patterns with gestures, flowers and classic recipes, razor-sharp at any size and re-editable as a layer.

Free

Day Ring

Turn a day into a beautiful circular schedule - colour-coded time blocks as arcs around a 24-hour clock, with concentric rings for overlaps, emoji, templates and a legend.

Free

Code Shot

Turn code into a gorgeous, share-ready image - syntax highlighting, editor themes, window frames and diff highlighting - then drop it into your design as a re-editable layer.

Pro

3D Solar System Studio

Build a date-accurate 3D solar system - real planet positions for any date, photoreal textures and one slider from artistic to true scale - then drop it into your design as an editable layer.

Pro

3D Molecule Studio

Build a real 3D molecule - from a curated library, the periodic table or a SMILES string - then style it, measure it and drop it into your design as an editable layer.