Si vous avez déjà implémenté un petit script d’upload d’images en PHP vous avez peut être remarqué que l’image ne se met pas à jour lorsque incluse dans une page HTML. Cela est du tout simplement au mécanisme de caching que comporte la majorité des navigateurs web. L’astuce suivante vous permettra de forcer l’affichage de manière sélective sans modifier les headers.

Pour comprendre l’astuce il est bon de savoir comment le cache d’un navigateur fonctionne. L’idée est de télécharger du contenu statique et de le stocker en local pour les rendus successifs. L’avantage est un gain apparent en vitesse avec cet inconvénient qu’une image ne semble pas se « rafraîchir » comme déjà constaté. Le contenu est référé selon les adresses et nom de fichiers et c’est ce détail précis que l’on va exploiter.

Voici donc du simple code PHP pour afficher une image:

echo "<img src='http://www.domaine.com/images/mon_image.jpg' />";

L’image ne changeant pas lors des affichages successifs (F5) on ajoute donc un petit quelque chose à l’adresse indiqué dans l’attribut source:

PHP:
echo "<img src='http://www.domaine.com/images/mon_image.jpg?rand=". rand() ."' />";

Smarty:
<img src="http://www.domaine.com/images/mon_image.jpg?rand={/literal}{math equation='rand()'}{literal}" />

Le paramètre GET ici n’interfère en rien avec le rendu et c’est bien mon_image.jpg qui est récupéré. Toutefois, la fonction rand est utilisé ici pour générer un code unique qui va forcer un nouveau téléchargement à chaque chargement de page. Pour être certain que le code est unique vous pouvez utilisé la fonction uniqid() à la place ou l’équivalent du UUID si vous utilisez un autre langage que le PHP.

Il reste à voir quel effet cela engendre côté client. Il est possible que cela génère plusieurs copies d’image remplissant le cache plus rapidement mais la possibilité d’appliquer cela de manière selective reste intéressante. Donc, à vous de peser le pour et le contre.

Si vous avez d’autres solutions ajoutez un commentaire à cet article.

– James Poulson.