PNGとJPEG…こんなときはどっち? Web用画像の書き出し、比べてみました!

画像の書き出しについて、実際に画質やファイルサイズにどれくらい差が出るのか
いろいろ比較してみました。

今回は、

透過を含まない大きな写真の書き出し
透過を含まない小さな写真の書き出し
透過を含み、且つCSS Spriteで使用するための画像の書き出し

の3つについて検証してみました!

PNGとGIFとJPEG…Web用画像の書き出し、どんな風に​使い分けていますか?[2011年7月現在]のつづきです。

コメントやtwitterなどでいろいろ反応を頂きました。
ありがとうございました☆
結構同じ使い分け方の方もいらっしゃってほっとしています…!

今日はこのあいだのつづきで、
自分の中でもやーっとしていた使い分けの部分を実際に比べてみました!

今回は、

  1. 透過を含まない大きな写真の書き出し
  2. 透過を含まない小さな写真の書き出し
  3. 透過を含み、且つCSS Spriteで使用するための画像の書き出し

の3つをチェックしてみました!

チェック1:透過を含まない写真の書き出し(大きいサイズ:1200px × 1600px)について最適な書き出し形式はどれ?

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。

PNGはPNG-24で書き出します。
(透過を含まないものなのでフルカラー使用可/透過不可のPNG-24を選択)

JPEGは80%の画質で書き出します。

チェック1-1

それらの画質とファイルサイズをくらべてみました。

チェック1-2

ImageOptimなどの画像最適化ツールを使い、圧縮してファイルサイズを小さくしたたものくらべてみました

書き出すにあたって

チェック1には以下の東京タワーの画像を使用します。

RAWデータをPhotoshopで読み込み、PSDで保存しました。

PhososhopではこのPSDをそのまま書き出します。
FireworksではPhotoshopと条件を揃えるためにPSDの状態で読み込み、書き出します。

tw_s_fw_opt

それぞれ書き出す

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。

PNGは透過を含まないものなので今回はフルカラー透過なしのPNG-24を選択して書き出します。
JPEGは80%の画質で書き出します。

Fireworksで、画質80%のJPEGで 書き出し

tw_fw_書き出し_jpg

書き出し後ファイルサイズ:340 KB(338,376 バイト)

Fireworksで、PNG-24で 書き出し

tw_fw_書き出し_png

書き出し後ファイルサイズ:3.4 MB(3,393,649 バイト)

Photoshopで、画質80%のJPEGで書き出し

tw_ps_書き出し_jpg

書き出し後ファイルサイズ:971 KB(970,497 バイト)

Photoshopで、PNG-24 書き出し

tw_ps_書き出し_png

書き出し後ファイルサイズ:3.4 MB(3,440,473 バイト)

チェック1-1 そのまま比べてみる

大きな画像なので、並べて比較しやすいよう、一部を切り出しました。
(画像をクリックすると実寸大の画像を表示します)

※正しく比較できるよう、これ以上の画像の劣化が発生しないように
切り出した画像はJPEGも含めてPNGで書き出しています。

tw_fw_jpg_up tw_fw_png_up tw_ps_jpg_up tw_ps_png_up
fireworks JPEG(80%)
340 KB
[338,376 バイト]
fireworks PNG-24
3.4 MB
[3,393,649 バイト]
Photoshop JPEG(80%)
971 KB
[970,497 バイト]
Photoshop PNG-24
3.4 MB
[3,440,473 バイト]

くらべてみて

Fireworksのほうが圧縮率が高い

JPEGについて、Fireworks,Photoshop共に同じ80%で書き出しましたが、
fireworksのほうがかなりファイルが小さくなっています。
その分やや画質が荒くなっています。

tw_fw_jpg_up tw_ps_jpg_up
fireworks JPEG(80%)
340 KB
[338,376 バイト]
fireworks JPEG(92%)
995 KB
[994,987 バイト]
Photoshop JPEG(80%)
971 KB
[970,497 バイト]

今回の画像では、Fireworksで画質を92%として書き出しすると、
Photoshopに近しい画質・ファイルサイズになりました。

