iOS cropping

I’m pretty sure I’ve always been frustrated by the way cropping works in the iOS Photos app. It’s usually presented as being so easy—just drag the crop handles where you want—but that isn’t really how it works. Quite often, a handle you aren’t dragging moves too, screwing up your careful editing.

Here’s an example. I took this screenshot on my iPhone from the Sherlock Holmes Wikipedia page.

Original screenshot

After opening it in Photos and tapping to get to the crop and rotate screen, we see this: a shrunken version of the image with the crop handles out at its corners.

Preparing for crop

Let’s say we want a final image with just the paragraph of text. We’ll start by dragging one of the top crop handles down to a spot just above the top of the paragraph.

After cropping top

If you look carefully, you’ll see that the image has expanded slightly to better fill the editing area. This has the advantage of providing us a bit more precision in positioning the crop handle in our next edit.

But if you look even more closely, you’ll see that something unintended has happened. The bottom handles have moved up very slightly, cropping out more of the last line of text captured in the screenshot. Not a big deal; we were going to crop those last couple of lines out anyway. Let’s go ahead and do so by moving one of the bottom crop handles up.

After cropping bottom

The image has again resized itself to fill the editing area, but this time the adjustment has completely screwed up our intended edit. The upper crop marks have moved down and sliced into the top line of the paragraph we were intending to capture. This happened even though we never touched either of the upper crop handles during the second edit.

This behavior, which seems to be driven by how the aspect ratio of the image changes as you drag one of the crop handles, is thoroughly unintuitive. The handle at the opposite corner of the one you’re dragging should never move.

There is a way around this, but it’s also unintuitive, and I often forget about it until my crop is ruined and I have to start over again.

Instead of dragging the crop handles at the corners of the image, touch and drag from the middle of an edge. For God knows what reason, cropping this way doesn’t change the position of the other crop handles. I say this is unintuitive because the handles at the corners look like the things you should be grabbing and moving. There are no visual clues that dragging from the middle of an edge is allowed.1

Here’s what happens to the Wikipedia screenshot when we drag the centers of the edges instead of the handles at the corners. First, dragging down from the top:

After cropping top by dragging center

Note that there’s been no change at the bottom. Also, I put the cropped top edge just above the text to make it easier to see that cropping out the bottom by dragging up the bottom edge leaves the top edge where we want it.

After cropping bottom by dragging center

I can’t think of any time in which the corner-dragging behavior of Photos is what I’d want, and I don’t understand why Apple made it the way it is. No other image editing app I’m aware of, including Apple’s own Preview on the Mac, changes the upper left handle of a selection when I’m dragging the lower right handle.

Update Sep 4, 2017 8:32 PM
The best explanation of the corner-dragging behavior came in this series of tweets from detailgeschrei (can’t anyone on the internet use their real name?). As we try to drag a corner handle straight up or down, we tend to slide our finger to the outside to maintain the full width of the image. When we do so, Photos stupidly interprets this as an instruction to enlarge the image as we drag. The diagonally opposite crop corner stays in place relative to the screen, but moves inward relative to the growing image. The upshot is a miscropped image.

When we drag the edge instead of the corner, the corners move perfectly vertically and the other side of the crop rectangle stays put, giving us what we want.

This explanation doesn’t let Apple off the hook. The image shouldn’t resize on screen no matter where we drag the crop handle until the dragging is done, and the diagonally opposite handle should never move relative to the image.

  1. Acorn on the Mac, an app I love, is also skimpy on edge-dragging clues. There are no handles at the centers of edges while using Acorn’s crop tool, but the cursor does change to show what you can do when it’s over an edge. ↩︎