It’s been a few months since our blog post on the state of background images in email and we wanted to delve into the subject again, focusing especially on Outlook.
With the rise of background images being used in emails we’ve found cooler ways to implement them into our emails, including the use of animated gifs, as you can see in the example below –
The animated gif works perfectly in the example, giving the hero image area a little touch of magic and helping to make the whole email more appealing to the reader. Unfortunately some email clients (and by some email clients we basically mean Outlook) will not render animated gifs and therefore will only display the first frame of the gif. This can ruin the look of the email, as the first frame of your animated gif may not be the optimal frame for the whole design.
Fortunately there is a workaround for this issue, involving the use of the mso background code we previously used and a static image of the gif. This won’t make your animated gif work but it will improve the look of your email in Outlook.
The first step is to select a static image you want to use instead of the animated gif. Once you got the image you want and have an image path for it you need to add it to this section of the mso coding –
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="tile" src="http://i.imgur.com/XgYIu4E.jpg" color="#ffffff" />
This will change the image that Outlook uses for your background image to the static one you’ve selected instead of the animated gif. It’s a small change but it makes a big difference as you can see with the example below –
|Outlook with new static image||Outlook with animated GIF|
We’re constantly finding little workarounds and techniques to improve our emails and we hope that by sharing this we can help to push both your emails and all emails forward into the future. Tune in for more…