便利なアプリ

GIFアニメーションや画像を劇的に軽量化する無料サービス

9 0


弊ブログでは記事中にGIFアニメーションや画像をよく載せておりますが、その際には事前に「ファイル容量の軽量化」を実施してから載せております。

近年のインターネットやデバイス(PCやスマホやタブレット等)の性能向上と共に、ファイル容量の大きなものでも表示ストレスをそんなに感じなく表示されるようになりました。
とは言え、ファイル容量が1個当たり2MBや3MBや4MBと言った超重たい画像(笑)のものを1記事当たりに複数枚載せてしまったら、そのブログやサイトにアクセスした時の読み込み時に、ずっとローディング中(読み込み中)になってしまってその全容がなかなか表示されないことがありますよね。



2017-08-01-late-ani.gif



こんな状態になってしまいますよね~(爆) これはではいくら何でも「重たいブログ」です (^^;; アセ
これはたまたま見つけた 重たいブログの様子をそのままGIFアニメーションに切り取ったものです。
このブログの管理人さんは、何故このように自ブログの表示が重たくなっているのか原因追及するべきなんですけどね。
閲覧してくださる人にとっては、いつまでもブログやサイトの全容が読み込まれなくて歯抜け状態な表示がしばらく続いて(笑)『 いつまで待ったら全部表示されるの? 』とストレスが溜まります(笑)
そのブログやサイトを常連的に覗いてくださる人には尚更のことですよね。

最近のスマホで撮った写真などは設定によっては画角サイズ(縦横サイズ)が巨大で、それに伴ってそのファイル容量も巨大です。
ですから、そのままの写真をブログ等にアップしてしまったら、、、(爆)
もっとも、そのようになる原因は画像等のファイル容量の問題だけでなく、プラグインのJavaScriptが要因だったりと多岐にわたりますが、、、

もしかして、それが原因で段々と常連閲覧者さんの足が遠のいてしまう人もいるかもしれません(爆)


さて、「GIFアニメーション」のことなんですが、Adobeが『2020年末でFlashのサポートを終了』を公表して以降から、また急速にその「GIFアニメーション」が人気復活して来ており、FlashファイルからGIFアニメーションへと切り替え作業も盛んに行われるようになりました。

私個人は以前より「FlashよりGIFアニメーション派」でしたから、この状況を笑ってみているんですけどね(爆)

さて、どのような手法であれ、GIFアニメーションを自作するとけっこうファイル容量が大きくなって、中には『 わぉ、こんなに重いの? (^^;; アセ 』なんて焦ってしまうことが私はよくあります(爆)
でも、そのまま記事に載せてしまうなんてことはしません(してないつもり(笑))
今までもブログに載せるGIFアニメーションや画像はそれなりにファイル容量を軽量化して載せて来てましたが、つい最近こんなサイトを見つけました。

海外サイトではあるんですが

Compressor.io


2017-08-01-compressor-io-top.png


GIFアニメーションや各種ファイル形式の画像をかなり圧縮して「ファイル容量の軽量化」をしてくれるWEBサービスです。


2017-08-01-floating.jpg

[ こんな感じに軽~くなったら良いですよね~(笑) ]


同様のWEBサービスサイトは数多くありますし、無料ソフト(アプリ)でも数多くありますが、この Compressor.io での圧縮軽量化後の画像の見栄えはなかなか上質で劣化が殆どなく、特にGIFアニメーションの軽量化には特筆するくらい素晴らしいものです。
私は好んで使うようになりました。


対応ファイル形式:JPEG,PNG,GIF,SVG


使い方は超簡単でして、軽量化したいファイルを画面上にドラッグ&ドロップするだけで自動的に軽量化してくれて、その動作が終わったら後はダウンロードするだけ。
1ファイル最大10MBまで対応出来るようです。


先ずはその操作の様子をGIFアニメにしましたのでクリックしてご参照下さい。


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]


上のGIFアニメは表示の時短処理はしてなく、そのままの様子です。

上図のGIFアニメーションの動作の中でファイル容量の軽量化を行ったファイルは、以前に弊ブログの


動画とGIFアニメーションを合成するにはAviUtlだと簡単に出来るんです

年の暮れに(笑)いろんな動画素材を見てましたら に目がとまったんです。ローラースケートのシーンですけど、



この記事に載せた「 動画とGIFアニメーションの合成 」で生成したGIFアニメーションファイルでして


[ 画像クリックで GO & STOP ]


[ 画像クリックで GO & STOP ]


これがその軽量化後のGIFアニメーションの様子です。
ファイル圧縮軽量化の画面の中で


2017-08-01-compressor-ani-3.gif


このような結果部分が見られるように、元のGIFアニメーションファイルの容量が 2.22MB から 881.15KB へと60%もの軽量化が行われていることが分かります。
そして、その圧縮軽量化に於けるGIFアニメーション画像としての見栄えの劣化は殆ど見られないくらい素晴らしい結果です。

また軽量化後のファイル名後部に自動的に -compressor の文字列が付記されてダウンロード出来るようになっており、元画像に上書きされてしまう心配がありませんから安心です。

Compressor.io サイト画面上には

画像の圧縮と最適化
最大90%のファイルサイズの削減


等のようなうたい文句(笑)が見られますが、何もそこまで要求する必要もありませんしね(笑)

皆さんも是非試してみて下さい。



検索からの方は
トップページへもどうぞ

関連記事

Comments 9

There are no comments yet.

りんりん♪  

お久しぶり(*´艸`)

ぼっちんさん

久々のコメントですσ(^◇^;)
こちらはよく覗いてはいますよぉ。

今回の記事、またまた私にはありがたい情報なのです(ノ≧∀)ノわぁ〜い♪

うちのPC何だか動きが悪くなって来てて…。
元はWindows7で10にグレードアップしたら、何をするにもノロノロなの^^;
容量が問題かな?と只今写真は他に移してる。
GIFアニメーションに嵌ってるから、画像も圧縮しなきゃ!と検索しても何が良いのか悩んでる所にこの記事!

信用できる情報だから、これでやってみまぁす!

いつも、ありがとう(*´艸`*)ァハ♪

ちなみに、PCも買い換えようかと検討中!

2017/08/02 (Wed) 20:56 | EDIT | REPLY |   

ぼっちん  

りんりん♪ちゃんへ

ハーイ(^O^")/ こんばんは お久しぶりぶり~(笑)

こちらはよく覗いてはいますよぉ。

あい、リアルタイムでアクセス解析見てるから毎度存じてますよ~ ( ̄∀ ̄*)イヒッ

うちのPC何だか動きが悪くなって来てて…。
元はWindows7で10にグレードアップしたら、何をするにもノロノロなの^^;


え゛~? 変だねぇ、Win7よりWin10の方が最初の起動も速いし、通常動作もちょっとは速いんだけど (^^ゞポリポリ
もしかして起動ドライブ(大抵のパソコンはCドライブ)の空き容量が少なくなってる?  (^^;; アセアセ

GIFアニメーションに嵌ってるから、画像も圧縮しなきゃ!と検索しても何が良いのか悩んでる所にこの記事!

おおっ またまたタイムリーな記事だったんだね(笑)

ちなみに、PCも買い換えようかと検討中!

うんうん(^-^) 良いねぇ良いねぇ。
私のメインPCは起動用SSDが物理的に壊れて動かなくなっちゃったから、それ以来ずっとサブPCでお仕事してま~す (^_^; アハハ…
そろそろSSD交換して直さなくちゃだけど (^^ゞポリポリ

2017/08/02 (Wed) 22:43 | EDIT | REPLY |   

ロビンソン  

GIFファイル名

お世話になります。
ぼっちんさんの指導で何とかGIF動画作成の手順が分かり、いくつか作成してみました。
その時に気がついた点です。

Giamで合成して「新規.gif」という名称で保存してから任意のファイル名に変更してCompressor.ioで軽量化する際にsample.gifというファイル名にしていました。
そして次のファイルも同じ手順でCompressor.ioにドロップすると、前回のGIFが認識されてしまうようです。

初めは訳が分からなくて、ブラウザを変更したり他のwebサービスを探したりしていましたが、「もしや」と思ってファイル名を変えたら無事に軽量化出来ました。

ぼっちんさんはもうご存知だったと思いますが、この記事を読む方が同じ様に悩まないようにコメントさせていただきました。

2018/07/02 (Mon) 16:20 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、こんにちは ^^

Giamで合成して「新規.gif」という名称で保存してから任意のファイル名に変更してCompressor.ioで軽量化する際にsample.gifというファイル名にしていました。
そして次のファイルも同じ手順でCompressor.ioにドロップすると、前回のGIFが認識されてしまうようです。

つまりは、同じファイル名でCompressor.ioに再加工したファイルをアップロードすると、前のファイルが生きてしまっていると言うことなんですね? (^^;; アセアセ
要は、Compressor.ioで同名ファイルの上書きが出来ないと言うことかと思いますが、それは私は認識しておりませんでした。
それ、実はFC2ブログのファイルサーバーでも同じことが発生するんですよね (^_^; アハハ…

私の場合は、同じGIFアニメ(静止画でも同じですけど)を再加工した場合には、常には例えば sample-1.gif → sample-2.gif のようにファイル名自体を変えて保存することを行っているんです。
Compressor.ioへアップロードする時だけでなくて日常作業としてそのようにしてますから、再加工したものを同じファイル名で再保存することはしてないんですよね。
そんな次第で気がつきませんでした (^^ゞポリポリ

ぼっちんさんはもうご存知だったと思いますが、この記事を読む方が同じ様に悩まないようにコメントさせていただきました。
ハーイ(^O^")/ わざわざのお知らせをありがとうございます。
きっとこの欄をご覧の皆さんの貴重な参考になることでしょう d(-_^)good!!

2018/07/02 (Mon) 17:14 | EDIT | REPLY |   

ロビンソン  

おはようございます。
ぼっちんさんにいろいろ教えていただいてから、いくつかGIFアニメを作成してみました。
AviUtilで動画を切り出して、モザイク処理などをしてからGOMPlayerで連続キャプチャして~という流れなんですが、その時に気がついたのは元の動画がAVI形式だと余白が残る事が多く(全部ではありません)MP4形式だとないようでした。
余白ができる動画は、AVI出力で切り出しても、プラグイン出力でMP4にエンコードしても同じでした。

最初にテスト記事で見ていただいたのもAVI動画からのGIFだったので、むしろ気がついて良かったです。
あれからは、GIF作成後にGIMPで余白を確認するようにしています。

ところで、この記事にあるCompressor.io の使い方のGIFですが、このサイズで動画のような動きなのに1MBなのに驚きました。
Giamで見ると、いろんなサイズの画像を複雑に組み合わせていらっしゃるようですね・・・

本当にすごいです!

2018/07/04 (Wed) 10:12 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、こんにちは ^^

精力的にGIFアニメーション作成の研究をなさってる様子で、そのエネルギッシュさに感服してしまいますよ~ ^^

最初にテスト記事で見ていただいたのもAVI動画からのGIFだったので、むしろ気がついて良かったです。
あれからは、GIF作成後にGIMPで余白を確認するようにしています。

なるほどなるほど、それなら堅実ですよね~。
で、もしまたレイヤー余白が見つかってしまったら、そのままGIMP画面の編集メニューで「ナイフ」アイコンがあって、それでGIFアニメーション部分だけを「切り取る」ことが簡単に出来てしまいますから、一気に解決出来ますからね ^^

Giamで見ると、いろんなサイズの画像を複雑に組み合わせていらっしゃるようですね・・・
本当にすごいです

細かいところまで観られちゃいましたね~ (^^ゞポリポリ
そう、実はいろんなテクも使って作成してあります、まぁ、少しでも軽量化させる為のテクニックではありますが ^^
Giamって一見単純なソフトなんですけど、他の画像編集ソフトと「連動」させられる機能が隠れておりまして、1枚ごとのコマ画像をクリックした時ににその画像編集ソフトが直接立ち上がってそのコマ画像を編集することも出来てしまうんです(笑)
これ、実は解説しているサイトって殆どないんですよね(爆)

まぁ、いろいろと研究して行かれると「わぉ、こんなことも出来るんだぁ」って驚かされることにたくさん出会うと思いますよ (^_^)ニコニコ 
でも、あくまでも「楽しみながら」でないと、気持ちが疲れちゃいますけどね~(笑)

■ 追記です 大切なことを書き忘れておりました (^^;; アセアセ

このCompressor.ioでの動作をGIFアニメーション化するには「LICEcap」を利用しました。
解説は https://oops0011.blog.fc2.com/blog-entry-48.html に書いてありますが、この「LICEcap」を利用しますと、動きのない部分は最初の1コマだけ記録されて、それ以降のコマには記録しないという機能を持っているんです。
つまりはそうやって完成するGIFアニメーションの軽量化を図る凄い機能を持っているんです ^^

ロビンソンさんの「いろんなサイズの画像を複雑に組み合わせていらっしゃるようですね・・・」を再読みして「あっ 大事なことを伝え忘れてる!」ってことで改めて追記させて戴きました(笑)

2018/07/04 (Wed) 10:57 | EDIT | REPLY |   

ロビンソン  

To ぼっちんさん

こんばんは。

実は私も最初はその記事を読んで「動画から直接GIFが出来る」と思ってLICEcapをインストールしてみました。
ところが画質の劣化が半端なく、まるで水面に油が浮いて滲んでいるような感じでした。
おそらく収録する画面や設定の違いもあると思いますが、ちょっと私の手には負えない印象でした(笑)

>動きのない部分は最初の1コマだけ記録されて、それ以降のコマには記録しないという機能を持っているんです。

それでも、この機能は本当に凄いと思います。
ちなみに、ぼっちんさんは画像のレタッチもGIMPを利用されているんですか?
画面収録ではなく、自分で撮影した画像が暗かったり色合いを修正する時に便利なツールがあったらご紹介いただけませんか?
もし、すでに過去記事で書かれていたらリンクでも結構です。

よろしくお願いします。

2018/07/04 (Wed) 21:35 | EDIT | REPLY |   
ぼっちん

ぼっちん  

To ロビンソンさん

ロビンソンさん、おはようございます ^^

ところが画質の劣化が半端なく、まるで水面に油が浮いて滲んでいるような感じでした。
おそらく収録する画面や設定の違いもあると思いますが、ちょっと私の手には負えない印象でした(笑)

なるほどぉ、実は私は自分で撮ったiPhone Xでの動画を弊ブログに載せるってことは今のところ100%予定がない(笑)ものですから、「LICEcap」でそういう操作自体やったことがないんですよね (^_^; アハハ…
きっとiPhone動画のクッキリ度にも関わって来るのかもしれませんねぇ (^^ゞポリポリ

ちなみに、ぼっちんさんは画像のレタッチもGIMPを利用されているんですか?
私は画像のレタッチは「Pixia・GIMP・PaintDotNet・JTrim」これらのソフトを使い分けておりまして、利用頻度はこの並び順です。
「Giam」と連動させているのはPixiaです(最新バージョン)。
弊ブログ内の画像に様々な形や色の矢印付けは「Screenpresso」の無料版で行っております。

画面収録ではなく、自分で撮影した画像が暗かったり色合いを修正する時に便利なツールがあったらご紹介いただけませんか?
いやぁ、その操作の必要性を感じたことはかつてなかったものですから、それらの知識はいま持ってないんですよね~ (^^ゞポリポリ
どうも相済みません m(_ _)m

2018/07/05 (Thu) 08:02 | EDIT | REPLY |   

ロビンソン  

To ぼっちんさん

お世話になります。

>私は画像のレタッチは「Pixia・GIMP・PaintDotNet・JTrim」これらのソフトを使い分けておりまして、利用頻度はこの並び順です。

ご回答ありがとうございます。
この中でPixiaは使ったことがないので、インストールしてみます。

今後ともよろしくお願いします。

2018/07/05 (Thu) 17:15 | EDIT | REPLY |   

Leave a reply