PNGの透過画像

PNGの透過画像

　PCの世界でも、PNGを「使わない理由」はありません。FirefoxやOperaといったモダンブラウザはもちろん、IEでもバージョン7では表示をすることができます。容量も軽く、高画質で扱いやすいPNG形式を積極的に使うべきと言えるでしょう。

　PNG形式で画像を作るのは非常に簡単です。前回（http://thinkit.jp/article/717/1/）紹介したオンラインソフトでも対応していますし、Photoshop、FireworksでもGIFやJPEGと同様の手順で、PNG形式を選ぶことができます。

　GIFでも、1色を指定して透過画像を作ることができます。しかし、例えばドロップシャドウや、アンチエイリアスのかかった画像の場合、画像の周りに若干色が残ってしまう「フリンジ」という現象が発生してしまいます（図3）。

　しかし、PNGの場合は複数の色を透明色に指定することができるため、このような画像もキレイに透明化することができます。早速試してみましょう。ここでは、Photoshopで説明します。

　Photoshopのメニュー「ファイル → 新規」を選び、「カンバスカラー」を透明に設定して画像を作成します。

　ドロップシャドウなどのエフェクトを施した画像を作成し、メニューの「ファイル → Webおよびデバイス用に保存」を選んで書き出しましょう。画面右側の画像形式選択部分で「PNG」を選ぶと、透明部分もそのまま保持することができます。

　念のため、ここで「GIF」を選ぶとその違いが非常によく分かります。GIFでは、ドロップシャドウをかけた個所だけ、白色が現れてしまっています（図3）。

　それでは、書き出した画像をそれぞれWebページに貼り付けて表示してみましょう。その画質の違いは一目瞭然（りょうぜん）です。PNGを利用すれば、このような高度な画像処理を簡単に施すがことができるというわけです。

透過GIFをIE6以下で正しく表示させるには

　透過PNG画像の残念な点は、IE6以前のブラウザに完全対応していないことです。画像自体は表示されるものの、透過PNGが正常に処理されず、GIFと同じようになってしまうことです。

　しかし、これはJavaScriptを利用すると解決することができます。いくつかライブラリなどが存在していますが、「to-R（http://blog.webcreativepark.net/）」がMITライセンスで公開しているライブラリ「alphafilter.jsライブラリ（http://blog.webcreativepark.net/2007/02/01-233315.html）」が最も使いやすいものの1つです。

　まずは、透明PNGを利用したWebページを作成しておきます。この時点でIE6以前で表示をすると、画像部分の背景だけがグレーの状態になってしまいます。

　先のサイトからライブラリをダウンロードして、適当なフォルダにコピーします（ここでは、「js」フォルダであると仮定します）。そしたら、先のWebページの要素に次のように記述しましょう。



　そして、透明PNGの要素にclass属性を追加します。



　これで準備完了です。あらためてWebページを表示すると、見事に透明になっています。

　このJavaScriptは、class属性で指定された要素内の画像を、IE6のDirect Xの機能である「AlphaImageLoader」という機能に変換して、疑似的に透明化をするという処理を自動で行っています。IE以外のブラウザには影響がないため、これにより透過PNGを気軽に使うことができるようになります。

　次回は、透明PNGを利用するとどんなデザインができるのか、どんな表現が可能なのか。今回の内容をふまえて、実際のデザインの作り方や活用方法を紹介していきます。

【参考文献】

「PNG (Portable Network Graphics) Home Site」（http://www.libpng.org/pub/png/）（アクセス：2008/11）

「Image Optimization Part 2: Selecting the Right File Format Yahoo! User Interface Blog」（http://yuiblog.com/blog/2008/11/04/imageopt-2/）（アクセス：2008/11）

「アルファ画像を扱うalphafilter.jsライブラリ[to-R]」（http://blog.webcreativepark.net/2007/02/01-233315.html）（アクセス：2008/11）