アルファ可変のPNGパレット:小さくてWebブラウザに最適

2008年11月05日発行

可変アルファ付きPNGパレット:小さくてWebブラウザの画像に最適です。

私はMapTiler/GDAL2Tilesというオープンソースのプロジェクトに取り組んでいます。これはGoogle Mapsのようなスタイルで、ユーザーフレンドリーな地図のスタティックタイルパブリッシングを行うものです。このプロジェクトは、OSGEOのためのGoogle Summer ofCodeプロジェクトとして始まり、その成果はGDAL 1.6で公開されています。

最近、私はPNGの最適化をいくつかテストしていました。これは私のアプリケーションにとって重要であるため、妥当な画質を維持しながらタイルサイズを最小にするためのものです。このような最適化は、ダウンロードを高速化し、また、ハードディスクの多くのスペースを節約します。PNGのサイズを最適化するためのツールはたくさんあります:advpng、pngrewrite、pngcrush、pngquant、scolorq、pngnq... 私はタイルの後処理(またはおそらく後で直接GDALにそのような最適化を統合)のためにそれらのいずれかを選択したいと思いました。

PNGファイルサイズの最適化は、RGB(A)モデルからパレットに切り替えたときに、使用する色の量を減らすことに基づいて常に行われます。私が以前知らなかったのは、PNGは可変アルファのパレットをサポートしているということです。つまり、パレット内の各色の定義の一部は、その透明度でもあるのです。通常、アルファチャンネルを分けて使うしかない機能を、パレットで使うことができるのです。

パレット付きの PNG に切り替えた後は、画像のラスターデータに必要なスペースは半分かそれ以下になります。もちろん、RGBA からパレットへの変換は、色数の多い画像ではロスの多い操作ですが......量子化のアルゴリズムをうまく選択すれば、人間にはほとんど認識できなくなります。特にMapTilerの場合のように小さなタイルの場合は。

アルファパレット付きのPNGは、Firefox 2+、Safari、Explorer 7+などの最新のWebブラウザで正しく表示され、Google Earthでも表示されます。 しかし、それだけではありません。Internet Explorer 5.5 & 6では、このような透過性のある(限られた)PNGファイルを、HTMLハッキングなしで表示することができます。これにより、OpenLayersやGoogle Mapsのような古いブラウザでマップオーバーレイを簡単に表示することができ、しかも透明部分を含むマップオーバーレイの不透明度を動的に変更することができるのです。

では、そのようなファイルを作るにはどうすればよいのでしょうか?標準的なRGBA PNGをこのアルファパレット付きPNG8に変換する、とても素晴らしいオープンソースのアプリケーションがあります。

PNGNQ: http://pngnq.sourceforge.net/(by Stuart Coyle and Greg Roelofs)

こちらのPDF記事で紹介されているThe NeuQuant Neural-Net image quantization algorithm(by Anthony Dekker)を使用しています。このアルゴリズムを少し修正して、RGBA付きの標準的なPNG24をアルファパレット付きのPNG8に変換しています。これは非常に高速です。 結果として得られるPNGファイルのサイズは通常、オリジナルの半分になります。 もし生成されたPNGのサイズが気になるのであれば、pngcruchという後処理でファイルを圧縮してみてください。時には、結果のサイズがもう少し小さくなることもあります。

PNGNQプロジェクトページのドキュメントでは、実行を推奨しています。

pngnq -n 256 image.png && pngcrush image-nq8.png smallimage.png

このPNGNQツールは、MapTiler/GDAL2Tilesから生成されたPNGタイルの後処理に優れています...

また、NeuQuantアルゴリズムのような依存関係にあるものだけでなく、ユーティリティ自体のソースコードもBSDライセンスに対応しているようなので、GDALや他のオープンソースの地図処理ツールにも採用される可能性があると思います・・・。

Découvrez MapTiler en français!

Visitez maptiler.fr

Přečtěte si více v češtině

Více na maptiler.cz

Leer más en español

Visite maptiler.es

Meer in het Nederlands

Ga naar maptiler.nl

日本語で詳細をみる

maptiler.jp へ

Weitere Informationen finden Sie

auf MapTiler.de

ديزملا فشتكإ

maptiler.ae ىلإ ىقتنا

MapTilerをスイスで探す

MapTiler.chを見る