DEV Community

Miriam Alonso
Miriam Alonso

Posted on

The same portrait at 5 sizes: what breaks at 1200px, 400px, 96px, 48px and 15mm of print

#webdev #css #performance #frontend

One image, five destinations, five different failure modes. Most teams optimise for the biggest one and ship the other four broken.

Here is what actually happens at each step down.

1200px, the profile hero. Everything works. Skin texture, catchlights, background gradient, the lot. This is the size the photo was approved at, and it is the least important one on the list.

400px, the card. Fine detail goes first. Skin texture becomes noise, which is why over-sharpened exports start to look crunchy here while looking great at 1200. If your pipeline sharpens after resize, tune it at 400 rather than at full size.

96px, the comment avatar. Facial features become tonal blocks. Glasses frames merge with eyebrows. Anything relying on colour separation between hair and background collapses. This is the size at which a dark-haired person against a dark background becomes a silhouette.

48px, the list row. Head shape and one or two tonal masses, and that is it. Research on how people scan lists suggests this is where most recognition actually happens, which is uncomfortable given how little information survives. Tight crop wins here. Anything below the collarbone is wasted pixels.

15mm, the business card. A different medium with different physics. CMYK on uncoated stock has nowhere near a screen's dynamic range, so shadows fill in and contrast collapses. The moody side light that looked good at 1200px turns half the face into grey mush. Print wants flatter, brighter, more frontal light than a screen does.

What this means for your image pipeline

You cannot serve one file to all five. The obvious part is srcset:

<img src="p-400.jpg" srcset="p-96.jpg 96w, p-400.jpg 400w, p-1200.jpg 1200w"
     sizes="(max-width: 600px) 96px, 400px" width="400" height="500" alt="...">
Enter fullscreen mode Exit fullscreen mode

The less obvious part is that the small sizes want a different crop, not just a smaller one. A head-and-shoulders frame at 1200px should become a face-filling crop at 48px. Art direction, not resolution:

<picture>
  <source media="(max-width: 400px)" srcset="p-face-96.jpg">
  <img src="p-1200.jpg" alt="...">
</picture>
Enter fullscreen mode Exit fullscreen mode

And print needs its own export entirely, brighter and flatter, which no responsive image technique will give you.

Where this bites hardest

Roles where the same photo genuinely goes everywhere. A CEO portrait ends up in the annual report, the investor page, press coverage and a 48px byline, and it gets cropped by strangers you will never speak to. Financial advisors hit the print case constantly because that industry still runs on cards and printed material.

At company scale the problem multiplies: corporate headshot sets have to match each other at every one of those sizes, and mismatched lighting that is invisible at 1200px becomes very visible in a 96px grid. If you are shooting in the building, office sessions have their own trap, which is that the meeting room with the big window changes by 3 stops between the morning and afternoon slots.

And if the photo is going on card stock, the card conventions are worth reading before the export, not after.

One thing to try today

Take your team page, throttle to a slow connection, and shrink the window to 400px. Then squint. The faces that disappear are the ones with a background problem, and it is a background problem at every size, you just could not see it at 1200.

More from this series

On BetterPic

Top comments (0)