APNGやGIFアニメがブラウザで繰り返し再生されない場合の対処法

PHP

APNGやGIFアニメファイルをブラウザに表示させたときに、一度再生が終わってしまうとページをリロードしても繰り返し動いてくれないときがあります
これはWEBブラウザがキャッシュを利用してしまっているために再読み込みしても再生が終わった時点の画像を表示してしまうのが原因です

※GoogleChromeやInternetExplorerはAPNG形式のファイルはサポートされていませんのでそもそも動きません。。。

20161018_anime
画像自体に2回のループを入れていますが、再生が終わるとリロードしても繰り返されません

解決するには画像ファイルをキャッシュさせないことになりますが、WEBサーバ側でやってしまうと設定によっては対象のの画像ファイル拡張子(pngなど)全てがキャッシュされないようになり、それはそれで画像ファイルが毎回呼び出されるのでサーバ側の負荷があがってしまいます

そこで、対象の拡張子を全てキャッシュさせないのではなくて、対象の画像ファイルをキャッシュさせないようにします

一番簡単なのは、ページを読み込み直しされる度に拡張子の後ろにランダムな文字列をつけてあげることです
例)
hoge.png?123456

拡張子の後にクエスチョンマークを付けます。
リロードのたびに後ろの文字列を変更することでブラウザは同じファイルだと判断できなくなりますので読み込み直しが発生し、新規のファイルとして認識することでアニメーションが再生されるという方法です

後ろにつける文字列はどうするかってことですが、タイムスタンプを算出してつけてしまうのがユニーク値にもなりやすく手っ取り早いです

[PHP]の場合

[JavaScript]の場合

これを画像の埋め込みファイル名にセットすれば毎回違うファイルと認識されるのでキャッシュに左右されなくなります