12時04分13秒 [Web関連]
CSSソースの中に任意の画像データを埋め込むための、Base64エンコードツールを作りました。
→CSS埋め込み用画像のBase64エンコードツール
作りました、という程のことはしていませんけども。
単に画像ファイルを指定する入力ページと、Base64にエンコードしてくれるPerlモジュール「MIME::Base64」へ入力ファイルを引き渡すCGIを作っただけなんですが。(^_^;)
別に「CSS内に画像を埋め込む」専用というわけではないので、画像以外のファイルでも何でもBase64でエンコード可能です。
が、Base64でエンコードした結果をCSSソースに埋め込みやすいよう、CSSソースに転記しやすい形で出力するようには工夫しました。下記みたいにMIME TYPEの記述も含めて、background-imageプロパティとしてそのまま使える形式で出力します。
Base64エンコード結果内に改行等は一切含まれないので、そのまま埋め込みたいCSSソースへコピー&ペーストするだけで使えます。
CSSソースに画像を埋め込もうとする場合、たいていは複数ファイルを一括して埋め込みたいでしょうから、3ファイルまで同時にエンコード可能なようにしてみました。別に何ファイル同時でもいいんですが、まあ、サーバに負荷を掛けると困るかなとも思って、とりあえず3ファイルに。
あと、そもそもCSSソースに埋め込む画像は、ファイルサイズの小さな画像でないと意味がありませんから(※Base64でエンコードするとデータサイズが1.3倍になるので)、エンコード可能な画像サイズは100KBに制限してあります。
適当にご活用下さい。(^_^;)
この日記へのコメントはお気軽に! コメント数:0件
コメント数: 0件