base64のデータで画像を表示したい
サーバーへのリクエスト数を減らして表示速度を速くするために、小さな画像データを直接HTMLに埋め込みたいとき<img>タグのsrc属性には、一般的には画像ファイルのパスを指定しますが、base64という形式でエンコードされたデータをHTMLに直接埋め込むこともできます。Webページで使用するHTMLファイル、CSSファイル、画像ファイルは1枚1枚ブラウザからWebサーバーに「リクエスト」して、ダウンロードします。この「リクエスト」にはそれなりの時間がかかるため、使用する画像ファイルが多いと、ページが表示されるのが遅くなります。画像データをbase64でエンコードして直接HTMLに埋め込んでおくと、そのぶんリクエストするファイルの数が減り、表示速度が速くなる可能性があります。使用する画像のファイルサイズがごく小さい（おおむね32KB以下）が適しています。
base64でエンコードされたデータを埋め込むには、src属性を次のように記述します。
- 元の画像データがJPEGファイルの場合、<img src=”data:image/jpeg;base64,データ”>
- 元の画像データがPNGファイルの場合、<img src=”data:image/png;base64,データ”>
- 元の画像データがGIFファイルの場合、<img src=”data:image/gif;base64,データ”>
<img src="data:image/png;base64,iVBORw0KGgoA" alt="">base64とは
コンピュータで扱うことができるすべてのファイルは、「テキストデータ」か「バイナリデータ」の２種類に分けられます。このうちテキストデータは、テキストファイル（.txt）やHTMLファイル（.html）など、データの中身が、人間でも理解できる「文字」で記されたデータのことをいいます。テキストデータは、メモ帳やテキストエディタなどで開くことができます。一方のバイナリデータは、データの中身が文字以外で記されたデータのことを示します。バイナリデータのファイルを開くには専用のアプリケーションが必要です。JPEGファイル、PNGファイル、GIFファイルなど、画像ファイルはすべて「バイナリデータ」です。base64は、こうしたバイナリデータを文字列に変換するための「フォーマット」の一種です。もともとはテキストデータしか扱えないメールに、ファイルを添付するために考えれたフォーマットです。なお、バイナリデータをbase64形式に変換することを「エンコード」、base64形式から元のバイナリデータに戻すことを「デコード」といいます。
画像データをbase64にエンコードする方法
画像データをbase64にエンコードするにはいくつか方法があります。Webサービスを使うのが一番手ごろです。