Growth email hacks: Dynamic images in emails

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.

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.

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

                            

                                <?php
header('Content-type: image/png');
header('Cache-Control: no-cache, max-age=0');

$png_image = imagecreate(350, 150);
imagecolorallocate($png_image, 15, 142, 210);
$black = imagecolorallocate($png_image, 0, 0, 0);
$text = time();
imagestring($png_image, 5, 0, 0, $text, $black);
imagepng($png_image);
imagedestroy($png_image);
?>
                            
                        

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

                            

                                <?php
header( "Content-type: image/png" );
header('Cache-Control: no-cache, max-age=0');

$imageOutput = imagecreate( 400, 180 );
$background = imagecolorallocate( $imageOutput, 0, 125, 255 );
$textColor = imagecolorallocate( $imageOutput, 255, 255, 255 );
$line_colour = imagecolorallocate( $imageOutput, 128, 255, 0 );
imagestring( $imageOutput, 4, 30, 25, "Lucky Tweet:", $textColor );
imagestring( $imageOutput, 4, 35, 55, "Tweet text goes here", $textColor );
imagesetthickness ( $imageOutput, 3 );
imageline( $imageOutput, 30, 45, 165, 45, $line_colour );
imagepng( $imageOutput );
imagecolordeallocate( $line_color );
imagecolordeallocate( $textColor);
imagecolordeallocate( $background );
imagedestroy( $imageOutput );
?>
                            
                        

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:

• Show queue position and status in support tickets

Let us know how you’re going to leverage dynamic images to your advantage.

Mail you later, Orlando

Author: The Sinch Mailgun team The Sinch Mailgun team shares news, best practices, and strategies to take your products and apps to the next level using email. Subscribe to our newsletter to get all the articles in your inbox!