あなたは画像を圧縮する際にどのサービスを使用していますか?
僕は、PNG画像を圧縮する際は「TinyPNG」、JPEG画像(JPG画像)を圧縮するなら「Optimizilla」を使っています。WordPressを使っていてこの2つの組み合わせが最も最強だと感じました。
これ2つで圧縮率も画質もバランスのとれた圧縮をすることができます。
今回は、この2つのサービスの素晴らしくおすすめできる点を述べていきたいと思います。
TinyPNGとOptimizillaとは?
TinyPNG
TinyPNGは、オランダのアムステルダムにある会社が運営している、Web上で動く画像圧縮サービスです。もちろん無料で使用することができます。
使用方法はかんたん。パソコン上の画像データをこのサイトの上にドラッグ&ドロップするだけです!
こちらは、PNGと名前にありますが、JPEGも圧縮してくれます。また、「TinyJPG」もありますが、ほとんど同じです。どちらのサイトを使っても同じ結果が返ってきます。
Optimizilla
Optimizillaも、TinyPNGと同じでPNGとJPEGに対応しています。
同じようにオンライン上で圧縮してくれますが、唯一の違いは圧縮率(劣化率)の調整ができることです。PNGでは色数で、JPEGでは画質の粗さで調節できるのもポイントです。
なぜ”2つ”なのか?
これは、僕が実際に圧縮してみて、いろいろなサイトを比べてみた結果、下記の結果になったからです。
・PNG画像→TinyPNGが有利
・JPEG画像→Optimizillaが有利
TinyPNGでPNG圧縮をすると、圧縮率は大体60~70%でした。
対する、「クオリティーレベル70」でのOptimizillaでのJPEG圧縮率は70%~あたりでした。
EWWW Image Optimizerではダメなのか
僕がWordPressでブログを開設した際、多くのサイトで「プラグインである『EWWW Image Optimizer』を使うといいよ」と書いてありました。しかし、無料版だと圧縮率がすごく低いのです。はっきり言っておすすめしません。
こちらのプラグインを使った圧縮率は10~20%ほどで、あまりにも低い圧縮率でした。なので作られた画像データを思い切って消すことにして、再構築しなおしました。
また、圧縮に圧縮を重ねても意味がないので、TinyPNGなどのWebサービスなどを使うことにして、「EWWW Image Optimizer」は削除しました。
実際に圧縮してみる!
JPEG(JPG)画像!
まず、JPEG画像から確かめていきます。
Optimizillaだけでなく、おまけ程度ですがTinyPNG(TinyJPG)とGIMP2(画像編集ソフト)での圧縮も載せておきます。
圧縮するのはこの画像です!(※すでにこの画像はOptimizillaによって圧縮されています。イメージとしてご覧ください。)
元の画像だと大きすぎるので、GIMP2を使って1920×1080の大きさに調節しました。出力クオリティーは100です。この画像を使って、それぞれのサービスで圧縮していきます。
TinyPNGには調節機能がないので2重にやってみました。GIMP2とOptimizillaにはあるので、クオリティーレベルが100、90、80、70、60の5つで試してみます。
もとの画像サイズは「2309KB」です。このサイズを100%として、比較してみます。
(念のため、GIMP2とOptimizillaのクオリティー100でもう一度やっていますが、正直気にしなくていいです。)
ふむふむ。グラフにすると数値より格段にわかりやすくなりますね。
棒グラフには、GIMP2とOptimizillaを、赤い線はTinyPNGになっています。
クオリティー100に設定すると、GIMP2もOptimizillaも苦戦してます。
90だと一気に圧縮されて、もとの画像の3割ほどのサイズに。80以降はOptimizillaの完全勝利です。
TinyPNG(1回目)とOptimizillaの(クオリティー80)はほぼ一緒の劣化でした。2つとも接戦状態(わずかにOptimizillaが勝っています)。
また、70でもTinyPNGとさほど変わりませんでした。それでも大きく圧縮されているので、やはりJPEGの圧縮はOptimizillaの圧勝というわけです。調節もできていいですね!
PNG画像!
次に、TinyPNGの性能を確かめてみます。こちらもおまけですが3つを比べていきます。
3つのアプリを起動してみました。そのスクリーンショットです。(この画像もすでにTinyPNGで圧縮しています。)
GIMP2で圧縮し、もととなる画像を作りました。この画像(元の画像)のサイズは285KBです。
同じようにグラフ化してみます……と言いたいところですが、PNGの圧縮方法に関しては、たくさんの処理方法があるので、一つずつ試してみます。なお、GIMPについては種類が多すぎるので、今回は比較しません。
※赤色の線はTinyPNG(1回)の圧縮で得られたサイズ
こんな感じになりました。ひとつづつ紐解いていきます。
まず、TinyPNGですが、8ビットの深さで圧縮しているそうです。8ビットの深さとは、2の8乗のことで、すなわち「2の8乗=256色で表すよ」という意味になっています。
今回のGraphでは、Optimizillaの横の数字は色数を指しています。
つまり、TinyPNGはうまく256色でごまかせているのに、Optimizillaの256色(一番右のバー)は圧縮効率が少しだけよろしくないのです。
また、24色あたりでOptimizillaが勝っているように見えますが、実際のところを調べるとこうなっています。
Optimizilla(24色)だと、CPUのバックの色(グレー)に若干ノイズがかかっています。
対して、同じくらいのサイズだったTinyPNG(256色)だと何ら問題なく表すことができていますね。逆に、同じサイズで256色も再現できるTinyPNGは 素晴らしいです。
言うまでもありませんが、24色で劣化の激しかったOptimizillaは、それ以下の色数でいい結果が出ないことは想像に難くありません。すでにTinyPNGの圧縮でバランスがいいので、こちらの勝負(PNGでの圧縮)はTinyPNGの勝利です!
※Optimizillaにばらつきがある理由は、おそらく色数とデータの圧縮効率が関係しています。例えば、特定の色を使うときに、その色と似た色が多いか少ないかで、圧縮効率が変わってくるということです。あくまで推測ですが。
OptimizillaはPNGに向いていないのか?
では、本当にOptimizillaはダメなのでしょうか。ここで疑問がわいた人は、鋭いです。
そう、例えば元の画像が4色や8色といった、少ない色数であれば、Optimizillaも十分に戦えるのです。背景が白で文字が黒の2色しか使っていないのであれば、2色のみで圧縮することで更に最適化できるでしょう。
ちなみに、先ほどのこのグラフはOptimizillaで圧縮したものです。
このグラフ自体を、TinyPNGを使って圧縮すると、6.83KB。
Optimizillaを使うと、なんと4.26KBまで落とすことができました。色数が少なければOptimizillaを使うといいでしょう。
……サイズそんなに変わらないじゃないかって? いえ、大きな差です。
少しでも小さくしておけば、サイト自体軽くすることができますし、読者もうれしいはずです(モバイル系は特に)。
また、もっと色数の少ないかんたんなグラフであれば、さらに差が開きます。こういった単純なものには、Optimizillaが有利なのです。
ただし、Optimizillaで1つずつ色数を指定している時間がなければTinyPNGが確実です。
時間があるならOptimizillaで圧縮調整したり、TinyPNGと比べてみたりをおすすめします。
まとめ
Webサービスでは「TinyPNG」と「Optimizilla」がおすすめです!
インストール不要、また、ブックマークに登録すればすぐに飛んで使うことができますよ!
ということで、「画像圧縮するならTinyPNGとOptimizillaの組み合わせが最強!」でした。
コメントを残す