Comptes à rebours HTML, GIF… et PHP !

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

Table des matières:

• Quelle est l’utilité d’un compte à rebours au format GIF ?
• HTML, PHP, JS et GIF: quelques notions techniques
• Quality of countdown rendering in PHP
• Aller plus loin: PHP et images dynamiques
• Countdown and accessibility
• What about caching?

Un internaute au pseudo « Emile Email » nous faisait remarquer (rightly so) in April 2017, in commentary to the article on the creation of a fully responsive emailing templatethat he would have « apprécié comprendre comment faire un compte à rebours en gif ». Nous allons donc aborder ce point. Accrochez-vous ça va être un chouïa technique !

Il existe déjà un post concernant les « countdowns ». However, this one had been published from the Litmus community, et n’est pas disponible dans la langue de Molière. Faisons un petit récapitulatif des compétences et points techniques à aborder, et rentrer un peu plus dans le test de la 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/). Quelques plateformes de routage ou éditeurs vous proposeront peut-être même d’en générer un directement depuis leur plateforme ! Si vous y trouvez votre compte, j’ai envie de dire « tant mieux » : vous pouvez passer votre chemin et ne pas lire l’intégralité de cet article… Mais ça serait dommage ! Et oui, parce que nous vous proposons de générer le vôtre vous-même, avec vos petites mains et votre petit clavier ! et surtout assign the style you want to this countdown. Vous voyez bien que ça vaut le coup de continuer à lire…

Quelle est l’utilité d’un compte à rebours au format GIF ?

Eh oui ! Avant de s’engager dans ce chantier, il faut bien comprendre et en discerner l’utilité. On ne vas pas faire ça juste pour le plaisir et parce que c’est tendance, non non non ! Un compte à rebours, ça attire l’attention, ça induit une certaine notion d’urgence, de délai, et finalement, 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

Et le support me direz-vous ? Selon Litmus, le support serait total sur l’ensemble des clients emails, même s’il faut bien garder à l’esprit que les gifs animés ne fonctionnent pas sur sur les messageries Outlook. MAIS (ne partez pas si vite) the first image of your animated gif will still be displayed on this environment, donc, pas de panique. Le message reste clair et compréhensible, et la notion de délai reste bien présente.

HTML, PHP, JS et GIF: quelques notions techniques

Il existe d’autres technologies que le PHP pour créer des comptes à rebours. Voici un exemple de compte à rebours en Javascript. Il y a des avantages et des inconvénients aux deux technologies. Le PHP est probablement plus simple et rapide à déployer, et plus basique aussi. Le Javascript est plus complexe, et propose en contrepartie plus de possibilités de design, de libraires, etc.

Dans cet article, nous allons nous concentrer sur une gestion du compte à rebours en PHP.

Comme annoncé ci-dessus, un compte à rebours dynamique va demander de réunir quelques conditions techniques :

• 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)
• Les logiciels vous permettant de modifier ou créer des gifs (facultatif) et de modifier le code HTML/PHP (un VS Codium par exemple, la version Open Source de 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. Vous y trouverez donc un exemple de typographie, un fichier gif.php, un fichier GIFEncoder.class.php, un fichier php52-fix.php, ainsi qu’un dossier « images ». Nous vous proposons la même chose mais avec un fichier gif.php commenté en français. La bonne nouvelle, c’est qu’il y a deux fichiers auxquels il n’y aura pas besoin de toucher : GIFEncoder.class.php and php52-fix.php. Evidemment, si vous souhaitez y jeter un œil, y bidouiller ou tenter d’en comprendre quelque chose, libre à vous. Sachez juste que nous n’aborderons pas le contenu de ces fichiers pour le moment, puisque le compte à rebours peut être généré sans avoir à s’en soucier.

Vient ensuite le dossier « images » : dans ce dossier, vous trouverez une image nommée « countdown.png ». Cette image n’est ici utilisée qu’à titre d’exemple. Vous pourrez par la suite la modifier pour obtenir le graphisme et le rendu souhaité.

Finally, the gif.php file remains: This is where it all comes into play. Alors, la solution que tout le monde aime adopter pour gagner du temps, c’est un gros copier/coller qui tâche, hop je mets ça en local sur mon serveur et je regarde si il se passe quelque chose. Autant vous dire que si vous vous limitez à ça, vous n’arriverez pas à grand-chose… Prenez bien le temps de lire ce que nous allons détailler ci-dessous, nous allons essayer d’aborder tous les points importants c’est en comprenant un minimum les choses que l’on arrive au résultat souhaité !

You can now open the gif.php file:

date_default_timezone_set : Si vous lisez cet article en français, vous n’aurez sans doute pas besoin de toucher à cette variable. Il s’agit là tout simplement du fuseau horaire que nous allons utiliser pour notre décompte.

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) sont présents trois fois dans le code PHP. À vous de le modifier en conséquence si le chemin ou le nom de l’image venait à changer.

