バーチャル3Dクリエイター神部まゆみです(*^-^*)
この記事は、ScreenToGifのGIF画像を軽くするために模索してみた備忘録記事です。
ScreenToGifっていうのは、手軽にGIFアニメ画像を撮影して作れるツール。
無料なのにすごく使えてすごすぎです(;^_^A
私はかなり使ってるから、そろそろ作者さんに寄付したいなと思ってます。
追記：Patreonでパトロンになってみました！
ScreenToGifで何も考えずにGIFアニメを撮ったらかなり重かった…
私の設定方法が悪いんだと思うけど、闇雲に撮影したらかなり重かった…。
過去記事見返したら普通に1画像で30MB以上とかある(-_-;)
重くても表示はされるけど、読み込みに時間かかったり、1記事あたりのGIF枚数が多いと結構きついですね(~_~;)
あとポイピクとかにアップする時に、容量が増えるとアップロードに失敗することが多くなる気がする。
ScreenToGifのGIFアニメ画像を軽くする方法を模索してみる
画像が重いとブログのバックアップ容量も食うので、できれば軽いほうがいいですね。
一つの作品として凝って作るなら重くても良いかもしれないけど、ブログの記事で使う程度なら、だいたい見てる人に伝われば軽いほうが良いかも。
フレームレートを下げる
まずは基本的なところ。
1秒間に画像何枚分にするかっていうFrame Per Secondを下げればそのぶん軽くなる。
多くなると滑らかにはなるけど、当然重くなります。
でも撮影した後にフレーム数を削減できるので、多めに撮っておいて後で削減するのも良いかも。
ちなみに分ごと、時間ごととか、手動でスクリーンショットを撮る設定にもできるようです。
これはタイムラプス？みたいなコマ送り画像みたいな感じのGIFが作りたいなら使えるのかも。
画面をあまり大きく動かさないほうがいいかも？
これも関係あるっぽい？
GIFアニメはパラパラ漫画みたいな仕組みだけど、1フレームごとにあまりに違う画像になっているとそのぶん重くなるかも？
フレームごとに各ピクセルの色の変動が激しいと、そのぶん容量も使うと思う。
マウスカーソルだけ動いてるようなGIFは結構軽い気がする。
間違ってたらごめんなさい(;^_^A
これはVRoidStudioでモデルを動かして15FPSで撮影して、最初の100フレームだけ抜き出したところ。
15FPSでもだいぶヌルヌル動いてる気がする( *´艸｀)
これだけでも12.3MBある…。普段なら圧縮するところだけど、分かりやすいのでこのまま載せておく。
これブログで操作方法とか伝えたいだけなら、5FPSくらいあれば必要十分かも？
これは瞬きだけのアニメーションだけど10.3MBとちょっと軽くなった。アニメーション以外の条件は同じです。
これエンコードの時に「変更されていないピクセルを検出中」って出るから、前のフレームから全く変わっていないピクセルは上手いこと圧縮して軽くしてるとか？
でも瞬きとマウスカーソルくらいしか動いてないのに10.3MBもあるから、ものすごく関係あるというほどでもないか？
一度にあまり長く撮影しない
フレーム数は後からでも削減できるけど、どこを撮影するのか決めて、ささっと撮影したほうがいいかも。
操作画面のGIF撮影とかは、分割したほうが結果的にトータルのサイズは軽くなるかもしれません。
ScreenToGifは既に作られたGIFアニメを読み込んで編集し直すこともできるので、後から編集して分割するのも良いかも。
リサイズして画像サイズを小さくする
これも結構有効かも。
画質は落ちるけど、見てる人に伝わればいいならそこまでの画質は必要ないかも？
1024×571だったのを、640×357にしたら一気に半分以下になった。
ウィンドウサイズは適当に撮ったので、横幅だけ指定して、高さは縦横比固定で自動計算されたので適当な感じです(;^_^A
でもあまり小さくすると文字がつぶれたりするので、画像によるけどできれば横720～960くらいはあったほうがいいかな？
横640にしたのがこれ。
少し小さくなったかな？
でも文字が潰れて読めない感じでもないし、必要十分かもしれない。
CSSで画像サイズを大きく指定するのも良いかも
横幅640になったけど、ブログ記事に貼るならCSSで表示する画像サイズを変えられます。
↓これはワードプレスの機能で、画像表示をカスタムサイズにして1024×571にしてみたやつ。
横幅640の画像を無理矢理引き延ばして表示してるだけだけど、ちょっと画質は落ちたけどこれでも十分かな。
多分スマホで見る場合はほとんど見た目は変わらなさそう(;^_^A
いらないフレームを削除する
特に最初と最後はいらないことが多いかも。
フレーム操作メニューで、任意のフレームを選択して「以前を削除」「以後を削除」を使えば消せます。
任意の１フレームを選択して削除することもできる
あとはフレームを選択して一つ一つ削除したりもできる。
今気づいたけどScreenToGifは複数起動できるようなので、↑のように「ScreenToGifでScreenToGifを撮影する」ということもできますｗ
Shift押しながらフレームを選択すれば、複数選択もできます。
でも「ここからここまで」っていう範囲選択なので、1フレーム目と４フレーム目だけ選択、ってことはできない。
フレーム数を削減する
ちょっとカクカクになるけど、フレーム数を1/2にすればファイルサイズはだいたい半分になります。
何フレームごとに何フレーム削除するか、という指定ができます。
残数1で削除数1なら、1フレームごとに1フレーム消すので半分になる。
私はいつも10～15FPSくらいで撮ってるから、半分にしてもそこまでカクカクにはなってないかな？
更にもう一回半分にするとカクカクになるけど(;^_^A
でもそのぶん容量は減らせます。
フレームを半分にしたらファイルサイズも約半分になったΣ(ﾟДﾟ)
上で載せた12.3MBのGIF画像を、1フレームごとに1フレーム消してフレーム数半分にしたら、ファイルサイズも約半分になった！
まぁ当たり前か(笑)。
最初からフレームレート低くしてもいいけど、それだとカクカクになる危険性があるから、後から見ながら調整したほうがいいかもしれない。
2022/10/05追記：遅延調整でGIFのスピードをどうするか決められる
これ最近知ったけど、削減したフレームを遅延させるか、遅延させずにすぐ次のフレームを表示するか決められるっぽい。
前者はカクカクになるけど、後者は早送りみたいになる。
↓遅延調整「残りフレームを均等に合算」にしたやつ
カクカクになるけど何が表示されているかは分かりやすいかな。
↓遅延調整「調整しない」にしたやつ
早送りみたいになるけど、どんな感じか見せたいだけならこれでもいいかな。
最近はタイムパフォーマンスを意識して動画を倍速で見る人も多いから、このくらいでもちょうどいいかな？(笑)
作業手順GIFでも、高速で何回も見たほうが理解しやすい時はあるかもしれない。
まぁ適材適所かな(;^_^A
ちなみにファイルサイズはどちらも変わりませんでした。
画像圧縮サイトで圧縮する
画像をアップすると圧縮してくれるサイトがあるので、最後に使うと便利。
私はILoveIMGっていうサイトさんをよく使ってます。
あんまり画質劣化せずに、大幅に圧縮してくれるので便利です。
でも圧縮率は画像によるっぽい？それでも3～５割くらいは圧縮できる気がする。
できるだけ軽くして最後にやったほうがいいかも。
50%以上も圧縮できた！Σ(ﾟДﾟ)
上に載せた12.3MBあった画像だけど、
このサイトを使うだけで54%も圧縮できたｗ
うーんこれ使った方がいいね(;^_^A
リサイズ、フレーム削減、画像圧縮サイトを使うと…
これまでに書いた削減方法を全部併用してみるとこんなに減った！
リサイズとフレーム削減をしたら12.3MBから2.68MBまで減り、ILoveIMGさんにアップしたら1.35MBまで減りました。
約1/10だと…Σ(ﾟДﾟ)
↓が削減後のやつ。
↓これが元のやつ。
少し劣化はしてるけど、容量が約1/10になるならそっちのほうが軽くてエコだから良いかな(;^_^A
2022/10/18追記： ↓フレーム数削減「遅延調整しない」×2 ＋ フレーム数削減「残りフレームに均等に合算」×1 で削減し、横640にして圧縮したやつ。
342KBまで減らせた！
画質とFPS犠牲にしてもこのほうがやっぱり読み込み軽いので、バッサリ削減してしまってもいいと思う。
作品として一枚だけ作るなら重くて凝ったヤツでもいいけど、ウェブページだと思いGIFがあると読み込みで結構きついし(;^_^A
作業手順GIFなら、 フレーム数削減「残りフレームに均等に合算」 でカクカクのパラパラ漫画みたいにしてもちゃんと伝わると思うし、そのほうがフレーム数少ないので軽いです。
既に作成されたGIFアニメを読み込んで編集し直すこともできる
これ最近知ったけど、以前作成したGIFアニメを読み込んで、編集し直すこともできます。
ScreenToGifのエディターを開いて、
ファイル → ロード でGIF画像ファイルを選べばOK。
こうすれば以前アップしたGIF画像をダウンロードして、容量を削減してアップし直すことができますね。
ワードプレスの「Enable Media Replace」プラグインなら画像URLを変更せず画像置換できて便利
ワードプレス使ってる場合限定だけど、このプラグインを使えば、画像のURLを変更せずに画像を置換できます。
FTPソフトとかファイルマネージャーで手動でやる手もあるけど大変だし。
画像のURLが変わっちゃうと画像検索経由で404エラーになる可能性があるから、あまり変更しないほうがいいかも。
2022/08/09追記：あまり長くて重いGIFはMP4動画にしてしまったほうがいいかも…
Googleもそれを推奨してるみたいです。
今あなたが見ているこのページ、Googleの「ページスピードインサイト」っていう読み込みの軽さを計測できるサイトで見てみると警告が出る(・_・;)
しかしGIFアニメを多用しているページでも、数十～200KBくらいに圧縮したGIF画像であれば、警告は出ませんでした。
1MBを超えるGIFアニメを多用してるページだと、回線が混雑する時間帯とかでは画像が読み込めない場合が出てくるかも。
あんまり重いようなら動画にしてしまったほうがいいかもしれません。
ワードプレスでも動画アップして再生できるけど、youtubeで限定公開にしてブログに張り付けておくのも良いかも。
ScreenToGifはMP4に変換もできる
FFmpegっていう動画処理フリーソフトをダウンロードして、ScreenToGifの「外部ツール」メニューでFFmpeg.exeファイルを指定するとMP4変換ができるようになります。
名前をつけて保存のところで、MP4が選択できるようになってる。
12.3MBだったGIFアニメをMP4動画に変換したら、なんと423KBに！Σ(ﾟДﾟ)
こんなに軽くなるの！？軽すぎて草生えますよ😇
ちゃんと再生できますね…うーんすごい。
動画の詳細設定で、自動再生とループ再生の設定ができる
動画を貼り付けた記事編集画面で動画をクリックして「編集」を押す。
そうすると自動再生やループ再生の設定ができます。
↓ちゃんと自動でループできてる？はず。
うーんこれならGIFじゃなくてもうMP4でいったほうがいいのか…。
今度からMP4にして使っていくことにしようかな。
…と思ったけど自動再生は動作が安定しない感じ？軽いのは確実に動くGIFのほうがいいか…？
PCから見ると大丈夫だけど、スマホから見てみたら自動再生されたりされなかったりって感じだった。
PCでも回線が重い時には途中で動画の読み込みが止まって自動再生されなくなり、ボタンを押すと再生できるとか動作が安定しない(-_-;)
↓のまま止まっていて、再生ボタンを押さないと動かない…。
他の人のサイト見てても、再生ボタン押さないと動かない1～2秒程度の短い動画が貼ってあったりするけど、あれも自動再生にしてるのに動かないやつなのかも…？
GIFはPocketとかGoogleドキュメントとかに保存したやつでもちゃんと動くんだけどなぁ…。
まぁblenderとかunityとかの技術系の記事なら、作業手順を知りたい人が多いから一時停止できる動画のほうがいいのかな？
調べたらタグにミュートとインラインを付けると良いって書いてあったけどあんまり変わらなかった。
chromeならまだ安定してる感じだけど、braveブラウザは自動再生無効になってるっぽい？
んーまだまだGIFはオワコンにはならなそうかな？(~_~;)
GIFを軽くできるならそれが一番汎用性高い気がするし、MP4自動再生はちょっと挙動が怪しいかもしれない。
最適解としては、要点だけ撮影して500KB以下くらいにカットできるならGIFで。それ以上に長く重くなりそうなら動画で、って感じがいいかな？
GIFを多用してても、それぞれ数十～数百KBくらいで収まるならページスピードインサイトでも警告が出ずにすぐ読み込まれるので、適材適所で使い分けていけばいいかな。
できれば200KB以下くらいにするとGIFでもかなり読み込み軽くなるので、フレーム削減したり画像小さくしてでも圧縮したいところ。
MP4も、1MB以上あると最初の読み込みに時間かかって、自動再生ループが途中で止まることも多い気がする(~_~;)
画質やフレームレートを犠牲にしてでも軽いほうがいいかもしれない。
まとめ
今のところ容量を軽くするためにやっているのはこんなところ。
もっといい感じに容量削減できる方法があれば追記していきます(*^-^*)
ScreenToGifめっちゃ使ってるから、そろそろ作者さんに寄付したいかな。
結構色々な寄付方法があるみたいなんだけど…。
ペイパルで寄付しようかなと思ったけど、調べた感じだとペイパルは日本からだと法律で寄付できないっぽい？
Patreonあたりが無難かな？使ったことないけど…(;^_^A
まぁもうちょっと調べてみます。
2022/01/10追記：Patreonで作者さんのパトロンになってみた
Patreonでペイパル決済にしたら登録できたので、月額10$のパトロンになってみました。
とりあえず三か月くらい継続してみようかな。
作者はニックさん？っていう人っぽい。
ただ毎月一日に決済されるっぽいので、ちゃんと決済されるか不安だけど(~_~;)
決済エラーになったらメールが来るっぽいので、クレジットカードとか別の決済手段に変えてみればいいか…。
ちゃんと支払えたら追記します(*^-^*)
追記：無事決済できました！
今円安が進んで円換算の金額が上がってるので、とりあえず三か月くらいかな(;^_^A