載せる画像の保存形式を比較[png-24, jpg-60, PNG Hat, PNGoo]

ブログだなんだで画像を扱うとき、その保存形式はちょっと気になっています。
昔は「写真などはjpgでベタ塗りのテキストなんかはgif」とも言われてましたが、今はpngを使う人も多いです。
png形式はキレイで、さらに透過も対応しているので大変都合いいのですが、少し容量が大きくなってしまいます。サーバに置くサイズ的には余裕なのですが、それを読み込む人の転送量が増えて、表示に時間がかかってしまっては困ります。

そんなわけで、1,2カ月前に意を決して「PNG Hat」というPhotoshopのプラグインを購入しました。
ここで紹介されてるのがわかりやすいです。

PNG画像をより美しく、より軽量に最適化するPhotoshopの機能拡張 -PNG Hat | コリス

比較してみよう

まずはベタッとしたフラットなイラストから
140604-1jpg
jpg(画質60)5.43KB

140604-1png
png 7.14KB

140604-1png oo
PNGoo 3.69KB

140604-1pnghat
PNG Hat 3.69KB

比較してみよう その2

今度はAndroidのステータスバーとイラストです。
140604-2jpg jpg(画質60)37.9KB

140604-2png PNG 195KB

140604-2pngoo PNGoo 74.1KB

140604-2pnghat PNG Hat 74.1KB

比較してみよう その3

もう少し写真が入っているやつで。
140604-3jpg jpg(画質60)24.3KB

140604-3png PNG 172KB

140604-3pngoo PNGoo 66.7KB

140604-3pnghat PNG 66.7KB

考える

うーん…。やはりpngは大きい。しかしPNG Hatで出力すると小さくなる。これは十分実用的。
…あれ?確かPNG Hatを買った($39.99)ときは、なんだか劣化した気がしたのと、Photoshopから使いにくくて止めたんだけど、それなりに使えるんじゃ?

以前はTinyPNGという、PNG画像をサイズ縮小してくれるウェブサイトを使っていました。

TinyPNG – Compress PNG images while preserving transparency

が、これはいちいちウェブ上にアップロードして、それをダウンロードしてから使う、というものでなかなか面倒でした。しかし無料。PNG Hatを買ったのは、このTinyPNGが面倒になったからでした。でも当初はその効果を実感できませんでした。

そして、探しました。それがPNGooです。
PNGooはTinyPNGと同じ仕組み(pngquant)を使ったもので、そのものをローカルにダウンロードして、オフラインで縮小作業ができるというものです。縮小してそのまま元画像に上書き、といったこともできます。

PNGooの使い方

pngquant — lossy PNG compressor

  1. ここのDOWNLOADからPNGooというのをクリックしてダウンロードします。
  2. PNGoo.exeを起動
  3. 140604-4
    縮小したい画像をウィンドウにドロップ。あとは「Go」ボタンをクリックすれば自動的に進みます。

簡単ですね。

まとめ

以前PNG Hatを使った時はなんか気に食わなかったのですが、今使ってみたらあれ?別にいいんじゃない?という気分に。まぁ$39.99払っちゃったしね。
ただ効果はあまり変わらないと思うので、$39.99出さなくてもPNGooで十分だと思いますよ。Photoshop以外で保存したものも使えるし。

んー、でもどうしよう?よっぽどベタ塗りなフラットな奴以外はjpgのほうがサイズ小さいし、画質もそんなに変わらない気がする…。jpgがいいのかな…?

まぁ、いろいろ試していくこととしましょうか。

この記事が気に入ったら
いいね!しよう
 シェアする  ツイートする
PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE