# Animated email headers: GIFs that load fast and look good [Canonical HTML page](https://gradiently.design/guide/animated-email-header) Motion at the top of an email gets noticed, but inboxes are fussy. A good animated header is light, short, and still makes complete sense if it never moves at all. ## The short version - An animated email header is almost always a GIF, because most email clients display animated GIFs and very few play video. - Some desktop versions of Outlook for Windows show only the first frame of a GIF, so the first frame must work as a complete design. - A common header size is 1200×600 pixels, displayed at 600 pixels wide so it stays sharp on high density screens. - Keeping the GIF light matters because large images load slowly on mobile data, and short loops with little movement weigh least. - Important words such as offers, dates and buttons belong in live HTML text below the header, not only inside the animation. 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](https://gradiently.design/guide/gif-vs-mp4). | Setting | Recommendation | Why | | --- | --- | --- | | Format | GIF | Plays in most email clients; video mostly doesn't | | Design size | 1200×600 px | Twice the display width for sharp, dense screens | | Display width | 600 px | The standard width of an email body | | Loop length | 2 to 5 seconds | Short loops weigh less and still feel alive | | Frame rate | 10 to 15 fps | Smooth enough for drifting colour and simple reveals | | File weight | As light as you can make it | Big headers load slowly on mobile data | Starting points for a header that loads quickly and looks crisp. If weight matters more than sharpness, export the GIF at 600 px wide. ## 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. Newsletter header reading the October issue with a small field notes label over a gradient Frame one: complete. Every word is in place, so a reader who only sees this frame misses nothing. The same newsletter header later in the loop, with the gradient colour shifted behind still words Mid loop: the words stay put while the colour shifts behind them. The motion adds mood, not information. - **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](https://gradiently.design/guide/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. **Design at 1200×600** Lay out the header with all words in place on the first frame. 2. **Keep the loop short** Two to five seconds, with every movement completing a whole cycle. 3. **Export as GIF at 10 to 15 fps** Use a palette built from the animation itself, not a generic one. 4. **Check the weight** If it is heavy, try 600 px wide, fewer frames or less movement before reducing quality. 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](https://gradiently.design/guide/gif-maker-tips). ## 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. ```html
The October issue: new work, three reads and a studio update
``` A 1200×600 GIF shown at 600×300. The cell colour matches the first frame, and the styled alt text reads well if images are off. > **Live text below the header** Put the offer, date and button in real HTML text under the image. It shows with images off, can be read by screen readers and search inside the inbox, and stays sharp at any size. ## 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](https://gradiently.design/guide/gradients-in-email) covers the options. ### Avoid - Words that appear only after the first frame - A heavy GIF where the whole frame moves - Transparent edges that clash in dark mode - Empty or generic alt text such as "header" - The offer and button only inside the image ### Do - A first frame that is a complete design - Still words over slowly moving colour - A full background colour in the image - Alt text that says what the header says - Live HTML text for anything people act on 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](https://gradiently.design/guide/email-header-design). ## FAQ ### Do animated GIFs work in email? In most email clients, yes. Some desktop versions of Outlook for Windows show only the first frame, so design that frame to work on its own. ### What size should an animated email header be? Design it at 1200×600 pixels and display it at 600 pixels wide. If file weight matters more than sharpness on dense screens, export the GIF at 600×300 instead. ### Can I use video in an email header? Video plays in very few email clients, so it isn't a reliable choice. Use an animated GIF, or a still image that links to the video. ### Why does my email GIF not animate in Outlook? Some Outlook versions for Windows display only the first frame of animated GIFs. That is a limit of the client, not your file, which is why the first frame should carry the whole message. ### How do I make an email GIF smaller? Shorten the loop, lower the frame rate to around 10 to 15 fps, keep most of the frame still and consider exporting at 600 px wide.