Header Collage Maker

Put three photographs side by side in a wide strip and they start to argue. One is a tall portrait, one a landscape, one nearly square. Each wants its own height at the width you give it, and a strip can only have one.

The old craft words for this kind of work are honest about the physical labour behind it. A collage takes its name from the French for gluing, an art made by assembling different forms into a new whole. A photomontage is the process and the result of cutting, gluing, rearranging and overlapping photographs into one image. A header collage is the tidy end of that tradition: no overlaps, straight gutters, every picture in its own rounded cell. The tidiness is exactly where the arithmetic gets strict.

Why shapes fight

Every picture carries one number that decides how it behaves in a strip: its aspect ratio, the ratio of its width to its height, written width:height. A picture with a ratio of 2.5 needs two and a half times as much width as height. Put it in a row with others at a common height, and the row’s width is that height multiplied by the sum of all the ratios, plus the gutters between them.

Turn that around and you have the rule a justified row lives by. Take the width available, subtract the gutters, divide by the sum of the ratios, and you get the only height at which these pictures fill the row exactly without cropping a single pixel. Add a wide panorama and the row gets shorter. Add a tall portrait and it gets taller.

So a row is never free to be any height you like. It is a consequence. The only choices are which pictures share a row, and what happens when the rows together do not match the height of the frame.

A strip is a paragraph

This is the same problem a typesetter faces with words. A paragraph is a sequence of items of fixed width, broken into lines that each have to reach the margin. The naive approach is greedy: fill a line until the next word does not fit, then start another. It works, and it leaves ragged results, because an early decision cannot see what it does to the lines after it.

The better method, used in TeX, minimises the sum of the squares of the spaces left at the ends of lines, which spreads the unevenness around instead of dumping it on one unlucky line. Donald Knuth described it in an unpublished memo in 1977, and Knuth and Michael Plass published it in detail in 1981 in Software: Practice and Experience. Trying every possible set of break points would take time that doubles with each extra word; their approach uses dynamic programming instead, building the best answer from the best answers to smaller pieces of the same problem.

Pictures in a strip are a short paragraph. Each picture is a word whose width is its aspect ratio, and the break points decide which pictures share a row. The quality to optimise is different, though. A typesetter cares about stretched spaces. A collage cares about rows of wildly different heights, where one row of tiny thumbnails sits on top of one row of giants.

So the objective here is the variance of the row heights: how far, on average, each row strays from the average row. That number is not a simple sum over rows, which is what dynamic programming wants. The trick that makes it exact is to run the programme many times, each time charging every row its squared height minus a multiple of its height, and to walk that multiple until the best split by variance turns up.

The best split always sits on the outer edge of all possible splits plotted by total height against total squared height, and each point on that edge wins for some multiple. The tool checks its answer against trying every split, for every set of up to ten pictures it tests.

One difference from the classic partition problem matters. Splitting a set of numbers into two groups with equal sums is a famous hard problem, sometimes called the easiest hard problem, and its optimisation version is NP-hard. A collage that kept rearranging your pictures to balance the rows would wander into that territory. Keeping the order you chose, and only deciding where rows break, is what keeps the search small and exact.

Making it add up to the pixel

Ideal widths are fractions. A screen is not. A row of three pictures on 1,752 pixels of free width might want cells of 568.216, 789.189 and 394.595 pixels. Round each one on its own and the row can come out a pixel long or a pixel short, which means a picture spills past the frame or a hairline of background shows at the edge.

That is not a rare accident. In a test of 3,000 random rows of two to six pictures on that same width, rounding each cell independently missed the total in 829 of 3,000 cases. One pixel sounds like nothing, but 1 px is all it takes for a gutter to look uneven next to its neighbours, and an exported file is judged pixel by pixel.

The cure is old and comes from a different field entirely: the largest remainder method, one of the quota rules for allocating seats in a legislature among parties. Give every cell the whole-number part of its share, then hand the leftover pixels, one each, to the cells with the largest fractional remainders. The total is exact by construction. The tool uses the same rule for the row heights, and then reads its own pixels back: it paints every cell in a flat colour, walks out from each cell to its neighbours, and counts the gutter and the margin pixel by pixel.

Cropping around what matters

Once the rows are set, the block of rows rarely matches the height of the header. Something has to give, and the gentlest choice is to give everywhere at once: scale every row’s height by the same factor and let each picture be trimmed a little, rather than one picture a lot.

Here is a worked example you can reproduce in the tool on first load. Seven drawn pictures with aspect ratios of 1.8, 2.5, 1.25, 0.8, 2.29, 1.58 and 0.79 go into a frame 1,800 by 600 pixels, with 12 pixel gutters and a 12 pixel margin. Split into two rows of three and four, they want heights of 315.7 and 318.9 pixels. Together with one gutter that is 646.6 pixels, but the frame offers 576. Every row is scaled by 0.889, and every picture loses 11.1% of its area, trimmed from top and bottom.

Force the same seven into one row and the row wants a height of about 155 pixels; stretching that to fill 576 means trimming the sides, and each picture loses 73.1%.

Cropping, in the plain sense, is the removal of outer areas of a picture to change its aspect ratio or isolate the subject. The question is which outer areas. Each cell here behaves like the CSS cover rule: the picture keeps its own aspect ratio and is scaled until it fills the whole cell, and the excess is cut away. Where the cut falls is set by a focal point you place on each picture. The crop window centres on that point and slides only as far as it must to stay inside the picture, so the point is always inside what shows.

The spot your avatar covers

If your profile page puts a round portrait over part of the header, whatever lies under it is gone. Where such a spot sits can differ between sites and screens and can change over time, so the tool does not pretend to know it. You set the spot yourself, as a share of the width and height, and the layout treats it as a hazard.

If a picture’s focal point lands under the spot, the tool slides that crop sideways or up and down within the slack the crop has, and picks the nearest position that clears the spot with a small margin. Sometimes there is no slack: a picture whose shape already matches its cell has nowhere to slide. Then the tool says so plainly and names the cell, instead of pretending. You can reorder, zoom in to create slack, or ask for an empty cell to be kept where the spot is.

Not enlarging small pictures past what they hold

A cell that is wider than the part of the picture shown in it has to enlarge that part. Scaling up cannot add detail that was never captured; at best it generates a plausible image that would shrink back to the original. So the tool computes, for every cell, how many output pixels each picture pixel has to cover, and flags any cell past a limit you choose, with the factor written on it.

What the file carries, and what it cannot fix

Photographs from cameras carry Exif data: the camera model, settings, date and time, sometimes location, and an orientation tag with eight possible values that says which way is up. Browsers can apply that orientation when decoding, which is how a phone picture taken sideways still lands upright. The exported header is a new picture drawn from your pictures, so none of their tags travel with it. A PNG is written with only three chunks, the header, the image data and the end marker, and a JPEG or WebP from the browser has any profile or metadata block removed and is then scanned again to prove it.

A collage saved as one file is one image to a reader, so it needs one text alternative that says what the set shows and repeats any words written on it. If you add a line of text, its contrast is measured from the actual pixels under it, using the WCAG ratio, which runs from 1 to 21.

There are limits the arithmetic cannot cross. It cannot tell which part of a picture matters to you; the focal point is your judgement. It cannot make a dull set of pictures sit well together, and it cannot know where any particular site will crop or cover your header next month. What it can do is make every gutter equal, every row add up, and every trim visible before you post.