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


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にかけてあげてアップロードしてます。

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


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト