【サイト軽量化】無料で画像圧縮!TinyPNGの使い方

便利ツール

サイトを軽量化して表示スピードを少しでも早くしたい・・・まずはサイトに載せる画像を軽くしよう!
そんな時、手っ取り早く画像を圧縮して容量を軽くしてくれるのが、「TinyPNG」というサイトです。

使い方は簡単。ページを開いてドラッグ&ドロップするだけ

使う前に…サービスを作ったのはどこの会社?

TinyPNGトップ画面
公式サイトを開くと、パンダがお出迎え。
一瞬中国のサイトかと思い安全性が頭を掠めますが、運営会社は「voormedia」。
オランダとスウェーデンにオフィスがある会社です。
SONYやSAMSUNGなど、大手の企業にも採用されています。

圧縮したい画像をドラッグ&ドロップ

TinyPNGが圧縮してくれるのは、JPEGとPNG形式の画像です。

早速、「Drop your .png or .jpg files here!」というメッセージが書かれているエリアに、圧縮したい画像をドラッグ&ドロップしてみましょう。

TinyPNG使用画面:圧縮したい画像をドラッグ&ドロップ

ちなみに、20ファイルまでなら一気に放り込んで圧縮できます。
ただし、1ファイル最大5MBまでなので、5MBを超えるファイルはエラーが出るので注意してください。

どのくらい圧縮される? 画質は?

試しに、

  • 写真(photo.png)
  • グラデーション使用のイラスト(gradation.png)
  • ベタ塗りのイラスト(illust.png)

の3つの画像を圧縮してみます。

【結果】
TinyPNG使用画面:「66%〜73%」のサイズダウン

結果は「66%〜73%」のサイズダウン!

仕事でWEBサイトを制作する時、よく画像を放り込んで圧縮していますが、体感として大体「50%〜70%台」の数値を叩き出してくれます。

ダウンロード方法

圧縮後の画像は、下記3つの中から好きな方法でダウンロードしましょう。

①パーセンテージ表記の横にある「download」のテキストをクリック
②緑のボタン「Download all」を押す(まとめてzip形式でダウンロードされます)
③青いボタン「Save to Dropbox」を押す(Dropboxに保存できます)

下記は圧縮後の画像です。

・写真(photo.png) ※出演:実家の猫
圧縮後の猫の写真

・グラデーション使用のイラスト
圧縮後のグラデーション使用のイラスト

・ベタ塗りのイラスト
圧縮後のベタ塗りイラスト

TinyPNGはベタ塗りのイラストに特に強く、画質の低下を感じたことはほぼありません。
グラデーションを使用しているイラストや写真は、モアレや縞模様に注意しながら圧縮しましょう。

有料プラグインもあり

サイト上で使う場合は上記の方法で圧縮、ダウンロードをしますが、「いちいちサイトにアクセスするのは面倒」と感じる人は、有料プラグインを検討してみてはいかがでしょうか。

「Photoshop用のプラグイン」と、「WordPress用プラグイン」が販売されています。

閲覧者にストレスを与えずにサイトを見てもらうために、画像ファイルは真っ先に軽量化したいところです。
ぜひ「TinyPNG」を活用してみてください。