Photoshop JPEG(80%)&Fireworks JPEG(92%)と
Firerworks PNG-24&Photoshop PNG-24では、
ファイルサイズが3倍ほど違うが、
等倍で通常見る分には見た目の美しさに3倍もの差は感じないように感じられました。

チェック1-2 ImageOptimで最適化して比べる

ImageOptimとは、PNGやJPEGの様々なメタ情報を排除、圧縮することができるソフトです。
起動したら最適化したいファイルを画面にドラッグするだけ。
書き出し後のPNGファイルもちっちゃくなります。

CSS Nite LP14の松田さんのセッション「Fireworks PNGの特性を活かした、”書き出し”をしない効率的ワークフロ」で紹介されていたアレです☆

詳しくはこちらなどもどうぞ:JPEG/PNGのサイズをぎりぎりまで削減する「ImageOptim」

(ImageOptimはMac用ですので、Windowsな方はPNGGauntletをどうぞ♪)

ImageOptimを使って、ファイル中の不要なデータを削ってデータサイズを小さくしてみます。
(不要な部分を削るだけなので画質は変わりません。)

tw_opt

上の4つがチェック1のファイルです(下の4つはチェック2のファイル)

圧縮結果

tw_fw_jpg_up tw_fw_png_up tw_ps_jpg_up tw_ps_png_up
fireworks JPEG(80%)
340 KB

[338,376 バイト]
fireworks PNG-24
3.4 MB
[3,393,649 バイト]
Photoshop JPEG(80%)
971 KB
[970,497 バイト]
Photoshop PNG-24
3.4 MB
[3,440,473 バイト]

くらべてみて

すべてにおいてファイルサイズの減少が見られたものの、
PNG-24がJPEGに匹敵するファイルサイズになるような爆発的な効果はありませんでした。

チェック1のまとめ

完璧な見た目を優先する必要があるならPNG。

ある程度きれいに見えれば問題ないレベルであれば
ファイルサイズが1/3以下のJPEGが優位。

チェック2:透過を含まない写真の書き出し(小さいサイズ:240px × 340px)について最適な書き出し形式はなにか

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。
PNGはPNG-24で書き出します。(透過を含まないものなのでフルカラー使用可/透過不可のPNG-24を選択)
JPEGは80%の画質で書き出します。

チェック2-1

それらをそのまま比べてみます。

チェック2-2

ImageOptimなどの画像最適化ツールを使い、さらに圧縮したものを比べてみます。

チェック2にもチェック1と同様、以下の東京タワーの画像を使用します。

RAWデータをPhotoshopで読み込み、PSDで保存しました。
PhososhopではこのPSDをそのまま書き出します。
FireworksではPhotoshopと条件を揃えるためにPSDの状態で読み込み、書き出します。

tw_s_fw_opt

それぞれ書き出す

FireworksとPhotoshopでそれぞれJPEGとPNGを書き出します。
PNGは透過を含まないものなので今回はフルカラー透過なしのPNG-24を選択して書き出します。
JPEGは80%の画質で書き出します。

Fireworksで、画質80%のJPEGで書き出し

tw_s__fw_書き出し_jpg

