画像を綺麗に圧縮する『Tiny PNG』の使い方

bandicam 2015-05-22 13-46-32-371(1)

こんにちは。

今回は画像を綺麗に圧縮することが出来る『TinyPNG』の使い方をご説明したいと思います。

 
https://tinypng.com/

 

「まず、TinyPNGって何?」っていう方が多いと思いますので軽くご紹介します。

 

 

TinyPNGとは

TinyPNGは画像をほぼ劣化なしで圧縮できるwebサービスです。最初はPNGファイルの圧縮だけでしたが、今ではJPGファイルの圧縮も対応しています。

 

bandicam 2015-05-22 13-10-53-597

 

TinyPNGのすごいところはその圧縮率です。フォトショップなどで編集した画像だと最高70%圧縮してくれます。画像のmetaデータなどを最適化することで画像を劣化させずに圧縮できるんですね。

それでは次にTinyPNGの使い方をご説明します。

 

 

TinyPNGの使い方

超簡単です。画像をドラッグ&ドロップするだけです。

bandicam 2015-05-22 13-38-45-900

 

画像をドロップしたら….待ちます(0.5秒ほど)

bandicam 2015-05-22 13-38-51-359

はい。圧縮されました。今回は55%圧縮されましたね。圧縮された画像は『download』をクリックするとダウンロードできます。

ちなみに最大で同時に20個の画像を圧縮できます。手間を省けるうれしい機能ですね。

 

せっかくなので圧縮前の画像と圧縮した画像を交互に貼っていきます。

 

PNGファイル

 

圧縮前(515kB)

Afiwalke1r

圧縮後(234kB)

Afiwalke1r

 

PNGファイル(通過あり)

 

圧縮前(28kB)

rogo101

 

 

圧縮後(3kB)

rogo101

 

 

JPGファイル

 

圧縮前(66kB)

YSITYHDSXM

 

 

圧縮後(60kB)

YSITYHDSXM

 

JPGファイルは元々圧縮されているので圧縮率は低めですね。

 

画像をご覧いただければほとんど画像が劣化していないことが分かると思います。それでは次にTinyPNGを利用することで生じるメリット・デメリットをご紹介します。

 

 

 

 

TinyPNGを利用することで生じるメリット

  • 画像が圧縮されることで閲覧者にとっては読込速度が高速化される。
  • サーバ側にとっては転送量が減ることで負荷の少ない結果を生むことができる。

画像はテキストと比べるとはるかにデータ量が多いので、画像の多いサイトは読み込み速度が重くなってしまいます。

そのため少しでも読み込み速度を早くするために多くのサイト運営者は画像を圧縮します。

普通に圧縮をすると画像は劣化し、画質が明らかに落ちてしまいます。しかし、TinyPNGを使えばこの問題は解決できます。

 

TinyPNGを利用することで生じるデメリット

  • 画像を圧縮する という作業が手間

…当たり前ですが、「画像を圧縮させる」という作業をしなければなりません。TinyPNGを使った画像の圧縮方法は簡単で楽なんですが、それでも手間が増えるのには変わりありません。

 

 

まとめ

このブログの画像はすべてTinyPNGで圧縮しています。サイトの表示速度を少しでも上げて読者様に快適に記事を読んでもらいたいからですね。

 

…しかし、WordPressを利用している人でTinyPNGを利用している人は少ないと思います。

理由は簡単です。EWWW Image Optimizer という優秀なプラグインがあるからです。このプラグインも画像を最適化することで画像の容量を軽量化できます。

「では、なぜ私はTinyPNGを利用しているのか 」ということですが、このブログで利用しているサーバーはWpXです。

…実はWpXではEWWW Image Optimizerが使えないんですよね。残念。

ちなみに、XserverのサイトではTinyPNGじゃなくてEWWW Image Optimizerを利用しています。楽だからね仕方ないね。

expand_less