Email code is imperfect. Sometimes we have to choose what things are supported in which email clients. The good news is, these days are large amount of the audience is in a few email clients (iPhone, Android, Gmail App, Gmail web). The secondary tier includes Outlook.com and Yahoo! Mail (and their apps), and Office (installed) versions of Outlook. Your mileage may vary, so it’s worth getting the analytics for your specific audience from your platform, or from a tool like Litmus.
When preparing images, you should run them through Photoshop or similar to make them the right size for digital. You can use tools to compress images — make the file size smaller — you can go quite far with these before you lose significant quality.
Generally images in email are somewhere between 200-700 pixels wide — no one will thank you for sending images that are 1000s of pixels wide, and you might cause yourself some technical issues.
You want to aim for less than 100kb size if you can. Animated GIFS, if you’re not careful, can run into megabytes. They’ll take longer to download and can use up mobile data allowances. As a very rough guide, treat 4-500kb as the maximum combined weight of all your images.
Background images don’t work everywhere (most notably Microsoft Outlook 2007, 10, 13 and 16 for the PC). There are ways to code support for these email clients, but it’s messy.
You can use CSS3 to control how backgrounds work (for example, no repeat, align to the center, resize for the space available) but this code isn’t supported everywhere. As a base line, expect background images to tile from the top left, because in some email clients, that’s all we can get them to do.
One benefit of Taxi for Email is we help you update the complex Outlook background image code, without needing to get in the weeds in the HTML. If you’re a HTML developer, here is a snippet showing how you can achieve that using Taxi Syntax.
Animated GIFs don’t work in the same versions of Outlook. You might pronounce it Jif. Those don’t work either. It’ll show the first frame and pause on that. There aren’t any cheat codes for this, sorry.