Make the message understandable before it moves
Write the heading, explanation, and next step as ordinary email text first. If you are announcing three notebook colors, name the collection in the heading and put the shopping link or button outside the image. The GIF can rotate through the colors without becoming the only source of useful information.
In an HTML email, use real text for the heading and an actual link or button, not lettering baked into the image. In a plain-text alternative, include the same essential wording and destination URL.
Choose one job for the animation. A color comparison needs clear holds; an interface demonstration needs a visible change; a decorative flourish may need only a small movement. Avoid mixing several messages into a miniature slideshow.
Keep prices, deadlines, offer conditions, and discount codes in readable text outside the GIF. A recipient should not need to wait for a later frame or replay the sequence to find an essential detail.
Choose a production route that matches your source
| What you have | How to prepare the GIF | What to inspect |
|---|---|---|
| Several finished still images | Assemble them in a frame-based GIF editor. | Order, consistent framing, and time to read each change. |
| A recorded demonstration | Trim the useful interval in a video-to-GIF converter. | The action remains understandable without sound. |
| One picture that needs new movement | Generate motion with the image animator, then convert the resulting video to GIF. | Product shapes, lettering, and whether the movement suggests something untrue. |
Generated motion needs an editorial check as well as a technical one. If packaging changes shape or a label becomes illegible, do not use that result to demonstrate the real product. A simpler sequence of accurate still images may explain it better.
Make frame one a finished image
Open the exported GIF and inspect its first frame separately. It should show a recognizable subject and look deliberately composed. Do not assume that a recipient will see the transition into the “real” image.
A fade from an empty background is a common failure: the animation looks polished while playing, but its opening state says nothing. Start with the product already visible, then introduce movement. For a before-and-after sequence, name the comparison in the surrounding text so the first image does not imply it shows both states.
Check the ending too. If the GIF plays once, its final frame should be useful. If it loops, watch the return to the beginning for a distracting jump. A loop setting alone does not create a smooth transition.
The first frame should already show the subject. Keep the email’s heading, offer and link in ordinary text outside the image.
Export for the space the image will occupy
Choose dimensions for the image's place in the template, not the largest export available. A small supporting illustration does not need the same canvas as a full-width product demonstration. Review the result at its displayed size, especially on a narrow phone screen.
Reduce unnecessary duration before reducing visual quality. Then compare a smaller canvas, fewer frames, or a simpler background. Check that pointer movements, color changes, and small product details remain legible. Remove baked-in fine print instead of making readers decipher it.
Measure the exported file. There is no single file size that makes every animated email image suitable for every audience. An email service's upload ceiling is an acceptance limit, not a recommended performance target. Keep the smallest version that still communicates, and test that exact file in the message.
Keep a static copy of the chosen first frame alongside the GIF. It is useful for reviewing the fallback with colleagues and for switching the design to a still image if testing reveals problems.
Add the GIF as an image in the message body
Use the actual .gif file, not a screenshot of it or the MP4 used to create it. For a campaign builder, use its supported image block. For an individual email, use the composer’s supported inline-image insertion method.
- Place the image where it belongs beside the relevant explanation. Merely attaching a file does not establish that it will appear as an inline animation.
- Upload or insert the exported GIF. If the editor offers only a still preview, do not immediately assume the source animation has been lost.
- Set the display size and add useful alternative text where supported. Give a linked image the intended destination, and repeat the action with a separate text link or button.
- Inspect the asset again after editing. Campaign Monitor documents that resizing preserves GIF animation, while cropping saves a static image. If you need to crop, finish that change before uploading the GIF; reupload the original if animation is lost.
- Send a test using the same sending workflow as the final message. Inspect the delivered email rather than relying only on the editor.
If insertion produces an attachment or a frozen image, check the sending application's current image-insertion guidance. Do not keep pasting from different applications and assume the animation survives.
Keep the readable message outside the animation
Alternative text should explain the image's relevant content, not its filename. For the notebook example, “Notebook shown in blue, green, and cream” is more useful than “promo-animation.gif.” Avoid using alt text as a substitute for the offer itself; its presentation can vary between clients.
Use readable contrast and avoid flashing. Do not make essential words move quickly across the image. Recipients may have no convenient control to pause an email GIF, even when your animation editor provides one.
For a detailed explanation, consider a still thumbnail linking to a page with controlled video playback. That also provides a better home for sound, captions, and a longer demonstration.
Treat Outlook as a version-and-settings question
“Outlook never plays GIFs” is outdated advice. Microsoft's guidance covers Outlook for Microsoft 365, Outlook 2024, and Outlook 2021, where animated graphics normally play but settings can disable them. That does not establish identical behavior across older versions or every recipient's configuration.
Keep the first-frame safeguard without claiming that all Outlook recipients need it. If your audience uses a particular Outlook version, test that environment directly. Record the version and settings with the result; “tested in Outlook” is too broad to explain what you actually checked.
Compare three delivered states
| State | What must remain usable |
|---|---|
| Animation plays | Clear timing, correct crop, readable subject, and working destination. |
| Only the first frame appears | A complete, accurate image that does not depend on a later reveal. |
| Images are unavailable | Heading, explanation, offer conditions, and a usable next step in email text. |
Review these states at mobile and desktop widths. Use the clients relevant to your audience, and note which checks are real client observations and which are deliberately simulated fallbacks. A static-first-frame preview is a design test, not proof that a particular client suppresses animation.
Find where the animation stopped
If the GIF is already static when opened independently, revisit the source or export. If it plays independently but the builder stores a still image, investigate the upload or editing step. If it survives the builder but stops in one delivered client, check that client's playback behavior and settings.
When the image is unreadable, simplify it instead of adding more frames. When the explanation needs sound or a long sequence, use a linked video thumbnail. Animated images for email should make a message easier to understand, not create another task for the reader.
Sources checked: October 31, 2026.