97回目 GIF（ジフ）アニメーション画像の「解像度を落とさず」にファイルサイズを削減する
「岐阜」ではなくて「自負」です。
僕が嫌いな夏（7月～8月）という季節が過ぎてくれて嬉しいです。
今回も作りましたよ。カレンダー壁紙。
「Red Dead Redemption 2」というゲームのスクショ画像でデスクトップカレンダー壁紙を作ってみました。
↑「９月っぽさ」は薄いかもしれませんが、個人的には結構好きな1枚です📸
あとで、「デスクトップのオリジナルカレンダー壁紙の作り方」みたいな内容の記事を書いてみようかな。。。
まぁ、どうせ需要ないから誰も見ないんだろうけどネ。
▼▼▼それでは今月もいきますよ▼▼▼
GIFアニメーションとは、「動画映像」とまではいかずとも、数秒間の映像くらいなら画像としての表示が可能なおもしろい機能がある画像ファイルです。
ただファイルサイズは、「通常の静止画画像よりも大きくなってしまう」というデメリットも存在しています。
そのため開いたWebページに大量に貼り付けられていた場合は、そのページを読み込むのにも処理時間が長くかかってしまいます。
つまり、僕はこのブログで、毎回のように記事にGIFアニメーションの画像を「1記事に1枚」必ず貼り付けていますので、僕のブログを読者さんはページ読み込みの遅さに苛ついていることでしょう。
最近書いた記事では、約20枚ほどGIFアニメーション画像を貼り付けている記事もあるので、そのページを見る人はページ読み込み時間はかなり長く感じてしまうのではないでしょうか。
↓この記事にはGIFアニメーションの画像がたくさん貼ってあります。
ウダウダ言っていますが、今回は「GIFアニメーション画像」というもののデメリットである、静止画画像よりも大きくなってしまうファイルサイズについて、ちょっと特殊なやり方で「ファイルサイズを落とす方法」について書いていこうかな、と。
○GIFアニメーションの「ファイルサイズを削減」する
そもそもな話、GIFアニメーションというのは「256色で画像が表現される」というものです。
そんなことはだれでも流石に知っていることですよね。
（え、もしかして知らない人がいたりする...？）
ということは、何かしらのGIFアニメーション画像を生成したときそのGIF画像は「256色で表現されている」ということになります。
そして画像における色の表現では、「フルカラーで表現されている場合」ではその色の情報というものが、ファイルサイズの大きさにも影響がされるのです。
勘が良い方は、僕が何が言いたいかはもう分かるかと思いますが。
GIFアニメーション画像でファイルサイズの大きさを削ぎ落とすための1つの手段としては、
「画像を表現する際の、色の情報を極端に少なくしてしまえば良い」
のです。
「色の情報を少なくする」、つまりは昔のフィルム映像みたく「モノクロ表現」にしてみればいいというもの。
ということでやっていきます。
●動画編集ソフトでモノクロ化させる
まず、GIFアニメーション画像を作る際には動画編集ソフトなどを使用します。
他にもGIFアニメーション画像を生成できるフリーソフトなどが存在していますが、今回は説明する必要もないので割愛します。
僕の方ではまだまだ、上手な加工編集ができない「PowerDirector365」という動画編集ソフトを使っています。
動画編集ソフトを使って、動画ファイルの書き出し時に、生成されるファイルをGIFアニメーションの画像に設定して作り出します。
↓とりあえず適当に作った、「Forza Horizon5」というゲームの切り抜き映像です。
①３２０×１８０ フレーム数: １５ 低解像度VerのGIFアニメーション
①のGIFでは、「おおよそ何が起こっているのか」が理解できる程度の低解像度となっています。
でも、基本的には「ガビガビな画質」なので、ドットが荒いという印象を受けると思います。
①ファイルのプロパティ情報
画質はガビガビ低解像度表現ですが、ファイルサイズ自体は「軽いもの」となっています。
しかし画質が荒いGIFアニメーションでは、「細部にどんな文字が書いてあるのか」などといった情報をひと目見ただけでは理解が出来ないと思います。
続いてこちらの高解像度VerのGIF画像
②６４０×３６０ フレーム数：１５
③８００×４５０ フレーム数: １５
②、③とまとめて貼り付けましたが、この高解像度のGIFであれば映像の中の細部の部分がどういったものなのかがすぐに分かるかと思います。
もちろんこういった高解像度のGIFの場合、ファイルサイズは②③共に３MB～６MBクラスとなっています。
とりあえず解像度の、低解像度Verと高解像度Verを貼り付けてみたのですが、今回はこれらの生成した画像を解像度を維持した状態でファイルサイズを削減してみます。
↓
↓ モノクロ化
↓
↓②のモノクロVer
↓③のモノクロVer
解像度を維持した状態で、色情報を極限に少なくさせてみました。
気になるファイルサイズは。。。。
じゃかじゃん！
②モノクロVer：1.92MB
③モノクロVer：2.85MB
解像度を変えないままかなりファイルサイズを削減させることが出来ました。
計算してみると、
②：約５１％削減
③：約５２％削減
元のファイルサイズから半分近くの値分を削減することが出来ました。
ただ、「色情報を少なくする」加工をすればいいだけです。
⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩⇩
この操作だけでファイルサイズを「５０％削減する」ことが出来ます。
まぁ、元のGIF画像の色素数の情報を犠牲にしているんですけどもね....
○わざわざ動画編集ソフトで色情報を抜かなくても良くね？
GIFアニメーション画像の色素の値を極端に０にしなくても、もっと簡単にファイルサイズを削減する方法があります。
それがこちらの「GIF Compressor」というサイト。
↑このサイトに、ファイルサイズを圧縮したいGIF画像をアップロードすることで、ファイルサイズを自動的に圧縮してくれるWebサービスです。
かなり優秀なWebツールサイトなので、僕みたいに毎記事GIFをつかうGIF画像ユーザーにはもってこいみたいなサイトですね。
試しに僕の方でも、さきほど生成したGIFアニメーション画像である③の高解像度GIFをこのWebサイトで圧縮してみようかと思います。
ファイルのアップロードが完了すると、自動的に圧縮が開始されます。
結果として、③のGIFはファイルサイズを－４９％の削減に成功しました。
もちろん、このWebサイトを使った方法でファイルサイズが圧縮されたGIFは、解像度を維持した状態でなおかつ色素数の低下も無いです。
・↓GIF Compressorのサイトで圧縮された③のGIF
・↓元の状態の③のGIF
見た感じ、画質の低下やフレーム数の低下なんかは見られません。
（わざわざモノクロ化させるより手っ取り早いし色情報も抜かないから、断然こっちの方法が良くないか. . .？）
↓こちらは先日、偶然捕まえたコクワガタのオスを撮影した動画映像をGIF画像化せたものです。
実はこのクワガタGIF生成時は、８００×４５０の１５フレームで書き出ししたので、ファイルサイズは「１９.２MB」のサイズでした。
これを上記のGIF Compressorのサイトで圧縮したら、、、
驚異の-70％圧縮！！！
19.2MB ⇨ 5.84MBまでファイルサイズが削減されていました。。。
こりゃ、僕が思いついた「GIFモノクロ化ファイルサイズ削減法」じゃ敵わん。。。
※ちなみに、GIF Compressorのサイトでは圧縮率は自分で設定することが出来ないため、「圧縮率が高くなるか低くなるか」は運ゲーです。
みなさん、素直に「GIF Compressor」のサイトでGIFファイルの圧縮をしたほうが良さそうですよ。
あ、でもこのサイトだと、アップロードできるGIFアニメーション画像のファイルサイズが「最大５０MBまで」なんですよね。
制限サイズを超えるようなファイルサイズのGIFの場合、僕が今回の記事で紹介している「モノクロ化」が使えると思いますヨ。
例えばこんな感じでやっていきます。
上のクワガタGIFを例えば、「1980×1080の画質で15フレーム」で出力すると、↓以下のようなファイルプロパティのGIFアニメーションファイルが作られます。
これじゃ「最大５０MB」までしかファイルアップできない、GIF Compressorのサイトへはアップロードできませんよね。
というわけで、ここぞとばかりにクワガタGIFの色情報をモノクロ化させます。
クワガタGIFを構成する色素数をモノクロ化させることにより、33.5MBまでファイルサイズを落とします。
モノクロ化では、解像度をフルHD画質の状態維持したまま33.5MBまで削ぎ落とせました。
元のファイルサイズから「－６８％」もサイズ削減に成功！
これで、ファイルアップ制限サイズが設けられているサイトでも上手いことアップできるようになりますね。
も、モノクロ化も、ある意味では「ファイルサイズ削減手段の１つ」といっても過言ではないかもしれない。。。
まぁ、便利っちゃ便利な技かなぁ。。。（個人的な評価として68点くらいの便利技）
○解像度を落とさずに「どれだけファイルサイズを削減できるか」ということ
GIFアニメーション画像でもRAWデータの画像でもJPEGだろうと、png画像ファイルだろうとMPEGだろうと、、、
結局はそういった画像などの「画質」「解像度」というのは、どれだけ対象の物体が鮮明に見えるかどうかの違いによるものです。
例えるなら、某任○堂のスーパー土管ブラザーズ兄の赤帽子ヒゲが、
「8bitドット絵で表現されているのか、最新の３Dグラフィックや高画質CGなのか」
という違いですかね。
やはり、写真や画像というものは低解像度のガビガビ画質よりも、高解像度で表現されている方が、細部までわかりやすいので画像としてもかなり見やすいです。
色というものは、最悪モノクロでも高解像度であれば映像としては問題ないと思います。
「映像には色があった方が良い」とおっしゃる人もいるかと思いますが、
昔のモノクロ映画を変にカラー化させるよりも、モノクロのほうが「味があって良い」という人もなかにはいますよね。
人というのはさいあく「色」という情報が無くても、自分の脳みそが勝手に「色の補完」をしてくれるんですよ。
脳みそが、自分が今まで見てきた色の記憶をモノクロ映像へ補完させることで、映像がどういったものであるのかの理解をしていく、ということなんですよね。
つまり、映像表現というのは、「色よりも高画質であるか」が優先されるということですね。
まぁ僕が言いたいのは、
「映像なんてモノクロでも良くね？」
ということですね。
↓僕のPCのFHDのモニターのデスクトップ画面のライブ壁紙にする予定の映像
それでは今回はこんな感じで終わりたいと思います。
また次回で。
ばいなら。
