サイトを軽量化して表示スピードを少しでも早くしたい・・・まずはサイトに載せる画像を軽くしよう！
そんな時、手っ取り早く画像を圧縮して容量を軽くしてくれるのが、「TinyPNG」というサイトです。
使い方は簡単。ページを開いてドラッグ＆ドロップするだけ！
使う前に…サービスを作ったのはどこの会社？
公式サイトを開くと、パンダがお出迎え。
一瞬中国のサイトかと思い安全性が頭を掠めますが、運営会社は「voormedia」。
オランダとスウェーデンにオフィスがある会社です。
SONYやSAMSUNGなど、大手の企業にも採用されています。
圧縮したい画像をドラッグ＆ドロップ
TinyPNGが圧縮してくれるのは、JPEGとPNG形式の画像です。
早速、「Drop your .png or .jpg files here!」というメッセージが書かれているエリアに、圧縮したい画像をドラッグ＆ドロップしてみましょう。
ちなみに、20ファイルまでなら一気に放り込んで圧縮できます。
ただし、1ファイル最大5MBまでなので、5MBを超えるファイルはエラーが出るので注意してください。
どのくらい圧縮される？ 画質は？
試しに、
- 写真（photo.png）
- グラデーション使用のイラスト（gradation.png）
- ベタ塗りのイラスト（illust.png）
の３つの画像を圧縮してみます。
【結果】
結果は「66％〜73%」のサイズダウン！
仕事でWEBサイトを制作する時、よく画像を放り込んで圧縮していますが、体感として大体「50%〜70%台」の数値を叩き出してくれます。
ダウンロード方法
圧縮後の画像は、下記３つの中から好きな方法でダウンロードしましょう。
①パーセンテージ表記の横にある「download」のテキストをクリック
②緑のボタン「Download all」を押す（まとめてzip形式でダウンロードされます）
③青いボタン「Save to Dropbox」を押す（Dropboxに保存できます）
下記は圧縮後の画像です。
・写真（photo.png） ※出演：実家の猫
・グラデーション使用のイラスト
・ベタ塗りのイラスト
TinyPNGはベタ塗りのイラストに特に強く、画質の低下を感じたことはほぼありません。
グラデーションを使用しているイラストや写真は、モアレや縞模様に注意しながら圧縮しましょう。
有料プラグインもあり
サイト上で使う場合は上記の方法で圧縮、ダウンロードをしますが、「いちいちサイトにアクセスするのは面倒」と感じる人は、有料プラグインを検討してみてはいかがでしょうか。
「Photoshop用のプラグイン」と、「WordPress用プラグイン」が販売されています。
閲覧者にストレスを与えずにサイトを見てもらうために、画像ファイルは真っ先に軽量化したいところです。
ぜひ「TinyPNG」を活用してみてください。