GIFとMP4の同じところと違うところを書いていきます。
共通点
動く
一番わかりやすい共通点は、やはり動くこと。動的なコンテンツは静的なコンテンツとはまた違う目の引き方をするので効果的です。
ただの画像より容量が重い
動くものの宿命ですが、やはりどうしても動かない画像よりもはるかに容量が重くなります。
相違点
画像/動画
大きな違いとして、GIFは画像で、MP4は動画だということが挙げられます。
これによる違いは、サイトなどに載せる時に顕著になります。MP4は当然動画として組み込みますが、GIFは画像扱いでアップロードすることになります。
重さ
同じものを作ってもMP4よりもGIFの方が重くなりがちです。これは、GIFがフレーム間圧縮をしないからです。例えになりますが、パラパラ漫画の前のページと後のページがほとんど一緒だった場合はどうでしょうか。同じところはコピーすれば楽ですし、そこに割いた容量が浮きます。
しかし、フレーム間圧縮のないGIFの場合は、要は使いまわさずに全部一から書いている状態になります。となれば、逐一容量が食われるので当然重くなります。
透過にできる/できない
MP4はクロマキーで透過にすることはできますが、MP4そのものを透過にすることはできません。対してGIFは、透過出力が可能です。
ちなみに、透過できる動画形式自体は別で存在しています。（.mov）
ただし、透過の動画は透過のGIFよりも重くなります。
色数の制限
MP4には特に色数の制限というものは存在しませんが、GIFには上限があります。最大で256色です。限られた色数でノイズを出さないように工夫した記事はこちらです
使い分け
同じ動くものでも動く画像なのか動く映像なのかでは勝手が異なります。これらの違いを活かして使い分けをしていきましょう。
GIFに向くもの
小さくてシンプルなもの
例
・シンプルなイラストアニメーション
・アイコン
・サイト上のオブジェクト
・広告バナー
GIFは512色と限られた色数なので、写真よりイラストが適しています。透過の動画よりも軽い容量で透過オブジェクトを作れ、なおかつ自動でループさせられるため、サイト上のオブジェクトに使うのも向いています。
また、GIFは画像扱いのため、画像しかアップロードできない環境でも組み込むことができる場合があります。動的なものが欲しいけど動画は入れられない、そんなときには検討してみてください。
MP4に向くもの
大きくて複雑なもの
・ディスプレイ映像
・実写映像
MP4は色数制限がないので、やはり複雑な色が多く出てくる実写においてはMP4の方に軍配が上がります。また、GIFはその特性から、画像サイズが少しでも大きくなるとかなり容量が様変わりします。そのため、大きくて色使いも複雑な、メインコンテンツとして配置できるようなものを作る場合には、MP4が適しています。
