Why Using Retina Images for Email Is Crucial for Marketing Success

While subject lines, copy, and cadence all play an important part in creating an effective marketing email, the quality of your images as a marketer cannot be overlooked.

If you want your subscribers to look forward to your emails, you need visuals that people admire. After all, when you open an email, your eyes always jump to the visuals before they go back to the copy and call-to-action.

Moreover, if high-DPI displays are not accounted for (in other words, if you’re not using retina images for email), you risk of looking careless to subscribers. Because of the way high-DPI displays work, non-optimized images end up looking blurry and pixelated on retina screens (see the example above).

Using retina images for email

How exactly are images optimized for retina screens?—The answer is quite simple.

Roughly speaking, high-DPI displays have twice as many pixels per inch than their traditional counterparts.

Therefore, for the images to look good on those screens, they need to be twice as large so that when they are scaled down in the email. Doing so ensures there are more pixels for retina screens to display.

For example, if the emails are designed and coded at 600 pixels wide, the images will need to be 1200 pixels wide in order to display properly for retina display. For non-responsive email code, the height and width of the image will remain the same, in order to still restrict the email to stay 600 pixels wide. If the code is responsive, a max-width of 600 would need to be applied to the image styling in order to constrain Outlook.

Additional items for consideration

As the dimensions of the image are increased, the file increases in size as well.

That increased file size can cut into subscriber’s data, causing an email to load slowly. So, keep in mind that not every campaign or image within the campaign needs to be retina.

Prioritize what images are going to be retina versus non-retina. Any images that include text or small product/image detail should always be chosen as retina first. Small divider images and spacer images can always be non-retina.

If retina images are needed, there are two techniques to help avoid large files.

1. Use compressive images—images saved at huge dimensions, but very low quality settings.

To create a compressive image, design the image at something around 4X the intended size and save it at an extremely low quality setting. While the image looks terrible when viewed at full-size, after it is scaled down to its intended size in an email, the artifacts shrink down and go unnoticed. The low quality settings ensure that your file size is kept to a minimum.

2. Use a dedicated program to further compress the images after saving them.

Applications exist for every operating system that allow you to process and compress images after they are created (ImageOptim, JPEGmini, TinyPNG, Compressor.io, etc.).

Need help using retina images for your next email campaign?

If you want to avoid slow load times, decrease file sizes, but still deliver high-quality images through email, talk to the experts at Zeta or learn more about the Zeta Marketing Platform.