6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

GIPHYとgifsicleでgifアニメーション作成&最適化

Posted at

qiitaを見ているとgifアニメーションを使った表現を見かけます。
文字に起こすより画像や動画での表現がわかりやすい場面もあると思うので、gif作成アプリの紹介と作成したファイルサイズが大きかったので最適化を行ってみます。

環境はmacOSX。

GIPHY Capture

https://itunes.apple.com/jp/app/giphy-capture-the-gif-maker/id668208984?mt=12
デスクトップのキャプチャアプリ。
キャプチャー後に開始と終了のトリムや画像の品質の指定が手軽に行える。
Oct-25-2018 00-17-31.gif

ストアからインストールできるのでちゃちゃっと。
アプリは直感で使えたので説明は省略。

image.png

気になったのは中間地点で不要な部分の切り取りができない。
手間取ってるとはじめから撮り直しなのでドキドキしちゃう。

冒頭のgifでも品質をLowに設定しているが、1.9MBもあるので最適化を行ってみる。

gifsicle

https://www.lcdf.org/gifsicle/
コマンドラインでgifファイルの編集ができる。
ループの設定やコマ送りの速度なんかを変えられるもの。
このツールでgifの最適化を行う。

homebrewでインストールできるのでちゃちゃっと。
Oct-25-2018 00-52-19.gif

$ brew install gifsicle

最適化

オプション--optimize[=LEVEL]の指定で最適化が行える。
man gifsicleでオプション内容をみると、1から3の指定ができる。

-O1  Stores only the changed portion of each image. This is the default.
-O2  Also uses transparency to shrink the file further.
-O3  Try several optimization methods (usually slower, sometimes better results).

余程問題がでない限り、3で問題なさそう。

$ gifsicle --optimize=3 input.gif > output.gif
  • 圧縮前 1.9MB:
    Oct-25-2018 00-17-31.gif
  • 圧縮後 848KB:
    output.gif

コード程度なら違いは分からないです。
サイズは半分になるのでやっておくと取扱いも楽になりそうですね。

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?