The blank box
An animated GIF is a stack of pictures with a delay after each. Mail clients that play it show the stack in order, and loop. Outlook for Windows from 2007 to 2016 does not: it shows the first picture and stops there, and current versions do the same whenever animation effects are switched off in Windows. Which versions do what is set out inour guide to GIFs in Outlook.
The trouble is what most animations put first. A photo that fades in, a logo that slides into place, a frame that wipes open: each begins from nothing, so its first picture is empty or nearly so. That empty picture is the whole signature, for every reader whose Outlook stops on it. They see a box where your face should be, and nothing tells them anything is missing.
Rotating a GIF after the fact
The usual fix is to rotate the animation: take the frames in a loop that starts at rest, and move the finished picture to the front. The loop still plays the same, because it comes back round to where it started, and a client that stops on the first frame now stops on the right one.
We did that for the animations we inherited, with a script that measures every frame and moves the fullest one, the one the designer held longest, to the front. It works, and it is fragile in two ways. Encoding the GIF again from its original source undoes the rotation. And the settings that describe an animation can say it is safe when it is not: one we checked arrived with a first frame that measured 28 per cent of its fullest, while its settings said the first frame was fine. We stopped trusting the label and started measuring the picture.
Frame 0, by construction
Your own photo is animated in your browser, and for those animations there is nothing to rotate. The renderer writes the finished photo first, holds it for one and a half seconds, then draws eight steps of 80 milliseconds each, and the loop comes back to the finished photo. Rest comes first because it is written first.
Every animation is one of two kinds, and both keep that order by the way they work. A mask hides part of the photo and lets it back in, step by step, so it can only ever show less than the finished picture and then all of it again. A light passes over the photo and only brightens it, so it never hides anything at all. Neither kind has a way to put an empty picture first.
A test that fails a blank frame
"Frame 0 is the finished picture" sounds simple to check, until a design cuts its photo into a shape. Then the first frame is not the photograph as it was uploaded: it is the photo in three pills, or leaning, or in a hexagon. So the test does not compare frames with the upload. It compares every later frame with the first one, and fails if any of them shows a pixel the first frame does not, or makes one darker than the first frame has it. A mask may hide part of the photo and a light may brighten it; nothing may add to it or dim it. The first frame also has to be held longer than the next, so it is a resting picture and not one that flicks past.
That is the property that matters to a reader on old Outlook: nothing they would see later is missing from what they see now. An animation written the obvious way, as a wipe from empty to full, fails it at once, which is the point.
Seeing what Outlook sees
The builder's preview has an Outlook view, and in it every animation is swapped for its first frame. It is not a label saying "Outlook shows a still"; it is the still, drawn where the animation was, so you see the signature those readers will see before you send anything.
What it costs
Starting on the finished picture means every animation has to end where it began, which rules out some motions: a signature that assembles itself once and stays assembled cannot be done this way, because its resting state would have to come last. We think that is the right trade. The resting frame is what most people look at most of the time, on every client, so it is the frame that has to be right.
It also shapes the file. Each photo animation is kept under 250 kilobytes, and when one would be larger, the renderer drops steps rather than pixels, sharing the time they leave across the steps that remain. The motion gets a little coarser before the finished photo gets any softer, because the finished photo is the part that has to hold up.