概要

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

元のGIF

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

そのままアップ

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

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

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

 

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

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

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

w506*h506px, デカイ。

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

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

もろもろ調整してアップ

w506*h506px loop4回 pic.twitter.com/LhUFUd0mqe

— Ati (@ATI_01) July 24, 2015

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

まとめ

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