PNGをCSSグラデーションへ変換する「pngtocss」登場

david walsh blogにおいてPNG画像をCSSグラデーションに変換するツール「pngtocss」が紹介されている。CSS3を活用してWebページの総サイズを縮小したり高速なレンダリングを実施するためのテクニックのひとつとして興味深い。

pngtocssはC言語で開発されたとても小さな変換ツール。githubで提供されており、cloneすることで取得可能。libpngとzlibを使うため、利用するにはこの2つをシステムにインストールしておく必要がある。libpngとzlibのパッケージ名はOSやパッケージ管理システムごとに異なるので、適宜対応するものをインストールすれば良い。Makefileもシンプルなもので、コンパイラやライブラリ/ヘッダファイルのパスを書き換えればその環境でビルドできるようになる。

# pngtocss examples/red-gradient.png
.red-gradient {
        background-image: -moz-linear-gradient(left, #ff5959, #ffc3c3);
        background-image: -webkit-gradient(linear, left top, right top, from(#ff5959), to(#ffc3c3));
        background-image: -webkit-linear-gradient(left, #ff5959, #ffc3c3);
        background-image: -o-linear-gradient(left, #ff5959, #ffc3c3);
        background-image: linear-gradient(left, #ff5959, #ffc3c3);
}
# 
pngtocssの使用例。引数にPNGファイルを指定する。同時に複数指定可能。

pngtocssはCSS3のグラデーション指定のみならず、ベンダプリフィックスのついたFirefox、Chrome、Safari、Opera向けのCSSも生成してくれる。ただし、対応しているPNGは24ビット版のみで、利用できる画像も水平・垂直・対角の線形グラデーションのみ。水平と垂直に対してはマルチカラーも対応している。

pngtocssは限定的な機能のみを提供しているが、グラデーションをCSS3で実現するためのツールとして便利に活用できる。今後こうした画像をCSSに変換するツールが活用されるシーンも増えていくだろう。