Cover Photo Crop Planner

You upload one cover picture and believe you have published one picture. You have not. A wide screen shows a long, low strip of it. A phone shows a shorter, squarer slice from the middle. Somewhere a round profile photo sits over a corner, and a row of buttons or a name may sit over another. Each of those views is its own picture, cut from yours by rules you never see, and the words you placed so carefully belong to whichever cut happens to keep them.

The useful question is therefore not how big the cover should be. It is which part of it survives every cut.

How a window decides what to keep

Most screens fill a frame with a picture the way the CSS property object-fit does when it is set to cover. The W3C CSS Images specification defines that fit exactly: the picture is scaled to the smallest size that keeps its own proportions while leaving neither its width nor its height smaller than the frame. One side fits snugly. The other side spills over, and the spill is cut off. Nothing is stretched, and nothing is left empty, so the only thing a frame of a different shape can do is throw part of the picture away.

Which part goes is decided by a position. The default for object-position is 50% 50%, the centre, and the specification resolves it the same way it resolves a background position. The CSS Backgrounds specification spells out the arithmetic: a percentage offset is taken of the frame’s width minus the picture’s width. At 0% the left edges line up, at 100% the right edges do, and at 50% the overflow is split evenly. MDN works through the same formula with numbers, which is a good way to convince yourself that it really is that simple.

So a window is described by three things: its width, its height and its focal position. Give those to the cover rule and you can say exactly which rectangle of the master picture that window shows. The proportion that matters is the aspect ratio, width over height, written as width to height; Wikipedia’s article lists the familiar ones, from 4:3 and 16:9 screens to 3:2 photographs. A cover shown at 3:1 on one screen and 1.6:1 on another is being shown through two quite differently shaped holes.

The overlap that hides a corner

The windows are only half the problem. Pages lay things over the cover: a circular portrait that overlaps the bottom edge, a pill holding a name, a cluster of buttons. These cover the picture in that window only, and they are positioned relative to the window, not to your master. Because the cover fit is just a scale and a shift, a circle drawn on the window is still a circle when you trace it back onto the master, only larger or smaller. That makes the covered spots easy to carry back to the picture you are designing.

The trouble is that every window places them differently. A portrait sitting at the lower left of a wide view might sit in the lower middle of a narrow one. Text that clears the portrait on one screen can land under it on another. Nobody sees both at once, which is why the collision usually goes unnoticed until someone else points at it.

Design to the intersection, not the largest view

Television solved a version of this long before social profiles existed. Broadcasters could not know how much of the picture a given set would crop, so they kept titles inside a title-safe area far enough from the edges to survive the worst case, as Wikipedia’s article on safe areas describes. Film and video crews went further with a technique called shoot and protect: frame the shot so the important action lies inside a protected rectangle, so the material can later be cropped to wider or narrower formats without losing it. A 14:9 protected area is often chosen as a compromise between 4:3 and 16:9.

The same thinking works for a cover. Work out the rectangle each window shows, take the part that all of them share, and remove every covered spot from it. What is left is the only place a word is guaranteed to be read. The common mistake is the opposite one: designing on the largest view, usually the wide desktop strip, and letting the narrow view take its chances. A wide film squeezed onto a 4:3 screen by pan and scan loses 43% of its width when it starts at 2.35:1, and the arithmetic of one minus 1.333 over 2.35 shows why nobody should expect a narrow screen to be generous.

The intersection has a second use. It tells you what shape the master itself should be.

Suppose the windows run from a narrowest aspect to a widest one and the focal positions are centred. A master wider than every window wastes width the narrow screens will crop away; a master narrower than every window wastes height. Between the two extremes, the share of the narrowest window that is safe grows with the master’s aspect while the share of the widest window shrinks. The worst of the two is best where they are equal, and that happens at the geometric mean of the two extreme aspects. With covered spots or off-centre focal positions there is no tidy formula, but the same aim, making the worst window as safe as possible, can be searched for numerically.

Here is a case you can reproduce. Make two windows, Wide at 1200 by 400 pixels and Narrow at 640 by 400, both with centred focal positions and nothing covered. Their aspects are 3:1 and 1.6:1, so the best master aspect is the square root of 4.8, which is 2.191 : 1. At that shape, 73.0% of each window shows the shared rectangle. Ask for a master that neither window has to enlarge on a screen with two device pixels per CSS pixel, and the smallest one is 2400 x 1095. The rectangle both windows show is then 1752 by 800 pixels, starting 324 pixels from the left and 147.5 from the top.

Now make the obvious mistake and set the master to 3:1, 2400 by 800, because the wide view looked like the main one. The wide window shows everything, but only the middle 1280 pixels of it also reach the narrow screen, so just 53.3% of the wide window is safe. Nothing about the picture changed, only its proportions, and almost twenty points of safe share disappeared from the worst view.

Add a round portrait to the narrow window, centred and hanging slightly below its bottom edge, with a diameter of 30% of the window’s width. The worst safe share drops from 73.0% to about 72.1%, because the circle bites into the bottom of the shared rectangle. Small as that sounds, it is exactly where a second line of text tends to go.

What the numbers cannot settle

A planner like this is only as good as the windows you give it. No social network’s current sizes are built into it, because no source stating them could be cited here on terms that allow reuse. The sizes and covered spots are whatever you type. The right habit is to look at your own page on a wide screen and a phone, measure what you see, and confirm the current numbers where you post before trusting any template, including this one. Platforms change their layouts, and an old size chart is a confident guess.

The geometry is exact; the judgment is not. It can prove that a headline sits inside the safe area in every window, but not that the headline is any good. It can measure contrast between your text colour and the pixels underneath, using the WCAG 2.2 definition of relative luminance and its 4.5 to 1 minimum for text, but a busy photograph can pass that test in one spot and fail it a few pixels away. The planner reports the tenth percentile under each line for that reason, and that choice of percentile is a judgment, not a rule from the standard.

It also cannot tell you how a page will rescale the picture on screens it never told you about. A window you did not list is a window the plan does not protect.

Two practical points round this out. The files themselves are plain rectangles. The PNG specification allows text, time and colour-profile chunks; a careful writer can leave them all out, and the WebP container specification lists a colour profile and metadata as optional chunks that a browser encoder may add and a careful exporter can strip. And a cover deserves a text alternative like any other image. The W3C images tutorial asks for a short description of the essential information an informative image conveys, which for a cover usually means its words.

Responsive web design has a name for the general problem, the art direction problem, as MDN’s guide to responsive images calls it: different layouts want different crops of the same picture. A page can solve it by serving several files. A cover usually cannot, so the answer is the old broadcaster’s answer. Protect the middle, measure the edges, and put the words where every screen will keep them.