画像圧縮するならWeb上で動くTinyPNGとOptimizillaの組み合わせが最強! うまく使い分けて圧縮しよう

WordPress
スポンサーリンク

あなたは画像を圧縮する際にどのサービスを使用していますか?

僕は、PNG画像を圧縮する際は「TinyPNG」、JPEG画像(JPG画像)を圧縮するなら「Optimizilla」を使っています。WordPressを使っていてこの2つの組み合わせが最も最強だと感じました。

これ2つで圧縮率も画質もバランスのとれた圧縮をすることができます。

今回は、この2つのサービスの素晴らしくおすすめできる点を述べていきたいと思います。

スポンサーリンク

TinyPNGとOptimizillaとは?

TinyPNG

TinyPNGのページのスクリーンショット

TinyPNGは、オランダのアムステルダムにある会社が運営している、Web上で動く画像圧縮サービスです。もちろん無料で使用することができます。

使用方法はかんたん。パソコン上の画像データをこのサイトの上にドラッグ&ドロップするだけです!

こちらは、PNGと名前にありますが、JPEGも圧縮してくれます。また、「TinyJPG」もありますが、ほとんど同じです。どちらのサイトを使っても同じ結果が返ってきます。

Optimizilla

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によって圧縮されています。イメージとしてご覧ください。)

山の風景の画像 Unsplashより

元の画像だと大きすぎるので、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ですが、8ビットの深さで圧縮しています。8ビットの深さとは、2の8乗のことで、すなわち「2の8乗=256色で表すよ」という意味になっています。

今回のGraphでは、Optimizillaの横の数字は色数を指しています。

つまり、TinyPNGはうまく256色でごまかせているのに、Optimizillaの256色(一番右)は圧縮効率がさほどよろしくないのです。

また、24色あたりでOptimizillaが勝っているように見えますが、実際のところを調べるとこうなっています。

Optimizilla(24色)だと、CPUのバックの色がノイズがかったようになっています。

対して、TinyPNG(256色)だと何ら問題なく表すことができていますね。素晴らしいです。

言うまでもありませんが、24色で劣化の激しかったOptimizillaは、それ以下の色数でいい結果が出ないことは想像に難くありません。どちらかというと、TinyPNGほどの圧縮で、すでにバランスがいいので、こちらの勝負はTinyPNGの勝利です!

※Optimizillaにばらつきがある理由は、おそらく色数とデータの圧縮効率が関係しています。例えば、特定の色を使うときに、その色と似た色が多いか少ないかで、圧縮効率が変わってくるということです。あくまで推測ですが。

OptimizillaはPNGに向いていないのか?

では、本当にOptimizillaはダメなのでしょうか。ここで疑問がわいた人は、鋭いです!

そう、4色や8色といった、少ない色数であれば、Optimizillaも十分に戦えるのです。

先ほどのこのグラフは、Optimizillaで圧縮したものです。

Optimizillaで圧縮したグラフそのもの

このグラフ自体を、TinyPNGを使って圧縮すると、6.83KB。

Optimizillaを使うと、なんと4.26KBまで落とすことができました。

……そんな変わらないじゃないかって? いえ、大きな差です。

少しでも小さくしておけば、サイト自体軽くすることができますし、読者もうれしいはずです(特にモバイル)。

また、もっと色数の少ないかんたんなグラフであれば、さらに差が開きます。こういった単純なものには、Optimizillaが有利なのです。

時間がなければTinyPNGが確実です。

時間があるならOptimizillaで圧縮調整したり、TinyPNGと比べてみたりをおすすめします。

まとめ

Webサービスでは「TinyPNG」と「Optimizilla」がおすすめです!

インストール不要、また、ブックマークに登録すればすぐに飛んで使うことができますよ!

 

ということで、「画像圧縮するならTinyPNGとOptimizillaの組み合わせが最強!」でした。

WordPress
\この記事をシェアする!/
スポンサーリンク
Tsut-psの休日

コメントを残す

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