memocarilog

透過PNGにも対応したPNGファイルを軽量化してくれるWebサービス、「TinyPNG」がこちらの記事「What’s new for designers, July 2012 | Webdesigner Depot」で紹介されていたので使ってみました。

画像の色数を減少させることによってファイルサイズを小さくしているようです。透過PNGにも使えます。

使い方

「TinyPNG – Compress PNG images while preserving alpha transparency」へ行って、「Drop your .png file here!」のところへPNGファイルをドラッグ＆ドロップします。画像の軽量化が終わると何％軽量化できたかを表示してくれます。

”download”をクリックで軽量化されたPNGファイルをダウンロードできます。

TinyPNGで軽量化した画像サンプル

実際にTinyPNGで軽量化した画像の使用前、使用後とファイルサイズです。

TinyPNG使用前

ファイルサイズ：25KB

TinyPNG使用後

ファイルサイズ：16KB

拡大してよく見ると、TinyPNGで軽量化した画像はグラデーションのところが筋が入っていたり、色が暗くなっていたりしますが、ぱっと見た感じは劣化もほとんど分かりません。ファイルサイズは4割も小さくなりました！

TinyPNGによって軽量化されたファイルはモバイルのブラウザや、Internet Explorer6 以外の主要なブラウザで透過の部分もちゃんと表示されるようです。

ただPhotoshopでTinyPNG使用後の画像を開いた場合は下の画像のように半透明の部分が黒くなってしまいます。

この記事で使ったスクリーンショットはTinyPNGを通したら65%も軽量化できました！ブログ等で使う画像もこういったサービスで軽量化するとよいですね。
特にスマートフォンサイトや、WordPressのサイトも重くなりがちなので画像の軽量化は重要ですね。

2013/04/09追記

コメントにて、同じようなPNG画像を圧縮するWebサービス「Compress PNG Images Online」を教えて頂きました！透過PNGも可です。

使ってみた感じでは、TinyPNGよりも圧縮率が高いです。当記事で使ったサンプル画像はCompresspngでは5割近く小さくなりました。

ただ、パッと見はそんなに大差ありませんが、拡大して見るとシャドウの部分がこちらのcompresspngの方が少し粗かったです。

Compress PNG Images Onlineならアップロード後もっと小さくしたい場合に、右に出現する色を減少できる”Color”の所で調節する事が可能です。

(Compressボタンをクリックで圧縮後の画像をダウンロードできます。)