書き出し後ファイルサイズ:25 KB(24,357 バイト」

Fireworksで、PNG-24で書き出し

tw_s__fw_書き出し_png

書き出し後ファイルサイズ:131 KB(126,996 バイト)

Photoshopで、画質80%のJPEGで書き出し

tw_s_ps_書き出し_jpg

書き出し後ファイルサイズ:49 KB(45,591 バイト)

PhotoshopでPNG-24で書き出し

tw_s_ps_書き出し_png

書き出し後ファイルサイズ:127 KB(126,689 バイト)

チェック2-1 そのまま比べる

tw_s_fw_jpg_up tw_s_fw_png_up tw_s_ps_jpg_up tw_s_ps_png_up
fireworks JPEG(80%)
25 KB
[24,357 バイト]
fireworks PNG
131 KB
[126,996 バイト]
Photoshop JPEG
49 KB
[45,591 バイト]
Photoshop PNG
127 KB
[126,689 バイト]
tw_s_fw_opt tw_s_fw_opt
fireworks JPEG(80%)
25 KB

(24,357 バイト)
fireworks PNG
131 KB
(126,996 バイト)
tw_s_ps_opt tw_s_ps_opt
Photoshop JPEG
49 KB
(45,591 バイト)
Photoshop PNG
127 KB
(126,689 バイト)

くらべてみて

検証1−1同様、同じ80%の画質で書き出したが、ファイル容量はFireworksのほうが小さい。

4つの画像の見た目にファイルサイズほどのものを感じなかった。

チェック2-2 ImageOptimで最適化して比べる

ImageOptimを使って、ファイル中の不要なデータを削ってデータサイズを小さくしてみます。
(不要な部分を削るだけなので画質は変わりません。)

tw_opt

下の4つがチェック1のファイルです(上の4つはチェック1のファイル)

圧縮結果

tw_s_fw_jpg_up tw_s_fw_png_up tw_s_ps_jpg_up tw_s_ps_png_up
fireworks JPEG(80%)
25 KB

[24,357 バイト]
fireworks PNG
131 KB
[126,996 バイト]
Photoshop JPEG
49 KB
[45,591 バイト]
Photoshop PNG
127 KB
[126,689 バイト]
tw_s_fw_opt tw_s_fw_opt
fireworks JPEG(80%)
25 KB
(24,357 バイト)
fireworks PNG
131 KB
(126,996 バイト)
tw_s_ps_opt tw_s_ps_opt
Photoshop JPEG
49 KB
(45,591 バイト)
Photoshop PNG
127 KB
(126,689 バイト)

くらべてみて

チェック1−2同様、すべてにおいてファイルサイズの減少が見られたものの、

PNG-24がJPEGに匹敵するファイルサイズになるような爆発的な効果はありませんでした。

チェック2のまとめ

チェック1と同じく、どうしても完璧な見た目を求めるならPNGだと思うのですが、
このような写真であれば見た目にほとんど差がない印象をうけました。

こちらも容量が1/5以下のJPEGが優位?

チェック3:透過を含む画材の書き出し

用途からPNG一択ではあるのですが、
PNG-8とPNG-32で見た目、容量にどれくらい違いが出るか
PHOTOSTOCKERで実際に使っているCSSSprite用画材で検証してみました。

こんな感じでいろんなパーツを1つのファイルにまとめています。

bgImage_00_opt

わかりやすいように背景を黒にしてみました。

000

(このファイルはちょっと作り方が悪くて無駄なスペースがあるのですが…そこは目をつぶってください><)

チェック3-1 そのまま比較する

■Fireworks作業データ(パスとかフィルタの情報とか入った状態)

→1.9 MB(1,866,582 バイト)

■FireworksでPNG-32で書き出し

82 KB(80,140 バイト)

■FireworksでPNG-8で書き出し

41 KB(37,317 バイト)

PNG-8とPNG-32の見た目の差

似たような色のパーツが多いので256色で足りるかなーと思ったのですが、以外と色数使っていました><
PNG-8ではよく見るとボタンのグラデーション部分がすこしだけ荒くなってしまいました。

(あとで拡大画像載せます><)

くらべてみて

PNG-8とPNG-32でファイルサイズが2倍になっているので
できる限り256色の範囲で作った方がファイルサイズ的にはよさそう。

ただ、今回の場合はこれだけのパーツ数で82KBなのでPNG-32でも許容範囲内ではないかと思いました。

チェック3-2 ImageOptimで最適化して比べる

これまで同様、ImageOptimで最適化してさらにデータをスリムにしてみます。

注)作業用ファイルも最適化していますが、最適化した場合作業データはすべて失われます!かならずバックアップして行ってくださいね

bg_opt

■Fireworks生データの状態

→1.9 MB(1,866,582 バイト)→61 KB(59,578 バイト)

■FireworksでPNG-32で書き出し

→82 KB(80,140 バイト)→61 KB(59,581 バイト)

■FireworksでPNG-8で書き出し

→41 KB(37,317 バイト)→33 KB(31,546 バイト)

くらべてみて

