Flashで使う写真素材の画像フォーマット

Flash スライドショーなどで使う写真素材画像について調べました。
Photoshop→Flash連携での使用を想定して、画像の渡し方から、SWF パブリッシュ時の圧縮画質の見え方までを随時デスクトップキャプチャして画質比較してみました。
目視・主観でやっておりますので、そもそもの調査方法等、間違ってたら教えてください。

最終結論（5/22現在）

ファイルサイズを検討しつつ、「Web およびデバイス用に保存」で、「最適化」にチェックを入れて jpg 保存。

※このエントリは「Flash 写真スライドショーコンテンツ制作時の留意点」エントリの該当項目の調査検証となります。全容はそちらのエントリをご覧ください。

調査資料ダウンロードデータ

今回使ったデータ。今回の調査は下の各 PSD ファイルのレイヤーを比較することで確認いただけるようになっています。
PSD は PhotoshopCS3、FLA は FlashCS4 にて作成。ファイル容量が超重いのでそのつもりで！！

• 調査1の全画像をレイヤーで重ねた PSD データ
  →photoTest.psd(21,743KB)
• 調査2の全画像をレイヤーで重ねた PSD データ
  →photoTest_loader.psd(11,343KB)
• 調査3の全画像をレイヤーで重ねた PSD データ
  →photoTest_swf.psd(35,276KB)
• 調査3で使用した編集用 FLA データ
  →photoTest.fla(2,811KB)

Flash に渡す前時点での画質検証

まずは Flash に読み込ませる前の段階の画像についてバリエーションを用意してみました。元素材としてスライドショーコンテンツの背景に敷かれるような大き目の写真を用意しました。600万画素のデジカメで撮影した JPEG 画像を元ネタとして用意、これをそのまま Flash でロードさせるわけにもいかないので、Photoshop で開き、横1024px・縦768pxにリサイズします。
これを元画像として Photoshop を使って画像を用意します。

1. 「別名で保存」から jpg 保存。画質は「10（高：低圧縮率）」
   →photoTest_normal10.jpg(419KB)
2. 「別名で保存」から jpg 保存。画質は「7（中）」
   →photoTest_normal7.jpg(203KB)
3. 「別名で保存」から jpg 保存。画質は「1（低：高圧縮率）」
   →photoTest_normal1.jpg(74KB)
4. 「Web およびデバイス用に保存」から jpg 保存。画質は「85」
   →photoTest_web85.jpg(457KB)
5. 「Web およびデバイス用に保存」から jpg 保存。画質は「60」
   →photoTest_web60.jpg(231KB)
6. 「Web およびデバイス用に保存」から jpg 保存。画質は「10」
   →photoTest_web10.jpg(63KB)
7. 「別名で保存」から png 保存。
   →photoTest_normalpng.png(1602KB)
8. 「Web およびデバイス用に保存」から png 保存。PNG-8の256色
   →photoTest_png256.png(446KB)

