Growth Email Hacks: Dynamic Images in Emails

Written by Orlando Kalossakas

Categories: Email DIY

2 minute read time

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:
<?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 );
?>

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:

  • 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

Modified on: November 20, 2018

Stay up-to-date with our blog & new email resources

We'll let you know when we add new email resources and blog posts. We promise not to spam you.