CSSの画像埋め込みを補助する「CSSEmbed」
CSSEmbedはJava製のオープンソース・ソフトウェア。CSSを使ったWebサイトデザインで、HTML中には画像のパスを出さずCSSで定義するケースがある。これによりCSSで制御できるデザインの範囲が大幅に広がるのだが、さらに一歩進めてCSS中に画像データを埋め込んでしまう手法がある。
元のCSS
それはdata URIを使った方法なのだが、うまく使えばアイコンに対するコネクション数を減らしてサーバの負荷を低減させることも期待できる。だがdata URIを作成するためには画像をテキスト（Base64）化する必要がある。手作業ではあまりに面倒なのでCSSEmbedを使ってみよう。
CSSEmbedはCSSファイルに埋め込まれた画像指定の箇所を解析し、data URIを使った埋め込みに変換してくれるソフトウェアだ。CSSEmbedがあるパスをベースにするので、相対パスでも対応している。デフォルトでは標準出力に出るが、出力先ファイルを指定することもできる。
変換後
data URIに対応していないブラウザもあるので、踏み切れなかった場合でもCSSEmbedを使えばベースは画像のパス指定で、対応ブラウザの場合だけdata URIを使ったCSSに渡す操作が簡単にできる。CSSによる画像埋め込みを積極的に使っていくなら欠かせないソフトウェアになりそうだ。
執筆時のバージョン
0.3.2
nzakas’s cssembed at master - GitHub