HTML, GIF... and PHP countdowns!

This article was updated on 29/03/2025 to test caching in AppleMail and Gmail.

An Internet user with the pseudonym "Emile Email" pointed out that (rightly so) in April 2017, in commentary to the article on the creation of a fully responsive emailing templatethat he would have "enjoyed understanding how to make a countdown gif". So let's get down to business. It's going to be a bit technical!

There is already a post about "countdowns".. However, this one had been published from the Litmus communityand is not available in French. Let's take a quick look at the skills and technical points to be covered, and then get down to testing the solution...

So of course, you will find a few sites offering to generate these countdowns in a flash (https://motionmailapp.com/, https://www.sendtric.com/, https://countdownmail.com/). Some routing platforms or publishers may even offer to generate one directly from their platform! If that's what you're looking for, I'd like to say "all the better": you're free to skip this whole article... But that would be a pity! That's right, because we're offering you the chance to generate your own, with your own little hands and your own little keyboard! and above all assign the style you want to this countdown. As you can see, it's worth reading on...

What's the point of a GIF countdown timer?

That's right! Before committing yourself to this project, you need to understand its purpose. You're not going to do it just for fun and because it's trendy, no, no, no! A countdown timer attracts attention, it implies a certain notion of urgency and deadline, and finally, it allows to put forward an offer in a singular way. Whether it's a last minute offer, a webinar or event registration, it's a powerful marketing tool that encourages the user to take advantage of a particular offer

And what about support? According to Litmus, all email clients are fully supported, although it's worth bearing in mind that animated gifs don't work on Outlook mailboxes. BUT (don't go so fast) the first image of your animated gif will still be displayed on this environmentSo don't panic. The message remains clear and understandable, and the notion of a deadline is still very much present.

HTML, PHP, JS and GIF: a few technical notions

There are technologies other than PHP for creating countdowns. Here is an example of a countdown in Javascript. There are advantages and disadvantages to both technologies. PHP is probably simpler and faster to deploy, and more basic too. Javascript, on the other hand, is more complex, and offers more design possibilities, libraries and so on.

In this article, we'll focus on a countdown timer in PHP.

As mentioned above, a dynamic countdown requires a few technical conditions:

• Access to a server to host a php file (and thus a PHP support on this same server)
• A typeface if you want to use a particular typeface
• A database (optional, we'll see that later in the evolution of the thing)
• Software for editing or creating gifs (optional) and modify the HTML/PHP code (a VS Codium for example, the Open Source version of VS Code)

First of all, and as proposed in the Litmus community article, you can download the zip from this link with all the necessary files. Here you'll find a typography example, a gif.php file, a GIFEncoder.class.php file, a php52-fix.php file and an "images" folder. We offer you the same thing, but with a gif.php file with French comments.. The good news, is that there are two files that don't need to be touched : GIFEncoder.class.php and php52-fix.php. Of course, if you'd like to have a look at them, tinker with them or try to understand something about them, that's up to you. Just know that we won't go into the content of these files for the moment, since the countdown can be generated without having to worry about it.

Next comes the "images" folder: in this folder you'll find an image named "countdown.png". This image is only used here as an example. You can then modify it to achieve the desired look and feel.

Finally, the gif.php file remains: This is where it all comes into play. So, the solution that everyone likes to adopt to save time is a big copy/paste job, then I put it locally on my server and see if anything happens. But if that's all you do, you won't get anywhere... Take the time to read what we're going to detail below, as we're going to try and cover all the important points - it's only by understanding a few things that you'll get the results you want!

You can now open the gif.php file:

date_default_timezone_set If you're reading this article in French, you probably won't need to touch this variable. It's simply the time zone we're going to use for our countdown.

1TP3Picture This is the variable containing the path of the image you are going to modify. This variable and its path (normally always the same) are present three times in the PHP code. It's up to you to modify it accordingly if the path or image name changes.

size The size of the typeface you're going to use on the countdown text. This is a font-size in points in principle. Feel free to change this variable as you wish!

angle The rotation angle of the text. You can thus decide to assign a tilted text to the countdown (Why not? We've already seen customers ask us to create HTML snow on their sites, so let's not get carried away...).. Remember that the value of an angle must lie between 0 and 360.

x-offset This is the distance from the beginning of the text to the left border of the image. Feel free to modify it as you see fit.

y-offset Same as above, except that the position is vertical, not horizontal.

file the path or name of the typeface you wish to use on the text of the count.

color What is RGB format? Very good question: RGB stands for Red, Green, Blue, and is a computer color coding system. By additive synthesis of three primary colors (red, green and blue for those who have not done English LV1) computer screens can thus reconstitute a color close to the material. In other words, this format must contain three values. Any graphics editor should be able to provide you with such values from a hexadecimal code, but if not, here is a tool that might come in handy: https://htmlcolorcodes.com/fr/

Now that the main adjustments have been made, all that's left to do is generate and view the image in question. To do so, go to VOTRESERVEUR/countdown/gif.php?time=LA-DATE-DE FIN-QUITE-YOU-CHOISE. Or, more simply : https://127.0.0.1/Countdown/gif.php?time=2017-12-25+00:00:01 in the case of a local server, for example. In the example above, I've entered the following deadline: December 25, 2017 at 00:01. So, when we go to the page concerned, we'll see a countdown (as of October 10, 2017, 11:20 a.m.) of 75 days, 14 hours, 40 minutes and 16... 15... 13 seconds... Anyway, you get the idea, everything works properly!

And finally, quite simply, to display this counter in an email, all we need to do is enter this same url as the path of a <img>It couldn't be simpler. No need to add a format or extension like .jpg or .png, you'll get something like:

<img src="<https://127.0.0.1/Countdown/gif.php?time=2017-12-25+00:00:01>">

But it's up to you to see what you want to do with it, and how you can adapt, modulate, tweak and fiddle with it to get a convincing result!

Quality of countdown rendering in PHP

PHP isn't really designed to generate images. While reducing a countdown on a fixed-colour background is perfectly acceptable, rendering it on a transparent background is pretty poor.

For a long time, we hung around with a countdown timer that didn't quite work. Then one day, the solution so simple that we missed out on reminded us:

"It's the same problem as with the retina, isn't it? Just put in a 2x larger image and when you display it it will be of better quality, right? "

That's right! So for a countdown that's 300px wide, for example, we generate an image 600px wide. The rendering is then much higher quality.

Profit before / after

Industrializing a countdown timer

A retina email countdown with themes in an email builder? It's possible, and we'll soon be delivering one in LePatron email builder.

Features :

• 3 variants in 3 clicks.
• 3 mobile versions.
• Retina quality
• And a hybrid PHP countdown + background image + hard text.

And as a bonus :

• Columns that go online?
• Outlook fallback? Check.

The proof is in the video:

Going further: PHP and dynamic images

So that's it, we've seen the worst of it. But does that mean we should stop there? Not at all! In fact, we're just as interested in this subject as in the creation of an image. (png, gif or jpeg) in PHP to be able to manage more easily the modification of this image. This is not only an article about countdowns, but more widely about the use of images generated in php (you didn't expect that, did you?)

There's nothing to stop us seeing this countdown in a different light. Explanations: a countdown is not systematically equated with "time" or a stopwatch effect. It would be quite possible to consider a count of products in stock, to update in real time a rate, a percentage, a number of participants, etc.

In fact, if our PHP file takes into account a database variable, anything is possible! Bruno Florence already mentioned the subject in 2013 (that is to say if the man was ahead of his time!). But you'll need to think about all the technical and graphic aspects of your countdown! We've tested a little idea we had in the back of our minds: we have a certain number of products in stock, and we want to create an "emergency" on the reduced stock remaining of the same product...

Here is a little model made in a hurry to illustrate this thought:

Do you have an irresistible urge to manage the content of this e-mail directly in PHP and think of the number of products available as a countdown timer?

Well, it's perfectly feasible... In PHP, we'll create an image 600px wide by 600px high, give it a blue background color, a white variable color, and add three texts (one of which is dynamic, with the value of the remaining products in PHP, drawing directly from the database)We'll then create a small php loop to display the product image as many times as the value indicated in the database. Then we'll create a small loop in php to display the product image as many times as the value indicated in the database.

Rather than give you an exact breakdown of the properties we're going to use, here's a short direct link to the codeit'll be easier.

Do not limit yourself to this simple example, but keep in mind that many "projects" and evolutions are possible. It's up to you to use your imagination, and to propose us, why not, what you have managed to create since this (small) tutorial!

Countdown and accessibility

The EAA will be in place by June 2025. So a legitimate question is: Is an animated GIF countdown accessible? More or less. This will depend on the contrast of the countdown, and therefore its legibility for people with sight problems. For blind people, an alternative text on the call to action image will allow them to have the end date information thanks to a content reader; with for example: "Deadline December 25, 2017".

What about caching since iOS 15?

What is caching? It's simply the fact that an image is stored somewhere and displayed from there, rather than systematically calling up the original image.

Problem In the case of a countdown timer or any other dynamic system, if the image is cached, the "dynamic" aspect may disappear, since it's no longer the original image that's called up, but a copy made by the email client.

That's why it's important to know in which environments caching takes place and what impact it has.

We have tested a number of e-mail clients for dynamic imagesand our tests have shown that only AppleMail offers a lower local caching and has an impact (tested on IOS 18, MacOS 12 and MacOS 14). In reality, caching is also done by other email clients, such as Gmail, but this had no impact on our countdown tests. It may, however, have an impact on your opening pixel, for example! Please note that we tested the impact of caching on dynamic images only.

Explanations:

When sending an e-mail with a countdown timer, for example, the URL accessing the countdown timer contains a number of parameters, the main one being the countdown timer's end date. Then, the URL called, which is a PHP file, sends as a response an animated GIF with a countdown lasting 1 minute from the moment the image is called up to the end date passed as a parameter. We don't generate a GIF that takes the full remaining time, as that would be far too heavy. In reality, the GIF generated only loops over one minute, which is more than enough in most cases. The problem is thatAppleMail saves this GIF when the email is opened. And so a user who opens his email a second time two hours later will have the same GIF as when it was first openedAppleMail won't call PHP again, so the countdown won't be updated.

For example:

• You send an email at the start of the day, with a countdown to midnight.
• You open the email on Gmail and AppleMail at 10 a.m. -> You have a countdown on which there are still 14 hours to go.
• You open the email a second time at 3pm -> On Gmail, the remaining time will be 9 hours, on AppleMail, the remaining time will be 14 hours, because the GIF of your first opening is saved.

It's therefore important to keep this behavior in mind when using a dynamic image. For a countdown timer, this behavior is indeed problematic. It will be the same if you have a dynamic image that is intended to evolve over time (a weather forecast, for example). On the other hand, if you're generating an image on the fly that is not destined to evolve over time (an image with your target's first name, for example), then this behavior poses no problem.