Optimizing Email Graphics: Formats for Maximum Deliverability and Engagement

When designing email campaigns, you want to create something that is visually appealing and promotes engagement with your call to action. Graphic image files can play a crucial role. They enhance the aesthetics, help convey your message most effectively, and promote your brand. However, email coding is its own animal, different from websites or apps, and not all graphic files are created equal. There is another important goal for your email campaign, deliverability, and the improper use of graphics may cause issues. Understanding the different graphic formats and best practices of use is essential for successful email construction and deployment.

The most common graphic formats used in email coding are:

• JPEG (Joint Photographic Experts Group): This format is the most commonly used in emails. Jpegs support millions of colors, which makes it the best choice for photographic images. The file structure uses lossy compression, at an impressive approximate 10:1 ratio of memory usage (a 10 meg file will become a 1 meg file). However, this is accomplished by selectively discarding bits of data resulting in a loss of quality and possible artifacting. These files are the lowest memory load per creative real estate to use in your emails. They won’t display sharp graphics or text as well as other formats. You can control the level of compression when you export them, and can experiment to find the best balance of quality and memory size.

• PNG (Portable Network Graphics): Unlike jpegs, pngs have lossless compression, which preserves the quality of the image, but produces a larger file size. The big thing about this format is that it supports transparency, while also displaying sharper graphics and text better. Pngs are great for smaller graphics that need more sharpness such as logos, icons, and text. There are two types of pngs; PNG-8 and PNG-24. PNG-8 supports up to 256 colors, and is best used for logos and simple graphics. PNG-24 will support millions of colors and can be used for mixed photographic and sharp, or text images where you want that better quality. However, you will need to keep an eye on image memory size.

• GIF (Graphics Interchange Format): This format is bitmap based with up to 256 colors, and supports animation and transparency. The animation aspect is what is most used in emails with the ability to create eye-catching moving graphics. However, it is important to consider that some email display programs will not render the animation and will, instead, show a static photo of the first frame. Keep this in mind when constructing your GIF file.

Beyond the choice of file format, there are some best practices you can follow to ensure your email graphics are displayed correctly and look great too.

Optimize images: Most email marketing templates are 600 pixels or 650 pixels wide. Use image editing software to optimize your images for the web, reducing file size without compromising quality. Standard is 72 dots per inch (dpi) and try for less than 300k memory usage for each image. This helps improve email load times and reduces the risk of your email being flagged as spam. 

Include Alt Text: Make sure to add alt text (alternative text) into your email image tag coding for accessibility to those using screen readers. Alt text is a short message describing the graphic image and any other important information you want the email recipient to know. This feature is vital to those who are visually impaired or have shut off images in their email client. If images do not load in, the alt text will still read, or display your information.

Test Emails: Use an email testing service to preview how your images display across multiple devices and email clients. Check your email tests on as many different devices you can to observe size, load time, and quality.

Graphic formats that cannot, or should not, be used in emails due to limited or no support in email clients.

• SVG (Scalable Vector Graphics): Vector graphic files that stay sharp and have low memory. SVGs can technically be used in your email build, however, they are placed in this list because of email client support issues at the time this is written. They are only supported in IOS or Apple Mail. 
• EPS (Encapsulated PostScript): This file format is used for high quality printing.
• PSD (Photoshop Document) These are the native files for Adobe Photoshop. They are also used in printing applications.
• Tiff (Tag Image File Format): A preferred format to store high quality photo images before any processing or compression with corresponding high memory usage, too high for emails.
• PDF (Portable Document Format): This format is an open standard way to present and exchange documents. A wide array of programs will export into PDF format, which, according to the export settings, are used both for display and printing purposes.
• MP4 (MPEG-4): This is a digital multimedia container format most commonly used for video and audio. It can be played or streamed on a web platform and TV. These cannot be incorporated into an email, the email will need to use a different display to represent the video and link to where video can play.

Understanding the different graphic formats, knowing which ones to use and which ones to avoid, and following best practices are essential for effective email coding. By incorporating these tips into your email design process, you can create visually appealing and engaging emails while optimizing your deliverability chances.