• Email DIY

Growth Email Hacks: Dynamic Images In Emails

Mailgun Team
5 min read
featured

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:

  • 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

DELIVERABILITY SERVICES

Learn about our Deliverability Services

Looking to send a high volume of emails? Our email experts can supercharge your email performance. See how we've helped companies like Lyft, Shopify, Github increase their email delivery rates to an average of 97%.

Learn More

Last updated on August 28, 2020

  • Related posts
  • Recent posts
  • Top posts
View all

Always be in the know and grab free email resources!

No spam, ever. Only musings and writings from the Mailgun team.

By sending this form, I agree that Mailgun may contact me and process my data in accordance with its Privacy Policy.

sign up
It's easy to get started. And it's free.
See what you can accomplish with the world's best email delivery platform.
Sign up for Free