PNG-24ではさほど効果が得られませんでしたが、
透過を含むPNG-8、PNG-32はかなり効果がありました。(全体からの%での判断)

書き出しをしていないFIreworksの作業データも
PNG-32で書き出したものと同じくらい(むしろ少し小さい)圧縮されました。

チェック3 まとめ

PNG-32でも写真等を含まない今回のようなデータであれば、
カンバスのサイズが大きくてもファイルサイズを押さえることができることがわかりました。

また、透過を含むファイルはImageOptimの効果も高いようです。(全体からの%での判断)

すべてを終えてのまとめ

ブロードバンドが普及してきて、
昔ほど1KBとの戦いをする機会はなくなってきたとはいえ
スマートフォンからの接続というのも増えつづけていますし、
できるかぎりファイルの転送量は減らしてあげたいところですよね。

ほかにもgoogleが検索結果の表示順位を決定するアルゴリズムに
サイトの応答速度を取り入れているといったこともあるようなので、SEO対策的にも重要。

その点をふまえながら今回の結果をあらためて見ると
まだまだJPEGが有効な場合もかなり多くて
使い分けが大事だなと改めて思いました。

やっぱりこれからも画質とファイルサイズとにらめっこしながら
用途に合わせて使い分けていく必要がありそうです><

透過を含むPNGはImageOptimなどを使うとかなり恩恵が受けられるので絶対に使っていきたいところ。

今のところ、最近作ったサイトでは

Fireworksで画材作る→全部書き出す→書き出した画像のフォルダ内の画像をいっぺんにImageOptimにドラッグアンドドロップ→アップロード

という感じでやっています。

修正が入ったパーツは、時間があれば個別にImageOptimにかけてあげてアップロードしてます。

いろんな状況での向き不向きをきちんと頭に入れて書き出しをして
できるだけ手間をかけずにファイルサイズダイエットを身につけていきたいです☆

PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか?[2011年7月現在]

みなさん、Web用の画像の書き出しって最近どう使い分けしていますか??
自分の状況や知っていることなどをまとめてみたのですが、
私はこうだよ、とかこれは間違ってるよ!などありましたら、よかったらご意見ください!!^^

みなさん、Web用の画像の書き出しって最近どう使い分けしていますか??

私がWebデザインをはじめたころはIE6が全盛期だったこともあり、
あまり透過PNGを使うという選択肢がなかったのですが、
jsなどでコーディング時に対応できる手法が出てきた頃から
透過PNGを多用するようになりました。
(ちなみにDD_belatedPNG.jsというのをよく使っています)

また、昔は一部のガラケーでGIFに対応していなかったり、
PNGに対応していなかったり…なんてこともありましたよね。

それで自動的に選択肢が決まっていたり…など。

いろいろと状況が変わった今、
改めて画像の書き出し形式について考えてみました。

自分の状況や知っていることなどをまとめてみたのですが、
間違っていることや古い認識もあったりするかもしれないので
これは間違ってるよ!などありましたらご指摘いただけますと幸いです><

それぞれの画像形式の特徴など

PNG 特徴 PNG-8、PNG-24、PNG-32の3種類がある。
フルカラーに対応。(PNG-24/PNG-32)
アルファチャンネル使用可。透明度を指定した透過画像を作成することができる。(PNG-32)
可逆圧縮式。
ファイル単体でのアニメーションの作成はできない。
PNG-8で同条件で書き出した場合、GIFに比べ容量を小さくできる。
向き アイコンやロゴなど比較的解像度の小さな写真など
不向き 古い機種にも対応させなければいけないガラケーサイト:一部古い携帯電話ではPNGをサポートしていないものがある
IE6に対応必須の場合:
IE6以前の古いブラウザでPNG8以上の透過PNGに対応していない(※jsなどでコーディング時に対応可能)
GIF 特徴 アニメーションを作る場合や
背景を透過させたい時に使用されることが多い。
1色の透過はできるがアルファチャンネルは使用できない。
1つのファイル中で使うことができるのは256色まで。
向き アニメーションGIF作成時
PNGが使えない状況でのベタ面の多いイラスト、ロゴなど
不向き サイズの大きな写真等を含む画像の書き出し時
色数か256色以上使われている写真等の書き出し時
JPEG 特徴 大きな画像や色数の多い写真などを使用する際に使用することが多い。
画像圧縮形式(不可逆圧縮)。
圧縮率の変更ができるため、データサイズを調整することが可能。
圧縮率を上げすぎるとデータサイズは小さくなるが画質は劣化する。
向き 大きな写真など階調の細かい色数の多い画像
不向き アイコンやロゴなどの輪郭がはっきりしているもの(PNGやGIFのほうが優れているため)

