【PHP】 画像が沢山あるサイトは Base64エンコード で高速化しよう

画像を使用したWEBページは通常下記のようになります。

<img src="http://example.com/hoge.jpg">
<img src="/img/hoge.jpg">

このようにURLや画像のパスを記載してクライアントに一度HTMLを返したのちに再度クライアントから画像のリクエストを送ることになります。
画像が少ないサイトであればこれでもいいのですが、大量の画像を表示させている場合は画像毎にリクエストが走るためサイトの表示速度が落ちます。
ですので Base64 で画像をエンコードして直接HTMLに埋め込みサイトを高速化しましょう。

Base64とは?

Base64は、データを64種類の印字可能な英数字のみを用いて、それ以外の文字を扱うことの出来ない通信環境にてマルチバイト文字やバイナリデータを扱うためのエンコード方式である。 ちなみにGoogle画像検索でもBase64を使用しています。 引用元: Base64 - Wikipedia

Base64エンコードしてHTMLに画像を埋め込む方法

# png
<img src="data:image/png;base64,{base64data}">

# jpg
<img src="data:image/jpg;base64,{base64data}">

# gif
<img src="data:image/gif;base64,{base64data}">

それぞれ拡張子も指定しなくてはいけません。

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

$img_url = 'http://example.com/hoge.jpg';
$img = file_get_contents($img_url);

if(($encode_img = base64_encode($img)) === FALSE){
     return $img_url;
}

# 画像の拡張子取得
$type = exif_imagetype($img_url);
switch ($type) {
    case IMAGETYPE_GIF:
        $ext = 'gif';
        break;

    case IMAGETYPE_JPEG:
        $ext = 'jpg';
        break;

    case IMAGETYPE_PNG:
        $ext = 'png';
        break;
        
    default:
        return $img_url;
}

return 'data:image/' . $ext . ';base64,' . $encode_img;

最後に

この方法だとクライアント側でのリクエストが減りサイトが高速化されます。
しかしリクエストする画像が外部にある場合サーバ側で画像の分だけリクエストが発生することになります。
ですのでその部分はサーバ側でキャッシュするなりして対応ください。