「PNG」タグアーカイブ

ウェブテクノロジ開発部の西田です。

この記事では、主にモバイル機器向けFlashコンテンツを開発されている方々に向けて、Flash Playerでのメモリ使用量とSWFファイルのファイルサイズを抑える方法についてご紹介します。
同時に、Flashコンテンツに画像を組み込む際の注意点についても紹介します。

現在、日本で普及しているほとんどのフィーチャーフォン（いわゆるガラケー）にはFlash Liteが搭載されており、Androidでも2.2以降からはFlashが搭載されています。ソーシャルゲームをはじめ、グラフィカルでリッチなFlashコンテンツが日々増えてきていますが、それにともないSWFファイルのファイルサイズやFlash Playerのメモリ使用量が問題になってくることがしばしばあるのではないでしょうか。

1. Flash Playerのメモリ使用量が1/3になる！

まずは同じくらいのファイルサイズの画像（JPEG、PNG）を組み込んだSWFファイルを作成し、SWFファイルのファイルサイズとFlash Player(エミュレーター)のメモリ使用量にどれくらいの違いが出るかを比較してみました。
※画像はクリック・タップすると拡大されます。

• 
  JPEG
• 
  PNG-8(透過なし)
• 
  PNG-8(透過あり)

表1. JPEG/PNGのメモリ使用量・SWFファイルサイズの比較

• 計測環境:Flash Lite3.0　色深度:32bit　ディスプレイサイズ:240×320
• このページで表示している画像は実際に使った画像を縮小して表示しています。各画像のリンク先が、この実験で使用した元画像です。

図1. JPEG/PNGのメモリ使用量・SWFファイルサイズの比較グラフ

2. まずは画像フォーマットのおさらいから

Flashやインターネットなどでは主にJPEG、GIF、PNGといった画像フォーマットが使われています。
ここでは、それぞれの画像フォーマットについておさらいをしておきましょう。

表2. JPEG、GIF、PNGの特徴

それぞれの画像フォーマットの長所と短所も簡単にまとめておきましょう。

表3. JPEG、GIF、PNGの長所と短所

一般的には、写真などはJPEG、画像自体でアニメーションさせたいときはGIF、ロゴやボタンなどはGIFかPNGフォーマットが適しています。

3. ではモバイル機器向けのFlashでは何を使う？

それぞれの画像フォーマットには得意・不得意があるので、画像の使用用途や目的に応じて適切な画像フォーマットを選択する必要があります。
実際にFlash内に画像を組み込み、SWFファイルのメモリ使用量とファイルサイズを見てみましょう。

表4. 各画像フォーマット毎のSWFファイルサイズ・メモリ使用量の比較

フォーマット	JPEG(画質 70)	フォーマット	GIF
画像サイズ	512×512pixel	画像サイズ	512×512pixel
画像ファイルサイズ	23,455 byte	画像ファイルサイズ	55,901 byte
SWFファイルサイズ	23,549 byte	SWFファイルサイズ	49,743 byte
メモリ使用量	1,129KB	メモリ使用量	388 KB

フォーマット	PNG-24	フォーマット	PNG-8
画像サイズ	512×512pixel	画像サイズ	512×512pixel
画像ファイルサイズ	142,427 byte	画像ファイルサイズ	51,503 byte
SWFファイルサイズ	165,015 byte	SWFファイルサイズ	49,743 byte
メモリ使用量	1,267KB	メモリ使用量	388 KB

• 計測環境 Flash Lite3.0　色深度:32bit　ディスプレイサイズ:240×320
• 表示している画像は実際に使った画像を縮小しています。各画像のリンク先が、この実験で使用した元画像です。

画素数が大きくフルカラーで扱いたい画像の場合は、圧縮率を調整できるJPEGを使うとSWFファイルのサイズを抑えることができます。しかしながら、アニメ調の画像では、やはり画質が劣化してしまいメモリ使用量も大きくなります。

フルカラーにこだわらなくてもよい場合は、GIFかPNG-8を使えばメモリ使用量とSWFファイルサイズを抑えることができます。ただし、この場合は減色する際の品質が重要となってきます。「OPTPiX imésta」を使えば高い品質で減色することが可能です。

また、GIFでは単色での透過しかできずFlash内でそのままGIFアニメーションを使うこともできないため、色数を256色まで制限できる場合は、メモリ使用量とSWFファイルサイズを抑え、綺麗に透過させるにはPNG-8が有効です。

4. 画像圧縮設定にご注意を！

画像フォーマットや画質を適切に選択していても、Adobe Flash CSにPNGやGIFなどの画像を組み込んだ際に、自動的にJPEG圧縮されてしまうことがあります。ついつい陥りやすい問題ですので注意が必要です。

Adobe Flash CSの「ライブラリ」からアイテムを選択し画像のプロパティを確認してみましょう。
大きな画像の場合、圧縮の項目が「写真画質(JPEG)」に設定されることがあります。
この場合、PNGやGIFを組み込もうとしてもJPEG圧縮されてしまい、画質が劣化した画像が表示されてしまいます。
せっかくターゲットに合わせて調整した綺麗な画像が、いつの間にか劣化して表示されてしまうということは不本意です。しかも、メモリ使用量も増加してしまいます。

圧縮の項目を「劣化なし(PNG/GIF)」とした場合、PNGやGIFはJPEG圧縮されなくなり、ターゲットに合わせて調整した画像が意図通りに表示されるようになります。また、メモリ使用量も前述した通りに抑えることができます。

表5. 圧縮設定によるメモリ使用量SWFファイルサイズの比較

• 計測環境 Flash Lite3.0　色深度:32bit　ディスプレイサイズ:240×320

5. Flashの今後について

Adobeがモバイルブラウザー向けFlash Playerの開発を終了する、との報道もあり今後の動向が気になるところですが、実際のところ、まだフィーチャーフォンは多く使われており、Android機でもFlash Playerを搭載している機種がほとんどです。コンテンツを提供する業界でも、フィーチャーフォンユーザー向けのコンテンツを充実させる方向で進んでいるようです。

今回ご紹介した方法を参考に、軽くて快適なFlashコンテンツ作成の一助になれば幸いです。