PNGそれぞれの特徴と違い

PNG-8 8ビットカラー(256色)まで書き出し。透明色の指定可。IE6でもjsなどでの対応なく透過できる。
PNG-24 24ビットカラー(フルカラー)書き出し。透明色の指定不可。
PNG-32 24ビットカラー(フルカラー)にアルファチャンネル情報(8ビット)を付与した形式。
透明度情報を持つので画像の容量が大きくなる。
IE6で透過させたい場合、jsなどで対応が必要

※ご指摘いただいてPNG-24の部分を修正しました。
※間違いがあればご指摘いただけますと幸いです。

私の使い分けの現状

PNG-8 透明化があるロゴやアイコンで色数を256色以下に抑えられるもの
PNG-24 色数が256色を超える画像
透明化の必要がなく使用している色数が非常に少ないロゴやアイコン
(PNG-8よりPNG-24のほうが容量が小さくなるが場合がある)
PNG-32 デザイン的にどうしても透過が必要な色数の多い写真など
半透明の透過の表現が必要なもの
GIF 形式指定がある場合のバナー
アニメーションGIFバナー
ガラケーサイト用のロゴやアイコン
JPEG 写真全般。
背景に透過の必要がないもの
バナー(容量を押さえるためにFireworksでJPEGマスクを使って文字情報の部分だけキレイに書き出したりしています)

Fireworksでプレビューしながら
できるだけ一番容量が小さくてきれいになるものを選んで書き出しているので、
明確にきっちりこう!とわけている訳ではないのですが、
大きくわけると大体こんな傾向になっているような気がします。

みなさんはどのように使い分けていらっしゃいますか??

こだわりなどありましたら良かったら教えてください!!

しかしこんな風に分類してみたものの、
こだわってPNGやJPEGのいろんな圧縮テクニックを使って
ひとつひとつこだわって調整すると、JPEGがいいと思っていたものが
PNGでもっと軽く書き出せたりとかいろいろあったりしますよね…。
(私は、現状そこまでできていません…;;)

うーん。書き出し、未だに奥深い><

☆追記☆

いろんな方にご意見をいただきました。
ありがとうございます!
私と似たような状況の方や、PNG一択という方、まだPNGに抵抗があるという方、さまざまいらっしゃいました。

このあたりは答えがないのでホントに奥が深いですね。

自分でもまだ答えが出せていないので、
後日いろいろ書き出し比べてきちんと検証して新たに記事にしてみたいと思います。

Optimus brightのTouch&Tryイベントに参加させていただきました!

Optimus brightの製品発表イベントが福岡で行われるとのことで
お誘いいただいてイベントにお邪魔させていただきました♪

Optimus brightのTouch&Tryイベントに参加させていただきました☆

