Speed · Engineering

Your logo is on every page, so its size is every page’s problem

Our brand mark came out of a drawing tool at 50 KB — 21.6 KB over the wire, on the header of every page, competing with the photo the visitor is actually waiting for. Halving it changed nothing you can see, and the proof had to be a rendering, not a reading.


A load-time board we keep flagged our own home page: well over a second on real phones, against a budget of 300 milliseconds, and the server accounting for only a fifth of it. So we watched a throttled phone load it and wrote down what arrived when.

Two pictures held the connection for half a second between them. One was the hero screenshot, which is the thing a visitor is waiting to see. The other was the logo in the header.

What a logo weighs

Ours is a hand-drawn graffiti wordmark, exported from a drawing tool as a vector. That export was 50 KB on disk and 21.6 KB compressed on the wire. It is a mask in the header of every single page of the site, so that was not the home page’s cost — it was every page’s cost, on every first visit.

Inside, it was about a thousand curves with every coordinate carried to three decimal places, in a coordinate space fifty times larger than the one the logo is ever drawn in. At the size the header shows it, one of those decimal places is worth about six thousandths of a pixel. The precision was real and entirely unusable.

Half the bytes, the same drawing

Rescaling the coordinates so whole numbers were enough, and dropping the scaffolding the export carries — an XML preamble, two namespaces nothing uses, the indentation, a repeated instruction in front of every curve — took it to 11.3 KB. Nothing about the picture changed.

That is a claim, so it needed proving properly. We drew the new mark and the original side by side at 264 pixels wide, which is the largest size any real screen ever asks of it, and compared them pixel by pixel: under one per cent differ, none by more than a third of a shade — the same order as rewriting the numbers at full precision and changing nothing at all.

Two attempts that looked right and were not

The first attempt rounded the coordinates without rescaling first. The file got smaller than the one we shipped and the curves visibly faceted — you can see the flat spots. Reading the numbers would never have told you that.

The second was worse and more interesting. Writing the numbers compactly means leaving out separators where they are not needed, and the rule we used leaned on each instruction letter to separate one step from the next. But a repeated instruction is written once and its later steps have no letter in front of them, so a coordinate of minus eleven followed by one of zero came out as minus a hundred and ten. Every number after that was off by one position and the whole drawing shifted. Three quarters of the pixels changed — while every individual number in the file was correct.

If you ever compress an asset, that is the lesson: check it by looking at it. A file whose contents all read correctly can still draw the wrong thing.

Worth asking about your own site

You probably received your logo from a designer as whatever their tool exported. It is likely on every page you own, including the menu a guest opens at your counter, and it is likely several times larger than it needs to be. It costs nothing to check what it weighs, and it is the rare improvement that is invisible by definition.


Try it on tonight’s service.

Nothing to install, no card. Not better by the weekend? Close the tab.