こんにちは

佐藤です。

 

 

 

 

webでアニメーションを再生する場合、手頃なのが画像で挿入する方法でしょう。

その時に選択肢として入りそうな

「GIF」、「APNG」、「webP」

なんてものがあります。

 

 

今日はこのあたりを使ってアニメーションを実装する際のお話しをしていこうと思います。

 

 

まず「GIF」についてですが

256色しか再現できなかったり、フレームレート数が限られたりします。

わかりやすく言うと「フチが変にガサガサ」になったり「カクカク」になったりする場合があります。

そのため最近ではあまり使われず

「APNG」、「webP」

もしくはjavascriptで制御できるsvgやcanvasといったものがよく使用されます。

 

「APNG」や「webP」を使用した場合、

上記のGIFと違い、キレイなアニメーションを実現できる場合がほとんどです。

その代わり一部対応しないブラウザがあったりするので少し注意が必要です。

例）

webP・・・safari（pc）非対応、IE非対応

APNG・・・IE非対応

 

とは言ってもこれらは全て「picture」タグを使用することができるのでこの様な記述で賄うことが可能ではあります。。。

<picture>
  <source type="image/webp" srcset="xxxxx.webp">
  <source type="image/apng" srcset="xxxxx.png">
  <img src="xxxxx.gif" alt="">
</picture>

 

 

「これで完璧！！」

 

と言ってしまいたいところなのですが、

 

実はいくつか注意点があるので解説していきます。

 

 

 

まずAPNGについて

実はこのAPNGですがsafari(pc)だと致命的なバグが存在しており、

1loopの設定、つまり「一度のみアニメーション」させる設定にすると二回アニメーションが実行されます。

 

無論バグがあろうと

safari「APNG僕使えるよ！！」

 

っと、容赦なくAPNGを読み込んでしまうので使用する場合は何かしらの対策が必須となります。

ちなみに僕の確認した限りiphoneではこのバグは発生しませんでした。

 

 

次にwebPですが

つい最近までは特に注意する項目はなかったんです。。。

そう、つい最近までは、、、

 

何があったかというと9/17に日本人の使用率の高いスマホ

「iPhone」

のOSが

「ios14」にアップグレードされました。

 

これにより新しくiosのブラウザが

「webP」に対応しました。

 

普通に考えればとても良いことなのですが、

アニメーションを実装したwebPの場合はバグが発生し

「真白」な画像になる場合があります。

※要検証

 

 

もちろんこれも

ios14「あ、僕対応したのでwebP行けます！」

と容赦なく読み込まれるので何かしらの対策が必要になってきます。

 

 

 

 

この様にAPNGやwebPを使ったとしてもバグが発生する場合もあるので

現段階ではしっかりと対策することが大切ですね。