PHPやnode.jsで画像をbase64エンコードしてインラインイメージとしてimgタグで表示する方法

このドキュメントの内容は、以下の通りです。

• はじめに
• インラインイメージとは
• base64 とは
• インラインイメージの指定方法
• 指定できる主なコンテンツタイプ
• インラインイメージの使用例
• PHPを用いて画像をbase64する方法
• PHPで画像をbase64エンコードして、imgタグに指定する方法
• node.jsで画像をbase64エンコードする方法
• Unixコマンドで画像ファイルをbase64エンコードする方法

はじめに

ウェブページをはやく表示するテクニックはいろいろあります。たとえば、ページや画像などのリソースのサイズを小さくしたり、画面を表示するためのHTTPリクエストの数を減らす、といった手法があります。

HTTPリクエストの数を減らすためのテクニックを例に挙げます。

• インラインイメージ
• CSSスプライト(CSS Sprite)
• イメージマップ

今回は、インラインイメージについて紹介いたします。

インラインイメージとは

HTMLから imgタグで画像を読みだすのが一般的な利用方法だと思います。インラインイメージ(inline image)とは、jpg,gifやpngなどの画像を文字列にして、HTMLのコード内に埋め込むテクニックです。

画像をHTMLコードに埋め込むことにより、HTTPリクエストを減らすことが可能になります。ただし、画像サイズに伴って、HTMLコードのサイズが肥大化します。画像を Base64 エンコードするため、元の画像サイズよりも大きくなります。
また、その画像データを複数のページで利用している場合、画像のキャッシュとして利用することができません。

外部ファイルとしてのCSSやJSのファイルに埋め込むことで、 インラインイメージもキャッシュすることができ、さらに、HTTPリクエストを減らすことが可能になります。
また、画像イメージは、base64でエンコードされている必要があります。

base64 とは

base64とは、インターネットで広く使われているエンコード方式です。

エンコード方式というのは、あるルールにのっとって、データの形を置き換えることです。 base64 では、データを64種類の印字可能な英数字のみを用いて、データを表現します。

base64エンコードした場合、データサイズは 4/3倍 (約133%) になります。

元データを6ビットずつに分割し、変換表を用いて、4文字ずつ変換します。4文字に満たない部分は、＝（イコール）で埋めます。

インラインイメージの指定方法

インラインイメージをHTMLで指定する場合には、data uriを利用します。

指定できる主なコンテンツタイプ

インラインイメージを指定するときに、コンテンツのタイプを指定する必要があります。主なコンテンツタイプを以下の表に紹介します。

インラインイメージの使用例

インラインイメージの構造は以下の通りです。

data: コンテンツタイプ;エンコード方式,データ

エンコードには、 base64 が入ります。
データは、 base64 エンコードされた画像です。

DATA URIを用いたIMGタグの使用例

pngの場合

<img src="data:image/png;base64,.......base64data........">

gifの場合

<img src="data:image/gif;base64,.......base64data........">

jpgの場合

<img src="data:image/jpg;base64,.......base64data........">

PHPを用いて画像をbase64する方法

インラインイメージを利用する場合、画像をbase64エンコードする必要があります。PHPの場合、簡単に画像ファイルをbase64エンコードしたデータにすることができます。

<?php
$img = base64_encode(file_get_contents('pathto/file.gif'));
?>

PHPで画像をbase64エンコードして、imgタグに指定する方法

PHPで画像をbase64エンコードして、インラインイメージとして利用する例です。

<?php
$img = base64_encode(file_get_contents('video.gif'));
?>
<img src="data:image/gif;base64,<?php echo $img; ?>">

この方法は、プログラムが実行される都度、ファイルを読んで、base64エンコードをするため、ファイルの更新頻度が低いのであれば、base64した文字列を埋め込んだほうが良いでしょう。

node.jsで画像をbase64エンコードする方法

JavaScript/Node.js が大人気なので、node.js のサンプルも用意いたしました。
node.js で画像ファイルを base64エンコードする方法も紹介します。

var filename = "sp500.png";
var fs = require('fs');
var base64str = fs.readFileSync(filename, 'base64');

ファイルの読み込みとbase64エンコードの処理をわける場合には、このような書き方もできます。

var filename = "sp500.png";
var fs = require('fs');
var img = fs.readFileSync(filename);
var base64str = new Buffer(img).toString('base64');

Unixコマンドで画像ファイルをbase64エンコードする方法

PHPやnode.jsなどのプログラミング言語で base64エンコードをしたくない、できない、という方向けのやり方を紹介します。
OSごとにbase64のエンコードやデコードができるコマンドが用意されています。LinuxやFreeBSDであれば、だいたい base64 や openssl コマンドが使えるのではないかと思います。 WindowsでWSL(Windows Subsystem for Linux)のターミナルから base64 や openssl コマンドが利用できます。 Mac も openssl コマンドが利用できますね。
Windows に関しては、 WSL を入れるというのに、多少時間が必要かもしれませんが、VmwareやVirtualBoxなどの仮想マシンをインストールして、そこにUnixをインストールすることを考えれば、WSLはお手軽ではないかと思います。 都度、base64エンコードするのも処理としては無駄なので、コマンドでbase64をしておいたほうが楽で良いかもしれません。

まず、base64コマンドで行う方法を紹介します。
Linuxのコマンドで画像ファイルをbase64エンコードする方法は以下の通りです。base64 コマンドに引数を指定しないと、自動的に改行が入ってしまいます。

base64 -w 0 sp500.png

FreeBSDのbase64コマンドには -w オプションが存在しませんでした。

このようにUnixであってもLinuxやFreeBSDなど環境によって、オプションが異なるのは、困りますね。

Linux, Mac, Windows などのOSを問わず、やるには、 openssl コマンドでやるのが良いでしょう。
コマンドでbase64エンコードするなら、という前提で、opensslコマンドで行うのが一番の解ではないでしょうか。
openssl base64 は、デフォルトでは、改行が自動的に入ります。そのため、 -A オプションを使用して、改行が入らないようにします。

openssl base64 -A -in sp500.png

opensslコマンドが使えないけど、perlが使えるぞ、という環境があるかわかりませんが、perl の例も紹介します。
perlでワンライナーでbase64エンコードする方法もあります。encode_base64は、デフォルトでは、76文字で改行されてしまうので、第2引数で空文字列を渡します。

perl -MMIME::Base64 -ne 'print encode_base64($_,"")' < sp500.png

---