Animated email headers: GIFs that load fast and look good

An animated email header should be a GIF, around 1200×600 pixels displayed at 600 wide, with a short loop, modest file weight and a first frame that works as a finished design on its own. That last rule is the one people miss: some desktop versions of Outlook for Windows show only the first frame of an animated GIF, and anyone with images blocked sees nothing but your alt text. Design for those readers first, then add motion as a bonus for everyone else.

Why animated email headers are GIFs

Video support in email is rare and unreliable. Animated GIF, an image format, displays in most clients, from Apple Mail to Gmail. Newer formats such as animated WebP have patchier support in inboxes. So GIF remains the practical choice, with all its limits: at most 256 colours per frame and larger files than video. Those limits shape the design. The full comparison is in GIF vs MP4.

Design the first frame as the fallback

Treat the first frame as the email header and the animation as an extra. If your words wipe in from nothing, an Outlook reader sees an empty colour block. If your product appears at second two, they never see the product. Put everything that matters on screen in frame one, then let the motion happen around it.

• Words still, background moving. Drifting colour behind a fixed headline is the most reliable animated header there is.
• One small motion. A word that changes, a line that underlines itself, a soft shift of light. One idea per header.
• End where you began. A loop that jumps back to the start looks broken. Make the last frame lead into the first, as in seamless loop video.
• No flashing. Keep brightness changes slow. Rapid flashing is uncomfortable and can be harmful.

Keeping the GIF light

Most of a GIF's weight comes from pixels that change between frames. A header where the whole frame moves is heavy; one where a slow gradient drifts behind still words is much lighter, because the encoder can store only what changed. Halving the width roughly quarters the pixels, so decide early whether this header needs to be 1200 px or whether 600 px is enough.

1. 1

   Design at 1200×600

   Lay out the header with all words in place on the first frame.

2. 2

   Keep the loop short

   Two to five seconds, with every movement completing a whole cycle.

3. 3

   Export as GIF at 10 to 15 fps

   Use a palette built from the animation itself, not a generic one.

4. 4

   Check the weight

   If it is heavy, try 600 px wide, fewer frames or less movement before reducing quality.

5. 5

   Check frame one alone

   Open the GIF in an image viewer that shows only the first frame, or send a test to Outlook on Windows.

The detailed export commands, palette and dithering settings are in animated GIFs.

HTML for an animated email header

Code the header as an ordinary image inside a table cell. Set the display width in both the attribute and the style so every client sizes it correctly, give it descriptive alt text, and set a background colour on the cell that matches the GIF's first frame. When images are blocked, readers then see your colour and your words, not an empty box.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td bgcolor="#2e1065" style="background-color:#2e1065;">
      <img src="https://example.com/header-october.gif"
           width="600" height="300"
           alt="The October issue: new work, three reads and a studio update"
           style="display:block; width:100%; max-width:600px; height:auto; border:0;
                  color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
    </td>
  </tr>
</table>

Dark mode and image blocking

Dark mode can change the colours around your header but usually leaves the image itself alone. A header with its own full background colour holds up in both modes; one with a transparent or white edge can end up as a bright box on a dark screen. CSS gradients behind the image are not reliable across clients, so bake the gradient into the GIF and use a solid colour as the fallback. Gradients in email covers the options.

In Gradiently you can design the header at the email header size on a moving Mark, keep the words still while the Mark drifts behind them, and export it as a GIF on Pro. Because the background is a one of a kind Mark you own, the header looks like your brand rather than a template other newsletters share. For still headers and layout, see email header design.