載せる画像の保存形式を比較[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がいいのかな…?

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

Random Posts

Galaxy S8:新しいホームボタンは、見えなくてもそこにある-押し込む感覚もバッチリ
貯まったGoogle Play クレジットで何買おう?おすすめの有料アプリ
iPhone Xを買いました。約3年ぶり2回目のiPhoneです。
【テーマは冬】第6回ホーム画面カスタマイズ定期コンテスト開催のお知らせ
格安SIMに変えて後悔する前に確認しておきたいこと
HTCの本社および工場を見学!目の前で作られているのは…あの端末!? #HTCグローバルレポーター
Galaxy S8:ロック解除は見るだけでOK!虹彩認証が思いのほか便利で楽しい
Photos Companion:スマホの画像を同じWi-Fi上にあるWindows 10のフォトアプリに取り込むアプリ
PHSの白ロムをスマホの子機として購入してみた
Tronsmart T6 レビュー:コンパクトながら360°全方位に広がる重低音が身体に響いてGood
Androidスマホの日本語入力アプリなに使ってますか? 1位はGoogle日本語入力、2位はATOK
KLWP/KWGTでYahoo!天気のRSSを使って天気情報を表示する方法
Tap Scroll:スワイプではなくタップでスクロールするボタンを表示するアプリ
世界最小LTEスマホJellyが日本の技適マーク取得へ! 代理店経由で日本語で購入も可能
通知キャンセラー:条件を作成してそれに合致した通知を自動消去してくれる便利アプリ