Growth Email Hacks: Dynamic Images In Emails

Mailgun Team

• 5 min read

.blogPostTemplate__StyledFeaturedImage-sc-1snfvq4-9.erzTDN.gbi--579008481-14:before { opacity: 1; background-image: url('//images.ctfassets.net/oqcgx0hzeqgm/3OPdZ6dvFI6YHqnec4AHrR/7ccb39c08836aba676dbd27c34ad6762/blog_post_default_image.jpg?w=800&q=50'); }

The best way to engage with your audience is to provide interesting and helpful content relevant to them. A highly tailored transactional email is a great avenue to obtain engagement success with your audience.

In this post, we’re going to look at how we can create dynamic elements in email to achieve just that.

If you are active in your social channels like Twitter and want to socialize your tweets beyond Twitter, why not include them in your newsletter or email digest to your audience? This could help you with open and click rates, improving your overall engagement rates.

How

If you’ve worked with emails before, you might be asking how it’s possible to alter the content of an email after it has been sent to a recipient. Or rather take advantage of inline attached images.

Email clients are instructed to fetch images from the given URL. Although some newer clients might cache the image, we can tell through specific HTTP headers to the proxy server to not cache the image.

Requirements

We’re going to leverage the power of Mailgun through its PHP library. To do this, we will use PHP with the GD extension. For those of you who are not aware of the GD extension for PHP I suggest you read the guide on the official PHP site

A database of pre-approved tweets
PHP (With the GD extension)
PHP Mailgun Library

First Example:


1<?php
2header('Content-type: image/png');
3header('Cache-Control: no-cache, max-age=0');
4
5$png_image = imagecreate(350, 150);
6imagecolorallocate($png_image, 15, 142, 210);
7$black = imagecolorallocate($png_image, 0, 0, 0);
8$text = time();
9imagestring($png_image, 5, 0, 0, $text, $black);
10imagepng($png_image);
11imagedestroy($png_image);
12?>

Save the above to a file let’s say dynamicImage.php, place it in a public folder within your web server and then email someone (or yourself as a test):

You need to compose an HTML email with the image’s source specified as the public address to reach the dynamicImage.phpscript. Something like <img src="http://domain.com/script/img/dynamicImage.php" > in the HTML body of the email should suffice to demonstrate the use-case..

Second example

Here we display through an image a random tweet from the list of approved tweets


1<?php
2header( "Content-type: image/png" );
3header('Cache-Control: no-cache, max-age=0');
4
5$imageOutput = imagecreate( 400, 180 );
6$background = imagecolorallocate( $imageOutput, 0, 125, 255 );
7$textColor = imagecolorallocate( $imageOutput, 255, 255, 255 );
8$line_colour = imagecolorallocate( $imageOutput, 128, 255, 0 );
9imagestring( $imageOutput, 4, 30, 25, "Lucky Tweet:", $textColor );
10imagestring( $imageOutput, 4, 35, 55, "Tweet text goes here", $textColor );
11imagesetthickness ( $imageOutput, 3 );
12imageline( $imageOutput, 30, 45, 165, 45, $line_colour );
13imagepng( $imageOutput );
14imagecolordeallocate( $line_color );
15imagecolordeallocate( $textColor);
16imagecolordeallocate( $background );
17imagedestroy( $imageOutput );
18?>

Thoughts

As with every HTML email, remember to include a plain text fallback as this is always good practice.

This is a cool, simple trick to increase engagement and you can build on top of what you’ve learned in this article in hundreds of different scenarios like:

Show different offers depending on geolocalization of the user opening the email.
Display different content depending on the time the user opens the email
Is it raining? Is it sunny? As the user opens the email instantaneously customize the feel of the email with weather-aware images
Countdowns don’t have to suck anymore!

And probably my favorite idea: