ファイルを直接加工まとめ背景adiaryでは、UIアイコン(このサイトだとページ送りやタグ一覧に出ている▼等)を色指定に基づいて動的にロードしています。仕組みとしては、予め128種類の色の異なる画像アイコンを用意して、指定色にもっとも近い色をロードするという感じになっていますが、いくつか問題があります。画像ファイルを増やすには限界があり近似色になってしまう。1KBにも満たないような小さなファイルをわざわざ別ファイルとしてロードさせるのは嫌。*1色が固定で良いなら、base64で埋め込むだけの話なのですが......。{background-image:url('data:image/png;base64,XXXX----XXX=');}adiaryはテーマの色をユーザーが自由に変更できるという素敵な機能が付いておりまして、そういうわけにも行きません......。Webの表示速度を上げるためにも、ロードファイル数は極力少ないほうが良いわけです。正攻法canvasタグを使って画像を読み込み加工してから、画像として取り出し、cssに適用します。'")';}※動作テストはしていません。いうアイデアが生まれました。都合が良いことに、PNG画像のパレットデータは無圧縮で記録されています。*2base64化したPNG画像を埋め込む。戻してバイナリ列を得る。パレットデータを書き換える。base64に戻し、スタイルに適用する。'")';※CRC32の計算関数は省略しました。ソースを見てください。GIFはパレット領域も圧縮されているようです。まとめJavaScriptでCRC32を実装しているときに、整数に型がないので(符号無視)右シフトができずハマっていました......。