重すぎるGIFアニメーション-2018.12.121,575viewsこんにちは、フロントエンドエンジニア坂本です。今回は、いにしえのインターネットの演出を支え、今なお根強い支持を得ているGIFアニメーションについてお話させてください。個人的には、簡単にブラウザで動く演出を作ることができたり、いろんな人がいろんなGIFアニメーションを作ったりしていて、コンテンツとしてGIFアニメがすごく好きなんです。この子かなり癖が強い...。いうことで、そんな癖の強いGIFアニメーションとうまく付き合っていくための話をします。GIFアニメーションを仕事の制作物として使用したいと考え始めている方に読んでいただきたいです。概要まず、GIFというのはPNGとかJPEGみたいな画像の形式のこと。GIFアニメーションはその名の通り、GIF形式の画像でアニメーションするやつ。「マルチイメージ」を使ったアニメーション。導入された機能で、複数のフレームを順に表示できる。待ち時間が指定できるようになった。2018年4月25日)略称してGIFアニメとかGIF動画みたいな呼び方もされてます。「GIF」や「GIF画像」だけでGIFアニメーションを示すことも多くなってきているみたい。トレンドGIFの歴史(ざっくり)全部書くと長いので、ざっくり。画像フォーマット「GIF」発表される。GUI型ブラウザ「Mosaic」公開(GIF画像をサポート)。Webの画像フォーマットとしてJPEG、GIFが定着してゆく。Navigatorが「GIF89a」(アニメーションするGIFやつ)をサポート。日本でGIFアニメーションを掲載したWebサイトが出始め、普及し始める。「笑い」を意識したコンテンツとして、GIF画像投稿サイトやGIFアニメーションのギャラリーサイトなどが増加。Flash登場によりGIFは表舞台から一線を引く...。iPhone登場(iPhoneはFlash対応していない)、徐々にシェアを拡大してゆく。タブレット(スマホ)端末でのWebサイト閲覧が浸透してゆく。Flashで実装していたボタンアクションをGIFに置き換えるサイトなども出始める。TumblrなどからGIFアニメーションが見直され、アート、コンテンツとして流行り始める。)1990年代後半に動きのある演出のできるフォーマットとして浸透したGIFですが、2000年代のFlashの台頭で一時は一線を退くことになります。iPhoneのシェア拡大&iPhoneのFlash非対応により、再び日の目を見ることに...。1990年代後半のGIFは「他にないから」選ばれていたのに対し、2010年代のGIFブームではそのほかの選択肢もある中でのブームなので、なんだかGIFの底力を感じますね。簡単に作れる、誰でも見られるところが、SNSや今のマルチデバイス時代にマッチしていたんでしょう。2010年ごろからのGIFブームはgoogleトレンドで見ると本当によくわかります。嬉しい長所と引き換えに、だいぶ致命的な短所をいくつか持っているという。製作者と閲覧者双方にとっての簡便さが最大の長所である。・古くから多くのウェブブラウザで標準サポートされており、プラグイン等は不要である。・動画編集ソフトもウェブプログラミングも必要ない。必要な静止画と、簡単な変換ツールがあればいい。・背景を透過できる(GIF共通の機能)。短所さまざまな理由から、大規模な動画には向かない。・画像以外のストリームを持たない。音声ストリームを持たない。・最大256色(=28)しか使えない。そのため、自然画の表現は難しい。・フレーム間圧縮がない(同じフレームの再利用はできる)。・多くのムービープレイヤーでは再生できない。標準添付のフォトビューワで表示されない。2018年4月25日)やっぱり「作る側、見る側の両方にやさしい」っていうのがGIFアニメーションの長所ですね。この、「作りやすい」&「なんでも見れる」がGIFアニメーションがここまで浸透し、愛されている一番の要因かもしれませんね。短所がコンテンツのクオリティをあげる上でかなりの減点対象なのも事実...。「最大256色(=28)しか使えない。そのため、自然画の表現は難しい。」この短所のために・快適な閲覧を優先し、解像度を落とす、フレームを落とす、減色するなどして頑張って圧縮をかける。作成し、貧弱なネットワークからの閲覧を切り捨てる。苦渋の選択を迫られてしまう事態が起きてしまうのです。いうわけで、本題のGIFアニメーションとうまく付き合って行くためのことに移って行きます。「圧縮されたGIFアニメーションのノイズ感がたまらなく好き!」とか「ファイル容量はいくら大きくても大丈夫な環境しか対応してない(キリッ」などの方は、そのまま幸せなGIFアニライフを過ごしていただいて大丈夫です!GIFアニメーションとの付き合い方ネットの海にGIFアニメーションの作り方、おもしろGIFまとめ、GIFアニメーション圧縮のやり方は数多あれど、GIFとの付き合い方は全然見つからないという...。Webサイトの演出として使用するとき、画質、フレームレートとかの面でのクオリティを求められると、その容量の重さに非常に苦しめられますよね、わかるわかる。GIFアニメーションが重い...GIFアニメーションは、そのファイル形式の短所から、ファイル容量が大きくなりがちです。ファイル容量がべらぼうに大きくなってしまった時にすることといえば圧縮する。見なかったことにする。ふたつが考えられます。2の場合はそのまま使っちゃえばいいので、それでとりあえず解決です。それほど圧縮されない。頑張って圧縮しても画質、動画の質が許せないほど落ちてしまう。いうことが考えらます。それはGIFアニメーションに向いていない動画だったのでしょう...。GIFアニメーションに向いてる、向いてない?既存の動画をGIFアニメーションに変換する時の、参考にしていただきたいです。GIFアニメーションを使用する上で、知っておくべきことは、「ブラウザで簡単にアニメーションを表示できる!」だけでは圧倒的に足りません。上記(Wikipediaからの引用)の短所、特に「256色しか使えない」、「フレーム間圧縮ができない」を心に刻みましょう。これだけ知っていればおkです。この致命的な短所をわかっておけばGIFアニメーションに向いている動画とそうでないものが、だいたい分かってきます。目安として参考にしてください。グラデーションがない。フラットなオブジェクトのアニメーション。カラーの実写とかは結構きつそう。8bitカラーのみ使用している。アニメーションするフレームが少ない。単純に全体の尺が短い。フレームレートが低い。