The browser picks the picture by what you tell it

A menu photo on a QR page is shown in a box about 350 pixels wide. The file behind it is often 1,280 or more, because that is the size it was taken at. The phone downloads all of it, throws most of it away, and the guest waits for the difference.

The fix is old and good: offer the browser several copies of the same picture and tell it how wide each one is, plus how wide the space will be. It does the arithmetic — screen density included — and fetches the cheapest copy that will still look sharp. On our own home page that took the pictures a desktop downloads from 56 KB to 22 KB, without anything on screen changing.

The part that is a promise

Here is the catch, and it is worth knowing whoever builds your site. The width you attach to each copy is not read from the file. It is typed. The browser trusts it completely — the whole choice is computed from that number and never checked against the picture.

We shipped three of these and got one wrong. Two of the pictures were 1,280 wide, the third was 1,440, and the third was labelled from its neighbours instead of from itself. One of ours, in our own markup, an hour old.

Why nothing caught it

Every page rendered correctly. Every photo was sharp. No extra bytes moved, because with the copies we had, any screen that would have taken the largest still took the same file. Open the site and there is nothing to see; the false statement lives in an attribute no human reads.

That is the shape worth carrying away. A wrong number that changes what you see gets found in a minute. A wrong number that changes nothing today sits there until the day somebody adds a bigger copy or changes the layout — and then it quietly starts choosing badly, on the phones of people you will never hear from.

What we did instead of retyping it

Correcting the number would have left the next person in exactly the same position. The reason it was typed at all is that our build could measure PNG, GIF and JPEG files and not WebP, which is the format those copies are in. So the measuring got a WebP reader, and a check now compares every width we claim against the width the file actually has, on every page, every build.

There is a comment at the top of that file, written months earlier for the same reason in a different attribute: numbers copied into a tag by hand are a second copy of something the file already states, and the day somebody retakes a picture at a different size the copy is wrong. It was right. We just had not given ourselves the tool to obey it.

If you run a venue rather than a website, the useful version is this: any number in your system that describes something else — a case size, a portion yield, a supplier pack quantity — is either read from the thing or typed beside it. The typed one is right until the thing changes, and nothing will tell you when it does.