My top 4 tips for image usage in email

Bigger isn’t better when it comes to email. Heavy graphics contribute to slow load times, increased bandwidth costs and a less than satisfying user experience. That’s why optimizing the images you place in your marketing email is an important piece of the creative puzzle.

With that being said, here are my top 4 tips for image usage in HTML email:

File format
JPG’s are best for larger graphics that consist primarily of images, such as a masthead photograph. GIF’s are perfect for smaller items which contain less colour complexity and/or text – graphical buttons, for example.

1. Check out your template before you cut your images and figure out which file formats are better based on the rule above.


2. Avoid saving anything in a format other than JPG or GIF. Though you might be tempted to save an image as a PNG for the sake of maintaining opacity percentages – it’s not a good idea. They work, but your file size will be huge. Instead, try to find a workaround or a different way to lay out the design.

Reduce the size of large images even further
Split up graphical items when possible. Say, for example, you have a masthead that is 600px wide. 400px of that masthead is just an image, and 200px is a flat colour background with stylized text on top of it. If you save the entire 600px image as one JPG you will not only end up with a larger file size than needed, but your stylized text will appear degraded and blurry.

On the other hand, saving the entire masthead as a GIF will increase file size exponentially and will only allow the image portion to display 256 colours max.

Your best bet would be to cut the image into two sections; GIF for the portion with text and JPG for the rest. This will significantly reduce the bandwidth required – and it bears remembering that a bandwith drop of just 2-3kb can equal a considerable savings when you’re sending to a list of 100,000+ subscribers.

Saving images in Adobe Photoshop
To start with, you’re better off using Adobe Image Ready when it’s time to save your final images for production. In either Photoshop or Image Ready, be sure to use the "save for web" feature. The tweaks available in that save format allow you to really cut down the file size and play with quality/colour palettes in much finer detail than just your average Save As dialogue box. If you work with other graphic programs, you can explore their options for prepping images for web.

Quality vs. Quantity in a JPG and a GIF
Feel free to run down the quality of JPGs that are nothing more than an image (eg, no text overlay). You might think you need the best possible quality on that beautiful image but, in fact, the difference between saving a JPG at 80% quality in Photoshop as opposed to 40% is usually negligible. Tinker with it to see how low you can bring down the percentage before the image becomes distorted. A jump from 80 to 40 may only have minimal visual impact but can save you a lot in the file size department.

My number one piece of advice for when you sit down to turn a beautiful design into a functioning, low file size email?
Take a step back and figure out what needs to be an image and what doesn’t. Often using simple HTML and inline CSS can replace the need for an image. Consider this... You have a header that consists of nothing more than a 300px x 200px brown background with white, Arial text on top.

You have two options:

1. Save the header as an image. Following rule number one, you’ll be saving it as a GIF to ensure text quality. This will cost you 1-3kb in file size. It will also mean that, with images turned off, that header will be unreadable by default in most of the email/webmail clients on the market today. Ouch.


2. Use HTML and inline CSS to ‘recreate’ the brown background and white text on top. You may not get Anti-aliasing, or an exact font match, but you will save on file size and get your message across even with images-off and, in most cases, that’s more important.