ドット絵GifアニメをTwitterにアップする際に気を付けている事

Tweet about this on TwitterShare on FacebookShare on Google+

概要

Twitterにドット絵をアップすると、滲んでしまう。

元のGIF

150724_upload_gif_for_twitter_master

w256*h256px, 11.4KB, 12コマ。GIFだとキレイですね。

そのままアップ

150724_upload_gif_for_twitter_master_uploaded
※クリックすると原寸で表示

投稿したツイートをタイムライン上で見ると、ぼっけぼけに滲んでしまっている。

  • Gifではなく、mp4に動画エンコードされている
  • タイムラインの幅いっぱいになるよう、動画サイズが引き伸ばされている

 

が原因っぽい。GIFがmp4エンコードされるのは、twitterの仕様なのでどうしようもない。
(おそらくスマホやいろんなブラウザで再生&制御できるようにする為?)

タイムラインの幅に合わせてアップ

150724_upload_gif_for_twitter_dom

Domの要素を見てみると、横幅が506pxなのでこれに合わせて投稿してみる。

150724_upload_gif_for_twitter_w506

w506*h506px, デカイ。

元のGIFを2倍ドット(ニアレストネイバーで2倍)にした後、縦横を506pxにカットした。これを投稿してみると・・・

150724_upload_gif_for_twitter_w506_uploaded

色合いが変わったり細部のモアレはあるものの、素の状態で上げるよりキレイに出ている!
ただ実際にアップしないと分からないが、ループ地点でコマが飛んだり止まったりしてしまう。これはコマ数が少ないとカナリ如実に見えてしまうので、無理やりコマ数を増やしたり、最後と最初のコマは止まっていても問題ないようにしたり工夫する必要がありそう。

もろもろ調整してアップ

12コマの歩きを48コマにさせることで、ループ時のコマ落ちを目立たなくしてみた。
ちょっとブログ上では滲んでいるけど、自身のタイムライン上ではキレイにでている。
というかブログでは伝わらないですね orz

まとめ

  • Twitterのタイムラインの横幅にあわせるとキレイに出る。
  • GIFではなくmp4動画のため、FPSやループ処理的にちゃんとコマが出ないことがある。
    • がんばってごまかす。
    • GIFアニメそのものをアーカイブできない事に気をつける。
  • さんざん検証したけどTwitterの仕様はホイホイ変わるので、そこまで気にしてもしょうがない。
    • 上記の情報は、15/07/24 時点のもの
    • この前までアカウントのツイート一覧の横幅が526pxだった…
Sponsored Link
Tweet about this on TwitterShare on FacebookShare on Google+