小さい画像ファイルを base 64 変換してソースコードへ直接貼り付けるテクニック

Web 上に画像を出力するためには、画像データが必要です。しかし画像ファイルだけでなく、次のように画像の内容をコード値で表現することで、ファイルが存在しなくても画像を出力することができます。

background: url(data:image/png;base64, (コード値) );

通常はファイルへのパスが記される部分を、コード値で表現しているのが特徴です。このように記述しても、画面上には画像が表示されてます。このコードは base 64 形式 と呼ばれる特殊なフォーマットで、HTML や CSS に直接記述することができます。

元の画像ファイル自体が大きいと コード値が自体肥大化してしまうので、あまり恩恵は受けられません。しかし、ちょっとした部品に使うような小さい画像であれば、サーバーに対する全体のリクエストが減少するメリットが受けられます。リクエストが減る、つまり表示速度の改善につながるのです。

高速化と呼べるような改善には至りませんが、知っておいて損はない知識です。

では具体的に base 64 形式への変換する方法を解説していきましょう。

画像ファイルを base 64 形式へ変換する方法

Windows であればコマンドプロンプトを利用して変換することが可能です。PNG、JPEG、GIF、そして SVG とそれぞれの画像で実施可能です。方法としては base 64 エンコードコマンドを発行してテキストファイルへ出力し、そのデータを css へ取り込む流れとなります。

base 64 変換コマンド

使用するコマンドは certutil です。構文は以下の通り。

certutil -encode [画像ファイル名] [テキストファル名]

例として、こちらの画像を変換してみましょう。

画像ファイルのサイズが 612 byte と小さいので、エンコード処理は一瞬で終わってしまいます。最終的に出力されたサイズが 898 byte なので元のファイルよりサイズが大きくなりました。

実際に出力されたテキストがこちらです。こうして見ると思いの外データ量が多いですね。かなりサイズの小さい画像でも、それなりのコードサイズになるため、大きい画像への利用は適していません。

-----BEGIN CERTIFICATE-----
iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAkFBMVEUAAAD+1wD/
xgD/3AD/2AD/1gD/1wD/1QD+2AD/2AD+2AD+2AD+2AD+2AD+2AD+2AD+2AD+2AD7
3QD+2AD+2AD+2AD+1wD+1wD+1gD+2AD+2AD/2AD91wD/2AD/2wD+2AD/2AD+2AD+
2QD+2AD+2AD+1wD+2AD+2AD+1wD+2AD+2QD/1wD+1wD71gD+1gD/2ABB9MztAAAA
L3RSTlMA/gIFMy8iEfXx6LHjxZ2CcU4L7Mq4fVZC+ayHJB8Xx39hSdTSvGhbGtjX
oJ9SP5WabZUAAAFUSURBVDjL5ZTXjoMwEEXHFIPpvSSB9LJ1/v/vNnYCHiG05HW1
98Xo+CB8GcnwN2PYtvGKx0+Ix80L4hbvKZa9HlX6RdFh0mMOLGYlxRUsJ/t03Y/s
tf9jzGPLmmzs4jnDLBHPJuUNYw2QmGfE0oQa79nT2gFiQEtfpXGFRC7JL60HoxOI
LpnYHnHyDe4iig7AjiJL042QGn1XGfbjtGHFh4MX+EwxFORVOHYNkIUXdf61mp+a
4lo1u4QMAxjiy43Wr7NvpWxDpTdZ7bfyyR/FCh8RuVqSRC25eOLdKB6QhnHOkCYd
xZuGRXpoAJpDWmh208P0NN1yVTXUxAMgbXSEA+AIAkoixoQfIcvgREBMxJRy+/3N
2hHwRcSO8KhFbCMCOiAhbabJDSqWI2du7nm5y2a6DDP2/Kq2evMBzN6qK99TM6dJ
g9g25q6hOEgnaKKQjf+cH9ypSbm/2F3/AAAAAElFTkSuQmCC
-----END CERTIFICATE-----

HTML 用にフォーマット

この２行目から14行目に記載されたコードを取り出して、html 上で解釈できるように整形します。画像の種類によって頭につけるコードが異なります。

上記の例では png ファイルを変換したので、このようなコードになります。出力されたファイルには改行コードが含まれていますが、利用の際は削除してください。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAAkFBMVEUAAAD+1wD/xgD/3AD/2AD/1gD/1wD/1QD+2AD/2AD+2AD+2AD+2AD+2AD+2AD+2AD+2AD+2AD73QD+2AD+2AD+2AD+1wD+1wD+1gD+2AD+2AD/2AD91wD/2AD/2wD+2AD/2AD+2AD+2QD+2AD+2AD+1wD+2AD+2AD+1wD+2AD+2QD/1wD+1wD71gD+1gD/2ABB9MztAAAAL3RSTlMA/gIFMy8iEfXx6LHjxZ2CcU4L7Mq4fVZC+ayHJB8Xx39hSdTSvGhbGtjXoJ9SP5WabZUAAAFUSURBVDjL5ZTXjoMwEEXHFIPpvSSB9LJ1/v/vNnYCHiG05HW198Xo+CB8GcnwN2PYtvGKx0+Ix80L4hbvKZa9HlX6RdFh0mMOLGYlxRUsJ/t03Y/stf9jzGPLmmzs4jnDLBHPJuUNYw2QmGfE0oQa79nT2gFiQEtfpXGFRC7JL60HoxOILpnYHnHyDe4iig7AjiJL042QGn1XGfbjtGHFh4MX+EwxFORVOHYNkIUXdf61mp+a4lo1u4QMAxjiy43Wr7NvpWxDpTdZ7bfyyR/FCh8RuVqSRC25eOLdKB6QhnHOkCYdxZuGRXpoAJpDWmh208P0NN1yVTXUxAMgbXSEA+AIAkoixoQfIcvgREBMxJRy+/3N2hHwRcSO8KhFbCMCOiAhbabJDSqWI2du7nm5y2a6DDP2/Kq2evMBzN6qK99TM6dJg9g25q6hOEgnaKKQjf+cH9ypSbm/2F3/AAAAAElFTkSuQmCC

base64 形式のコードが利用できる場面

どちらも通常は画像ファイルのパスを記載している箇所です。ファイルを参照するような感じで base64 形式のコードがそのまま利用できます。

次の画像は img タグに直接 base64 形式のコードを設定したものです。ソースコードを確認いただければ、コード値を利用していることが分かります。

表示イメージは、変換前の画像と全く同じです。また、画像ファイルの実態はありませんが、ブラウザ上から画像ファイルとしてダウンロードすることも可能です。

適切に利用すれば、有効活用できるのではないでしょうか。