ほとんど目視では画質の差がわからないものもあるかと思います。画像を拡大して比較しないとわからないものもあります。
詳細にその差異を調べる目的で、Photoshop 上で原画と各画像を「差の絶対値」で重ねたりしました。こうすれば原画と色が変わっていれば黒(#000000)以外になる。つまりグレーっぽいピクセルが多いほど原画とはかけ離れているということになります。
また、Photoshop 上でレイヤーで重ねた状態でヒストグラムを見ながら各写真の表示・非表示を切り替えることでも画質の変化量が分かります。

調査1での感想としては、
「別名で保存」のPNG保存した時（7）の画質は元画像そのままであり、その分ファイルサイズも大きい。
jpg画像（1,2,3,4,5,6）の場合、「別名で保存」でも「Web およびデバイス用に保存」でも圧縮後のファイルサイズを同じぐらいにすれば、画質もだいたい同じぐらいになる。2と5だと、空の階調が5の方がきれいだけど、ファイルサイズが厳密には5の方が30KBほど大きいのでそのせいかもしれない。1と4だとほどんど差は目視できない。なので保存の導線としては「別名で保存」でも「Web およびデバイス用に保存」でもどちらを選んでもよさそう。前者はADOBEマーカーやらサムネイルやらプレビューやらExif等のメタデータが入る（可能性がある）けれど、後者はそういうWEB表示に不要なデータが入らないからちょっと軽くなる。もちろん圧縮率は画質・ファイルサイズに影響する。今回の場合でいけば空のようなグラデーションさえなければ中程度（上記2や5）でも実用でいけそうに思える。実案件では写真の内容や質、コンテンツにおける写真を見せることへのウェイトなどに判断が委ねられる。
「Web およびデバイス用に保存」のPNG256色（8）はそもそも256色な時点で写真には向かない。ベタ塗りのグラフィックには最適なので色数を調整しつつGIFの代わりに使うと良い。

ここまでの結論として

1. swf に外部読み込みさせるための画像であれば、ファイルサイズがそのままローディング時間に影響するのでフルカラーのpngは不適。jpg形式でファイルサイズを検討しつつできるだけ高画質で保存する。画像の荒れ（ジャギ）は写真の内容にも依存するので、写真点数的に可能であれば目視で個別圧縮するといいかも。→調査2へ
2. Flash オーサリング環境（IDE）上のライブラリウィンドウに読み込む、つまりシンボルとしての利用、タイムライン上での写真画像利用をする場合は、Flash IDE 側で個別に画像圧縮をかけることができるので、それ以前の段階ではできるだけ原画のまま読み込むほうがよい。Photoshop で編集やリサイズした場合は「別名で保存」でPNG保存する。→調査3へ

調査2：外部読み込みからswf上での表示

次に、調査1での結果を踏まえ、Flash スライドショーで多用されるであろう「外部から画像を読み込んで swf 上で表示」させた最終成果時の各画像の表示を比べる。
使う画像は、実際の使用を想定してjpg画質10(上記調査1)、画質7(上記調査2)の2ファイルと、ファイル容量は大きいけど元画像に一番近いpng画像(上記調査7)の計3ファイルを使うとする。

その前に、
Flash のパブリッシュ設定の「JPEG画質」設定は、外部読み込み画像の画質にも影響するでしょうか？
答えは影響しないです。たとえFlash でJPEG画質を「0」に設定しても、外部読み込み画像は画像ファイルそのままの画質、無圧縮で表示されます。

では調査結果：

1. photoTest_normal10.jpg(419KB)を SWF から外部読み込みしたものをキャプチャ
2. photoTest_normal7.jpg(203KB)を SWF から外部読み込みしたものをキャプチャ
3. photoTest_normalpng.png(1602KB)を SWF から外部読み込みしたものをキャプチャ

感想としては、1ぐらいが容量・画質的に良い感じに思える。よって、大きめの写真を外部読み込みする場合は、ファイル容量を意識しつつ極力高画質なJPEG形式がいいと思いました。

調査3：Flash(swf) 上での圧縮調査

次に Flash(swf) 上での画像圧縮による画質の変化を調べてみる。調査1で、Flash シンボルとして画像を読み込ませる場合はpngがいいと判断したけれど、そのpngがswf上でどう圧縮されるかを見る。
ついでにjpg画像をシンボルにしたらどうなるかも一応調べてみた。

上の実験でできた photoTest_normalpng.png（原画クオリティと同等） と photoText_normaljpg7（jpeg画質7：軽量かつ実用できる元画像を想定）, photoText_normaljpg10（jpeg画質10：jpegでの最高画質の想定） の計3枚を Flash IDE のライブラリに読み込み、ビットマッププロパティの画質を以下のように比較検証してみた。

1. png画像を Flash ビットマッププロパティ「（写真画質）100」にてパブリッシュ
   →photoTest_png100.swf(686KB) をキャプチャ
2. png画像を Flash ビットマッププロパティ「80」にてパブリッシュ
   →photoTest_png80.swf(202KB) をキャプチャ
3. png画像を Flash ビットマッププロパティ「40」にてパブリッシュ
   →photoTest_png40.swf(66KB) をキャプチャ
4. jpg画質7を Flash ビットマッププロパティ「100」にてパブリッシュ
   →photoTest_jpg7_100.swf(424KB) をキャプチャ
5. jpg画質7を Flash ビットマッププロパティ「80」にてパブリッシュ
   →photoTest_jpg7_80.swf(166KB) をキャプチャ
6. jpg画質7を Flash ビットマッププロパティ「40」にてパブリッシュ
   →photoTest_jpg7_40.swf(68KB) をキャプチャ
7. jpg画質10を Flash ビットマッププロパティ「100」にてパブリッシュ
   →photoTest_jpg10_100.swf(590KB) をキャプチャ
8. jpg画質10を Flash ビットマッププロパティ「80」にてパブリッシュ
   →photoTest_jpg10_80.swf(210KB) をキャプチャ
9. jpg画質10を Flash ビットマッププロパティ「40」にてパブリッシュ
   →photoTest_jpg10_40.swf(67KB) をキャプチャ
10. png画像を Flash ビットマッププロパティ「劣化なし」にてパブリッシュ
    →photoTest_png_nocompress.swf(2111KB) をキャプチャ
11. jpg画質7を Flash ビットマッププロパティ「劣化なし」にてパブリッシュ
    →photoTest_jpg7_nocompress.swf(1807KB) をキャプチャ
12. png画像を Flash ビットマッププロパティ「100」「スムージング」にチェックにてパブリッシュ
    →photoTest_smoothing.swf(686KB) をキャプチャ
13. png画像を Flash ビットマッププロパティ「劣化なし」にて右下に0.5pxずつ移動させてパブリッシュ
    →photoTest_png100_05move.swf(686KB) をキャプチャ
14. ※調査4参考

まず11,12の「劣化なし(PNG/GIF)」での書き出しはそれぞれ写真画質(JPEG)書き出しした1,4とそれほどヒストグラム的にも変わらないわりには、ファイルサイズが3～4倍になってしまうので不適と判断。
次に、Flash のデフォルト書き出し圧縮設定は画質80ですね。これを100にすると多少キレイになるけれど、ファイルサイズの増加が結構大きいので、画質を見る感じでは80でもいいかなと思った。
スムージングの有無の比較（1と12）ではキャプチャした画像のヒストグラムが一致したので、写真を拡大縮小しないのであればスムージングの効果はなく、同一の画質になる。あくまで拡大縮小時のピクセルのスムージングに徹しているということが確認できた。

調査3での結論として
Flash IDE に PNGの状態で読み込んで ビットマッププロパティ：写真画質(JPEG)の80ぐらいでいいかなと。

調査4：外部読み込みと、シンボル埋め込みはどちらがキレイか？

これが気になるところ。調査3で作った PSD ファイルに、調査2-1の画像をインポートし、調査3-7と画質・ヒストグラム比較してみると

• 調査2-1のほうが、原画のヒストグラムに近い。つまり原画に忠実。
• ファイルサイズを比較すると、調査2-1は swf(21KB)+jpg(590KB)=611KB、一方調査3-7は swf(590KB)となった。

個人的には外部読み込みでいいんじゃないかと思う。

まとめ

Flash スライドショーコンテンツで大判の写真を使うのであれば、元写真を Photoshop でリサイズするのであれば、「別名で保存」でも「Web およびデバイス用に保存」のどちらでもいいから（※下記参照）、できるだけキレイな画質で JPEG 画像化して外部読み込みで表示させる。
という、なんだか当たり前のような結論に達しました。

追記：【別名で保存】【Web用に保存】

にじにじさんよりコメントいただきました。
「Photoshopの【別名で保存】【Web用に保存】の違いは、前者はADOBEマーカーやらサムネイルやらプレビューやらExif等のメタデータが入る（可能性がある）けれど、後者はそういうWEB表示に不要なデータが入らない、じゃ無いかな？
実データのバイナリが同じなら、WEB用に保存の方がデータ容量が小さくなるよ。」

ということで、そういえばjpg書き出しにおいて、それぞれの最高設定で書き出すのをやっていなかたｔのでやってみました。

1. 「別名で保存」から jpg 保存。画質は「12（高：低圧縮率）」
   →photoTest_normal12.jpg(812KB)
2. 「Web およびデバイス用に保存」から jpg 保存。画質は「100」
   →photoTest_web100.jpg(784KB)
3. 「Web およびデバイス用に保存」で、「最適化」にチェックを入れて jpg 保存。画質は「100」
   →photoTest_web100_saitekika.jpg(770KB)

上記3画像をレイヤーで比較できる PSD ファイル（photoTest_jpgHQ.psd(11,593KB)）重いので注意！

原画と上記の3画像を比較した結果、肉眼ではわからないものの、1,2,3とも原画とはちょっとだけヒストグラム上で変化が見られる。1と2はヒストグラム上で全く同一というわけではなかったけれど、これももはや肉眼で判断できる差ではないので、コメント頂いたように、Flash 用に同程度の画質で書き出す場合は無駄なデータが混ざっていない「Web用で書き出し」をしたほうが良い。さらに、2と3は「Web用で書き出し」設定画面上の「最適化」にチェックを入れたか入れてないかの違いだけど、ヒストグラムは完全一致した。つまり全く同じ画質。なので「最適化」チェックを入れておいたほうがファイルサイズが軽くなるので良い。