↑私のガラケーとOptimus bright(笑

場所は国体道路沿いのCherry。
かわいいお店です☆

こういうイベントに参加するのははじめてなのでちょっとドキドキします…。

若い女の子向けのイベントだったようで、
会場に着くと、モデルさんのような女の子であふれていました…!!!

テレビに出ている子もいたり…!

明らかに5個以上下であろう女の子たちに囲まれてイベントスタート。

場違い感が漂っていましたが
強い心で気にしない…!!

イベントは
・Optimus brightの製品紹介
・INGNIのお洋服コーディネート対決
の2本立てで行われました。

なるほど、それでみんなこんなオシャレでかわいいのか…!!!
(ここでさらに場違い感を自覚するも耐えるw

Optimus brightの話

で、まずはOptimus brightの製品紹介だったのですが、
『明るい・軽い・最初からカバーが3つついてくる!』
というのがウリとのこと。

Optimus brightホームページ

いろいろと説明を受けながら
一人一台端末をお借りしていろいろいじり倒します。

ディスプレイの明るさ

外でディスプレイを見比べてみたり…。
「世界最高輝度のディスプレイ」らしいです。

確かに明るい。

CM通り炎天下でも見やすかったです。

これだけ明るくて視野角も広いので
みんなで動画とか見れたりしますよ!との説明だったのですが、

明るすぎて丸見えすぎると電車とかは逆にちょっと困るな…と思ってしまいました。

が、ホーム画面のメニューのショートカットから簡単に明るさ調整できました。

おぉ、ちゃんと考えられていた…!!!w

見せたいときと見せたくないときの調整が
簡単にできるかどうかは個人的にとても大事なポイントなのです。

薄さとか軽さ

持ちやすい大きさでした。
重さも軽くてやや小さめで、形もまるっこく、
片手で操作しやすかったです。

女の人向けで開発されたらしく、
女の人の手のサイズにはとても扱いやすい大きさかも。

デザインとかカバーとか

気分で選べるようにーと最初からカバーが3個ついてます。

カバーというか、リアカバーを取り替えられる感じ??
カバーなしでは使えません。(外したら機械的なアレが丸見えなので)

最初から3個ついてるので、
1個は思い切りデコって、会社用と休日用とかで使い分けできそうだなーと思いました。

買うと以外と高いので最初からついてるのはうれしいかも。

そのほかいろいろ

裏返すと音が切れたりアラームとめたりできるとか、
ギャラリーで画像を見ている時本体の横を指でカツカツ叩くと画像が前後に動くとか、

爪が長いとフリックしにくかったりするので、
画面さわらないでいろいろできるところはホント女の子向けだなーと思いました。

んで、ガンガンアプリで遊ぶ

時間内、いろいろさわってみる時間があって、
写真を撮って、入っているアプリで加工して遊んでみました。

さわった中で面白かったのをいくつか。

PhotoFunia

びっくり!これ無料なのね…!
手軽にサクサク加工できました。
スマホ買ったら絶対入れよう。

PicsIn

これも無料だった…!
写真がいろいろ加工できて面白いのはもちろんのこと、
kaleidoscopeってメニューがあって、
画面をタッチしてドラッグするとおもしろい幾何学模様が簡単にかけるのが
なんかすごく楽しかったw

レトロカメラ

これは無料版と有料版があるみたい。
無料版は保存した画像にロゴが入るそうです。

こんな感じでガラケーもなんかかっこよく…w

ほかにも結構知らなかったアプリが入っていました。
このあたりのアプリ楽しそう…!

休憩を挟んで後半戦へ。

おやついただきました。もぐもぐ。

ファッションコーディネートの話

テーブルごとに好みの携帯のカバーの色を決めて、
いろいろと用意された服の中からそのカバーに合うコーディネートを作る、というものでした。

モデルになる子をテーブルごとにひとり決めて
その子がお洋服を着てくれます。

私たちのテーブルはとっても色白で細いかわいーーー女の子を
モデルさんにチョイス☆

とてもセンスのいい女の子たちがたくさんいて
ガンガンコーディネートしていってくれました。

お洋服はすごくいろいろ用意されていました!

INGNIのものみたいです。

INGNIのホームページ↓

PCサイト

モバイルサイト

テーブルごとに1つ、計4コーディネート完成。

どれもとーーーーってもかわいかったです!

てかみんなスタイルいい…!!!><

セール期間中ということもあり、
洋服欲しい熱が高まるコーナーでしたw

そんな感じであっという間にイベントも終わって解散☆

一緒に行ってくれた友達と
その足でドコモショップ行ってスマホ見まくって帰ってきましたw

パソコンとiPadをいつも持ち歩いているので、
ふつうの携帯でも事足りていたのですが、
写真をその場でアプリで加工してtwitterとかにアップできるのはやっぱいいなーと思いました。

まわりのIT系じゃない友達も結構スマホに変えはじめたので
私もいい加減スマホにしようかなぁー…と思った土曜日の午後でした。