画像ファイルの軽量化サービスを使ってみよう

ページの表示速度が遅いと思ったら?

上記のようにWebサイトを作ったけど、ページの表示速度が遅い…
Web制作に関わったひとなら一度は経験したことはないでしょうか？
その原因がjsファイルが重かったり、サーバーに問題があったり、使用している回線に異常があったりと色々とありますが、ページ内で使用している画像ファイルにも注意をしたいところです。

一昔に比べ通信速度が上がり、画像ファイルを気兼ねなく使える傾向にありますが、やはり限度はあります。
画像ファイルをたくさん使えばページの読み込みに時間がかかり、ページに訪問したユーザーが逃げていく可能性も高くなります。
そこで、「画像ファイルの容量をなんとか下げたい、けど画質をなるべく落としたくない！」と悩まされ頭を抱えそうになりますが、画質を落とさずファイルサイズを軽量化できる無料のオンラインサービスがあります。

PNGファイルの軽量化サービス「TinyPNG」

みんなに厳しかったIE6も淘汰されて 一時期に比べコーディングがしやすくなりPNGファイルを使う機会も増えてきたと思います。
そんなPNGファイル用の軽量化サービス「TinyPNG」を今回使ってみたいと思います。

軽量化してみる

「TinyPNG」にアクセスするとパンダのキャラクターがお出迎えしてくれて、彼の左隣りにPNGファイルをドラック＆ドロップするエリアあります。
このエリアに軽量化したい画像ファイルを選択してドラック＆ドロップしてあげます。
（1ファイル5MBまで・20ファイルまで同時upload可能になりますので使用時にはご注意を…）

試に僕が描いた絵がありますので今回はこれを軽量化してみます。
肝心の画像ファイルの容量は781.1KBになります…。

軽量化の作業は非常に簡単です
上記でも少し説明しましたが軽量化したい画像ファイルを選択し、左図の箇所にドラッグ＆ドロップします。

ドラッグ＆ドロップ後、軽量化の処理がスタートします。 軽量化中はローディングバー（青色）が表示され完了時には「finshed」と表示されバーの色が緑色になります。

完了と同時に元の画像ファイルからどのくらい軽量化できたか表示してくれます。
今回の処理結果は元のファイルサイズから71％軽量化できファイルサイズも
781.1KB⇒225.1KB
になりました。

軽量化できたファイルは「download」をクリックするとダウンロードできます。

画像を比べてみる

では実際に軽量化した画像と元の画像を見比べてみましょう。
下記に画像を配置していますが真ん中にあるバーを左右に動かして頂くと軽量化前と軽量化後の画像を見比べることができます。
（バーを左に動かすと軽量化の画像が表示され、右に動かすと元の画像が表示されます）
この状態でみるとさほど違和感がないように思います。

しかし、拡大してよく見てみるとオリジナルの画像に比べやはり色数は減って少し粗くなっています。

実はこの「TinyPNG」の特長としてPNG-32、PNG-24からPNG-8に変換しているとのことです…これは確かに軽くなります。
ただ、PNG-8になりますが透明を保持してくれますので、透明化を使用した画像を使用する際は便利かもしれません。

今回はPNGファイル用のサービス紹介になりましたがJPGファイル用の「JPGMINI」、GIFアニメーション用の「GIF animation online optimization」のサービスもありますので、画像の使用用途に合わせて使ってみるといいかもしれません。