size : La taille de la typo que vous allez mettre en place sur le texte du décompte. Il s’agit ici d’une font-size en points en principe. 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 (pourquoi pas, on a déjà vu des clients demander de créer de la neige en HTML sur leur site, alors ne sommes plus à ça près…). N’oubliez pas que la valeur d’un angle se situe obligatoirement entre 0 et 360.

x-offset : Il s’agit de la distance à laquelle le début du texte se situe par rapport à la bordure gauche de l’image. une valeur en pixels est attendue. N’hésitez pas à la modifier à votre convenance.

y-offset : idem que le point du dessus, sauf qu’il s’agit de la position verticale et non horizontale.

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

color : la couleur de votre texte à renseigner ici au format RGB ; Qu’est-ce que le format RGB ? Très bonne question : RGB pour Red, Green, Blue, est un système de codage informatique des couleurs. Par synthèse additive de trois couleurs primaires (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/

Maintenant que les principaux ajustements sont faits, il ne vous reste plus qu’à générer et consulter l’image en question. Pour se faire, vous pourrez vous rendre à VOTRESERVEUR/countdown/gif.php?time=LA-DATE-DE FIN-QUE-VOUS-AUREZ-CHOISIE. Ou, plus simplement : https://127.0.0.1/Countdown/gif.php?time=2017-12-25+00:00:01 en cas d’un serveur local par exemple. Sur l’exemple que je viens de citer, j’ai renseigné la date butoir suivante : le 25 décembre 2017 à 00h01. Ainsi, lorsque nous nous rendons sur la page concernée, nous aurons bien un décompte (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!

Et finalement, tout simplement, pour pouvoir afficher ce compteur au sein d’un email, il nous suffira de renseigner cette même url comme chemin d’une balise <img>, rien de plus simple. Pas besoin d’ajouter un format ou une extension type .jpg ou .png, vous aurez quelque chose comme:

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

Bon ok, graphiquement pour le moment, c’est moche… Mais à vous de voir ce que vous voulez en faire, et comment l’adapter, le moduler, le bidouiller, y trifouiller pour en obtenir un résultat probant !

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.

Nous avons longtemps traîné un compte à rebours dont le rendu laissait à désirer. Et puis un jour, la 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

Aller plus loin: PHP et images dynamiques

Alors voilà, on a vu le plus gros. Mais est-ce que pour autant il faut s’arrêter là ? Pas du tout ! En fait, ce qui nous intéresse tout autant dans ce sujet, c’est aussi la création d’une 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?)

Rien ne nous empêche de voir ce compte à rebours autrement. Explications : un compte à rebours n’est pas systématiquement assimilé à un « temps » ou à un effet de chronomètre. 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.

En effet, si notre fichier PHP prend en compte une variable en base de données, tout peut-être envisageable ! Bruno Florence already mentioned the subject in 2013 (that is to say if the man was ahead of his time!). Reste que vous devrez alors penser à tous les aspects techniques et graphiques de votre compte à rebours ! Nous avons nous-même testé une petite idée que nous avions derrière la tête : nous avons un certain nombre de produits en stock, et nous voulons créer une « urgence » sur le stock réduit restant de ce même produit…

Voici ici une petite maquette réalisée à la va-vite pour vous illustrer cette pensée :

Vous avez une irrésistible envie de gérer le contenu de ce mail directement en PHP et de penser le nombre de produits disponibles comme un compte à rebours ?

Et bien, c’est tout à fait faisable… En PHP, nous allons créer une image de 600px de large sur 600px de haut, lui attribuer une couleur de fond bleu, une variable de couleur blanche, et nous allons ajouter trois textes (dont un dynamique, avec la valeur des produits restants en PHP et piochant directement dans la base de données), que nous allons placer conformément à la maquette. Puis nous allons créer une petite boucle en php pour afficher autant de fois l’image du produit que la valeur indiquée en base de données.

Plutôt que de vous faire un détail exact des propriétés que nous allons utiliser, voici un petit accès direct au code, ça sera plus simple.

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. Donc une question légitime est: Un compte à rebours e GIF animé, c’est accessible? Plus ou moins. Cela va dépendre du contraste du compte à rebours, et donc de sa lisibilité pour les personnes avec des problèmes de vue. Pour les personnes aveugles, un texte alternatif sur l’appel à l’image leur permettra d’avoir l’information de la date de fin grâce à un lecteur de contenu ; avec par exemple: “Date limite au 25 décembre 2017”.

Et la mise en cache depuis iOS 15 dans tout ça?

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.
• Vous ouvrez l’email sur Gmail et AppleMail à 10h du matin —> Vous avez un compte à rebours sur lequel il reste encore 14h
• Vous ouvrez une seconde fois l’email à 15h —> Sur Gmail le temps restant sera de 9h, sur AppleMail le temps restant sera de 14h car il vous ressort le GIF de votre première ouverture qu’il a enregistré.

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.