小さい画像ファイルは base 64 変換してソースコードへ直接貼り付けよう

2016/01/13

change-image-file-to-base-64-02

Web サイトのデザインを勉強しようと様々なサイトの構成からソースコードまで眺めていたのですが、画像イメージの参照方法として見慣れない記述がありました。

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

画像ファイルへの参照パスではなく、コード値が記されているのです。しかし画面上には画像が表示されています。調べてみると画像ファイルを base 64 形式にエンコードすると、スタイルシートに直接記述ができるようなのです。

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

では早速 base 64 形式へ変換して取り入れてみましょう。

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

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

base 64 変換コマンド

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

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

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

王冠

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

change-image-file-to-base-64-01

実際に出力されたテキストがこちらです。こうして見ると思いの外データ量が多いですね。実際のところ、リストのヘッダに使うような小さな画像だけ変換した方が良いのかもしれません。

-----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 用にフォーマット

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

画像種類接頭コード
JPEGdata:image/jpeg;base64,[コード値]
PNGdata:image/png;base64,[コード値]
GIFdata:image/gif;base64,[コード値]
SVGdata:image/svg+xml;base64,[コード値]

上記の例では 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

この出力されたコードは、画像ファイルへのパスの代わりに利用することができます。具体的には css の url() の引数への設定、img タグの src 属性への設定することでイメージが表示されます。

表示イメージは全く同じです。また、画像ファイルの実態はありませんが、ブラウザ上から画像ファイルとしてダウンロードすることも可能です。適切に利用すれば有効活用できそうですね。

2017/01/22

個人事業主の開業届と青色申告の申請書を税務署へ提出!持ち物はマイナンバーカードを忘れずに!

2017/01/21

Chrome に表示された「保護された通信」「保護されない通信」とは?保護されないのは危険なのか?

2017/01/21

Word ファイルから画質を落とさず画像を取り出す方法

2017/01/20

Windows 10 でアプリをアンインストール(削除)する方法

2017/01/20

Windows 10 でデスクトップにマイコンピューターやコントロールパネルを表示する方法

2017/01/20

ファイアーエムブレムヒーローズのダウンロード方法とインストール手順【初期設定】

2017/01/17

青色申告の申請書「所得税の青色申告承認申請書」の書き方!例にならって入力すれば簡単に作成できる

2017/01/16

個人事業の開業届の書き方!例にならって入力すれば簡単に作成できる

2017/01/14

Nintendo Switch のコントローラーの充電方法は?標準の Joy-Con グリップでは充電できないので注意!

2017/01/14

Nintendo Switch の本体容量は 32GB しかない!容量追加はマイクロSDカードを利用する

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