How to insert a GIF into an HTML email

Animated GIFs are increasingly being used in email marketing, and their benefits are obvious. Firstly, appealing visuals arouse interest, increase the desire to read an email, and create an emotional connection with the audience. Secondly, GIFs visually support a message and can explain complex ideas, for instance, a new interface, application, etc.

GIFs take up less space on the recipient’s device. Besides, they are a nice alternative to videos. Not every email client supports videos, whereas animated GIFs work in nearly all desktop and mobile clients. 

Please note: In Outlook (2007-2016) and Windows Phone 7 email clients, only the first frame of the GIF will be visible. Thus, take this into account when creating the GIF and make the first frame attractive. Put the most informative part of the message in it, e.g., a call to action (CTA). This way, your recipients won’t miss anything important when an email client that doesn’t support GIF will display an image in its place.

Inserting animated GIFs into HTML emails is similar to inserting images. Here’s how you can do it:

Step 1. Prepare the GIF you want to use in your email. 

You may search for a GIF on free websites or create your GIF using Adobe Photoshop, Giphy, PhotoScape, or other free animation software.

Step 2. Make sure your GIF is optimized. 

GIF’s file can load slowly because of the large size. This can irritate recipients, so we recommend optimizing your GIF before inserting it into an email. Decrease the GIF’s size to 0.5 MB or 1 MB, limit the number of colors and frames used, and keep the width of the frames to 600 px. It’s the standard width of an email newsletter. 

Step 3. Insert the GIF.

Insert the source code of the GIF animation in the HTML version of your email.

Please note that the added GIF image has to be accessible on the Internet. Upload your GIF on the website, e.g., Giphy, and copy the link, then paste the image address into your email.

To refer to the full URL for the hosted image, use the “img src” HTML code:

<HTML>
<HEAD> <TITLE>Activity – Insert animated GIF to HTML</TITLE> </HEAD>
<BODY>
  <IMG SRC=”example.gif”>
</BODY>
</HTML>

Step 4. Test HTML email before sending it.

Verify your full HTML and text versions of an email beforehand. Check if the animated GIF works correctly in your test HTML message before you send the email drip campaign to your recipients.

And one more important point, do not overuse GIFs. Add one or two; otherwise, you will overload an email and spoil the whole user experience.  

Check out in detail how to send HTML emails in Snov.io.

Good luck with your HTML emails!

Was this helpful?

Thanks for your feedback!

Sorry about that 😢

How can we improve it?