バーチャル3Dクリエイター神部まゆみです(*^-^*)
この記事は、ScreenToGifのGIF画像を軽くするために模索してみた備忘録記事です。
ScreenToGifっていうのは、手軽にGIFアニメ画像を撮影して作れるツール。
無料なのにすごく使えてすごすぎです(;^_^A
現在人気商品が最大90％以上オフで買えるAmazonプライム感謝祭セールをやってるみたいです(2025/10/10 23:59まで )。
欲しい商品はこの機会に買っておくと良いかも。
BOOTHでVRoidテクスチャやVRChat向けオブジェクトなどを販売しています。いいねしてくれると励みになります(*^-^*)
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フレーム消してフレーム数半分にしたら、ファイルサイズも約半分になった！
まぁ当たり前か(笑)。
最初からフレームレート低くしてもいいけど、それだとカクカクになる危険性があるから、後から見ながら調整したほうがいいかもしれない。
遅延調整でGIFのスピードをどうするか決められる
これ最近知ったけど、削減したフレームを遅延させるか、遅延させずにすぐ次のフレームを表示するか決められるっぽい。
前者はカクカクになるけど、後者は早送りみたいになる。
↓は遅延調整「残りフレームを均等に合算」にしたやつだけど、カクカクになるけど何が表示されているかは分かりやすいかな。
↓は遅延調整「調整しない」にしたやつ。早送りみたいになるけど、どんな感じか見せたいだけならこれでもいいかな。
最近はタイムパフォーマンスを意識して動画を倍速で見る人も多いから、このくらいでもちょうどいいかな？(笑)
作業手順GIFでも、高速で何回も見たほうが理解しやすい時はあるかもしれない。
まぁ適材適所かな(;^_^A
ちなみにファイルサイズはどちらも変わりませんでした。
画像圧縮サイトで圧縮する
画像をアップすると圧縮してくれるサイトがあるので、最後に使うと便利。
私はILoveIMGっていうサイトさんをよく使ってます。
あんまり画質劣化せずに、大幅に圧縮してくれるので便利です。
でも圧縮率は画像によるっぽい？それでも3～５割くらいは圧縮できる気がする。
できるだけ軽くして最後にやったほうがいいかも。
50%以上も圧縮できた！Σ(ﾟДﾟ)
上に載せた12.3MBあった画像だけど、
このサイトを使うだけで54%も圧縮できたｗ
うーんこれ使った方がいいね(;^_^A
注意点：圧縮した画像はPixivやポイピクのアップロードに失敗するっぽい？
これブログに使う用の画像を圧縮するには良いけど、Pixivやポイピクに圧縮したGIFアニメをアップしようとしたらエラーでダメだった。
無圧縮のGIFは普通にアップできて問題なく動いたので、画像投稿サイトとの相性はあまり良くないかも？(;^_^A
ワードプレスならエラー出たことないので大丈夫だと思います。
リサイズ、フレーム削減、画像圧縮サイトを使うと…
これまでに書いた削減方法を全部併用してみるとこんなに減った！
リサイズとフレーム削減をしたら12.3MBから2.68MBまで減り、ILoveIMGさんにアップしたら1.35MBまで減りました。
約1/10だと…Σ(ﾟДﾟ)
↓が削減後のやつ。
↓これが元のやつ。
少し劣化はしてるけど、容量が約1/10になるならそっちのほうが軽くてエコだから良いかな(;^_^A
↓フレーム数削減「遅延調整しない」×2 ＋ フレーム数削減「残りフレームに均等に合算」×1 で削減し、横640にして圧縮したやつ。
342KBまで減らせた！
画質とFPS犠牲にしてもこのほうがやっぱり読み込み軽いので、バッサリ削減してしまってもいいと思う。
作品として一枚だけ作るなら重くて凝ったヤツでもいいけど、ウェブページだと重いGIFがあると読み込みで結構きついし(;^_^A
作業手順を説明するGIFなら、 フレーム数削減「残りフレームに均等に合算」 でカクカクのパラパラ漫画みたいにしてもちゃんと伝わると思うし、そのほうがフレーム数少ないので軽いです。
追記：保存設定をOctreeにしたらニューラルネットワークより軽かった
保存設定がデフォルトだとニューラルネットワークになってたけど、Octreeにしたら軽くなりました。
上がニューラルネットワーク、下がOctreeですが7MB以上減りましたΣ(ﾟДﾟ)
ちょっと画質が下がったかな？程度だから軽くしたいならこっちでいいかな。
既に作成されたGIFアニメを読み込んで編集し直すこともできる
これ最近知ったけど、以前作成したGIFアニメを読み込んで、編集し直すこともできます。
ScreenToGifのエディターを開いて、
ファイル → ロード でGIF画像ファイルを選べばOK。
こうすれば以前アップしたGIF画像をダウンロードして、容量を削減してアップし直すことができますね。
ワードプレスの「Enable Media Replace」プラグインなら画像URLを変更せず画像置換できて便利
ワードプレス使ってる場合限定だけど、このプラグインを使えば、画像のURLを変更せずに画像を置換できます。
FTPソフトとかファイルマネージャーで手動でやる手もあるけど大変だし。
画像のURLが変わっちゃうと画像検索経由で404エラーになる可能性があるから、あまり変更しないほうがいいかも。
追記：あまり長くて重いGIFはMP4動画にしてしまったほうがいいかも…
Googleもそれを推奨してるみたいです。
今あなたが見ているこのページ、Googleの「ページスピードインサイト」っていう読み込みの軽さを計測できるサイトで見てみると、GIFアニメ貼ってる部分に警告が出る(・_・;)
しかしGIFアニメを多用しているページでも、数十～200KBくらいに圧縮したGIF画像であれば、警告は出ませんでした。
1MBを超えるGIFアニメを多用してるページだと、回線が混雑する時間帯とかでは画像が読み込めない場合が出てくるかも。
あんまり重いようなら動画にしてしまったほうがいいかもしれません。
ワードプレスでも動画アップして再生できるけど、youtubeにアップしてブログに張り付けておくのも良いかも。
ScreenToGifはMP4に変換もできる
FFmpegっていう動画処理フリーソフトをダウンロードして、ScreenToGifの「外部ツール」メニューでFFmpeg.exeファイルを指定するとMP4変換ができるようになります。
名前をつけて保存のところで、MP4が選択できるようになってる。
12.3MBだったGIFアニメをMP4動画に変換したら、なんと423KBに！Σ(ﾟДﾟ)
こんなに軽くなるの！？軽すぎて草生えますよ😇
ちゃんと再生できますね…うーんすごい。
【クラシックエディタの場合】動画の詳細設定で、自動再生とループ再生の設定ができる
これはワードプレスのクラシックエディタの場合。
動画を貼り付けた記事編集画面で動画をクリックして「編集」を押す。
そうすると自動再生やループ再生の設定ができます。
ブロックエディタ(Gutenberg)なら簡単に動画を自動再生ループさせられる
ワードプレスのブロックエディタ(Gutenberg)なら簡単に動画を自動再生ループさせられるので、MP4動画を埋め込んでGIFアニメみたいに使えます。
↓みたいに設定すればいけます。どうもミュートにしないと自動再生されないっぽい。
ちなみにCocoonだと↓でエディタを切り替えられます。
動画の方が軽くて説明しやすいから、最近はGIFアニメより動画を多用してますね…。
動画だとそのまま動画素材として使えるので、後で記事を動画にしてYoutubeにアップしたいと思った時に使いやすいと思います。
まとめ
今のところ容量を軽くするためにやっているのはこんなところ。
ちなみにこんな感じで立ち絵を作っておくと、YMM4(ゆっくりムービーメーカー)とかで動画の立ち絵素材として使えます。
Pixivやポイピクなどの画像投稿サイトにはGIFしか使えないけど、ブログに貼る用だったらMP4をループ再生させる方向にシフトしていった方が良いかもしれませんね…。
そのほうが軽いし、後で記事を動画にしたい時なんかはMP4のほうがやりやすいです。
もっといい感じに容量削減できる方法があれば追記していきます(*^-^*)