ScreenToGifのGIFアニメを軽くする方法を模索してみた備忘録

Webサイト運営関連

バーチャル3Dクリエイター神部まゆみです(*^-^*)

この記事は、ScreenToGifのGIF画像を軽くするために模索してみた備忘録記事です。

 

ScreenToGifっていうのは、手軽にGIFアニメ画像を撮影して作れるツール。

無料なのにすごく使えてすごすぎです(;^_^A

ScreenToGif - Record your screen, edit and save as a gif or video
Free screen recorder tool. Record, edit and save as a gif or video.

私はかなり使ってるから、そろそろ作者さんに寄付したいなと思ってます。


追記:Patreonでパトロンになってみました!

Patreonに登録してみた!ペイパルで登録してScreenToGif作者さんのパトロンになるゾ
バーチャル3Dクリエイター神部まゆみです(*^-^*) この記事はPatreonに登録してScreenToGifの作者さんのパトロンになってみたので、その記録です。 Patreonの登録方法とかもGIFで解説してるので、パトロン...

 

————-PR———————-

現在、人気商品が最大70%以上オフで買えるアマゾンタイムセールをやってるみたいです。

amazonタイムセール祭り 最大70%以上オフ

ゲーミングノートなども安くなっているので、欲しい商品はこの機会に買っておくと良いかも。

————————————-

ScreenToGifで何も考えずにGIFアニメを撮ったらかなり重かった…

私の設定方法が悪いんだと思うけど、闇雲に撮影したらかなり重かった…。

過去記事見返したら普通に1画像で30MB以上とかある(-_-;)

重くても表示はされるけど、読み込みに時間かかったり、1記事あたりのGIF枚数が多いと結構きついですね(~_~;)

 

あとポイピクとかにアップする時に、容量が増えるとアップロードに失敗することが多くなる気がする。

ポイピクに登録してアップロードしてみた!GIFアニメも動いて良い感じ
バーチャル3Dクリエイター神部まゆみです(*^-^*) 今日はイラスト投稿サイト「ポイピク」に画像をアップロードしてみたから、それについての記事です。 ポイピクは最近結構利用者増えてるみたい? イラストとかをpix...

ScreenToGifのGIFアニメ画像を軽くする方法を模索してみる

画像が重いとブログのバックアップ容量も食うので、できれば軽いほうがいいですね。

一つの作品として凝って作るなら重くても良いかもしれないけど、ブログの記事で使う程度なら、だいたい見てる人に伝われば軽いほうが良いかも。

フレームレートを下げる

まずは基本的なところ。

screentogif fps

1秒間に画像何枚分にするかっていうFrame Per Secondを下げればそのぶん軽くなる。

多くなると滑らかにはなるけど、当然重くなります。

でも撮影した後にフレーム数を削減できるので、多めに撮っておいて後で削減するのも良いかも。

 

ちなみに分ごと、時間ごととか、手動でスクリーンショットを撮る設定にもできるようです。

コマ送り画像みたいな感じのGIFが作りたいなら使えるのかも。

画面をあまり大きく動かさないほうがいいかも?

これも関係あるっぽい?

GIFアニメはパラパラ漫画みたいな仕組みだけど、1フレームごとにあまりに違う画像になっているとそのぶん重くなるかも?

マウスカーソルだけ動いてるようなGIFは結構軽い気がする。

間違ってたらごめんなさい(;^_^A

 

これはVRoidStudioでモデルを動かして15FPSで撮影して、最初の100フレームだけ抜き出したところ。

15FPSでもだいぶヌルヌル動いてる気がする( *´艸`)

vroid studio

これだけでも12.3MBある…。普段なら圧縮するところだけど、分かりやすいのでこのまま載せておく。

これブログで操作方法とか伝えたいだけなら、10FPSもあれば十分かも。

 

これは瞬きだけのアニメーションだけど10.3MBとちょっと軽くなった。アニメーション以外の条件は同じです。

vroidstudio

これエンコードの時に「変更されていないピクセルを検出中」って出るから、前のフレームから全く変わっていないピクセルは上手いこと圧縮して軽くしてるとか?

でも瞬きとマウスカーソルくらいしか動いてないのに10.3MBもあるから、ものすごく関係あるというほどでもないかも?

一度にあまり長く撮影しない

フレーム数は後からでも削減できるけど、どこを撮影するのか決めて、ささっと撮影したほうがいいかも。

操作画面のGIF撮影とかは、分割したほうが結果的にトータルのサイズは軽くなるかもしれません。

ScreenToGifは既に作られたGIFアニメを読み込んで編集し直すこともできるので、後から編集して分割するのも良いかも。

リサイズして画像サイズを小さくする

これも結構有効かも。

screentogif resize

画質は落ちるけど、見てる人に伝わればいいならそこまでの画質は必要ないかも?

 

1024×571だったのを、640×357にしたら一気に半分以下になった。

ウィンドウサイズは適当に撮ったので、横幅だけ指定して、高さは縦横比固定で自動計算されたので適当な感じです(;^_^A

でもあまり小さくすると文字がつぶれたりするので、画像によるけどできれば横720~960くらいはあったほうがいいかな?

 

横640にしたのがこれ。

少し小さくなったかな?

でも文字が潰れて読めない感じでもないし、必要十分かもしれない。

CSSで画像サイズを大きく指定するのも良いかも

横幅640になったけど、ブログ記事に貼るならCSSで表示する画像サイズを変えられます。

↓これはワードプレスの機能で、画像表示をカスタムサイズにして1024×571にしてみたやつ。

横幅640の画像を無理矢理引き延ばして表示してるだけだけど、ちょっと画質は落ちたけどこれでも十分かな。

多分スマホで見る場合はほとんど見た目は変わらなさそう(;^_^A

いらないフレームを削除する

特に最初と最後はいらないことが多いかも。

フレーム操作メニューで、任意のフレームを選択して「以前を削除」「以後を削除」を使えば消せます。

screentogif delete before after

任意の1フレームを選択して削除することもできる

あとはフレームを選択して一つ一つ削除したりもできる。

今気づいたけどScreenToGifは複数起動できるようなので、↑のように「ScreenToGifでScreenToGifを撮影する」ということもできますw

 

Shift押しながらフレームを選択すれば、複数選択もできます。

でも「ここからここまで」っていう範囲選択なので、1フレーム目と4フレーム目だけ選択、ってことはできない。

フレーム数を削減する

ちょっとカクカクになるけど、フレーム数を1/2にすればファイルサイズはだいたい半分になります。

何フレームごとに何フレーム削除するか、という指定ができます。

残数1で削除数1なら、1フレームごとに1フレーム消すので半分になる。

 

私はいつも10~15FPSくらいで撮ってるから、半分にしてもそこまでカクカクにはなってないかな?

更にもう一回半分にするとカクカクになるけど(;^_^A

でもそのぶん容量は減らせます。

フレームを半分にしたらファイルサイズも約半分になったΣ(゚Д゚)

上で載せた12.3MBのGIF画像を、1フレームごとに1フレーム消してフレーム数半分にしたら、ファイルサイズも約半分になった!

まぁ当たり前か(笑)。

最初からフレームレート低くしてもいいけど、それだとカクカクになる危険性があるから、後から見ながら調整したほうがいいかもしれない。

画像圧縮サイトで圧縮する

画像をアップすると圧縮してくれるサイトがあるので、最後に使うと便利。

私はILoveIMGっていうサイトさんをよく使ってます。

オンラインでGIFとアニメーションGIFを圧縮
複数のGIF画像を選択して、必要に応じてアニメーションを維持しながら瞬時に圧縮。GIF画像を圧縮して、ファイルサイズを節約できます。

あんまり画質劣化せずに、大幅に圧縮してくれるので便利です。

 

でも圧縮率は画像によるっぽい?それでも3~5割くらいは圧縮できる気がする。

できるだけ軽くして最後にやったほうがいいかも。

50%以上も圧縮できた!Σ(゚Д゚)

上に載せた12.3MBあった画像だけど、

このサイトを使うだけで54%も圧縮できたw

GIF 圧縮

うーんこれ使った方がいいね(;^_^A

リサイズ、フレーム削減、画像圧縮サイトを使うと…

これまでに書いた削減方法を全部併用してみるとこんなに減った!

リサイズとフレーム削減をしたら12.3MBから2.68MBまで減り、ILoveIMGさんにアップしたら1.35MBまで減りました。

約1/10だと…Σ(゚Д゚)

↓が削減後のやつ。

↓これが元のやつ。

vroid studio

少し劣化はしてるけど、容量が約1/10になるならそっちのほうが軽くてエコだから良いかな(;^_^A

既に作成されたGIFアニメを読み込んで編集し直すこともできる

これ最近知ったけど、以前作成したGIFアニメを読み込んで、編集し直すこともできます。

ScreenToGifのエディターを開いて、

 

ファイル → ロード でGIF画像ファイルを選べばOK。

screentogif

こうすれば以前アップしたGIF画像をダウンロードして、容量を削減してアップし直すことができますね。

ワードプレスの「Enable Media Replace」プラグインなら画像URLを変更せず画像置換できて便利

ワードプレス使ってる場合限定だけど、このプラグインを使えば、画像のURLを変更せずに画像を置換できます。

Enable Media Replace
メディアライブラリ編集ビューで新しいファイルをアップロードするだけで、添付されている画像やファイルを簡単に置換することができます。

FTPソフトとかファイルマネージャーで手動でやる手もあるけど大変だし。

画像のURLが変わっちゃうと画像検索経由で404エラーになる可能性があるから、あまり変更しないほうがいいかも。

まとめ

今のところ容量を軽くするためにやっているのはこんなところ。

もっといい感じに容量削減できる方法があれば追記していきます(*^-^*)

 

ScreenToGifめっちゃ使ってるから、そろそろ作者さんに寄付したいかな。

結構色々な寄付方法があるみたいなんだけど…。

screentogif donation

ScreenToGif - Donation
Help ScreenToGif get better, by donating to the project.

ペイパルで寄付しようかなと思ったけど、調べた感じだとペイパルは日本からだと法律で寄付できないっぽい?

Patreonあたりが無難かな?使ったことないけど…(;^_^A

まぁもうちょっと調べてみます。

2022/01/10追記:Patreonで作者さんのパトロンになってみた

Patreonでペイパル決済にしたら登録できたので、月額10$のパトロンになってみました。

Patreonに登録してみた!ペイパルで登録してScreenToGif作者さんのパトロンになるゾ
バーチャル3Dクリエイター神部まゆみです(*^-^*) この記事はPatreonに登録してScreenToGifの作者さんのパトロンになってみたので、その記録です。 Patreonの登録方法とかもGIFで解説してるので、パトロン...

とりあえず三か月くらい継続してみようかな。

作者はニックさん?っていう人っぽい。

screentogif donate

ただ毎月一日に決済されるっぽいので、ちゃんと決済されるか不安だけど(~_~;)

決済エラーになったらメールが来るっぽいので、クレジットカードとか別の決済手段に変えてみればいいか…。

ちゃんと支払えたら追記します(*^-^*)


追記:無事決済できました!

今円安が進んで円換算の金額が上がってるので、とりあえず三か月くらいかな(;^_^A


 

タイトルとURLをコピーしました