[PHP]画像をbase64でエンコードしてインラインでHTMLに埋め込む
SEOにページの読み込み速度が関係するようになって何年も経ちます。
画像については遅延読み込みが主流のようにも思いますが、あまり大きくないちょっとした画像であれば、base64エンコードして埋め込んじゃうのもアリですね。
<img src="data:image/png;base64...">
って感じで。
ただ、これを手動でやるのも面倒です。
なので、こんな感じでやれば簡単です。
<img src="<?php echo image_base64('./path/to/image.png', 'png'); ?>"> <?php function image_base64( $image, $format ){ $image_type = 'data:image/jpeg;'; if( $format == 'png' ){ $image_type = 'data:image/png;'; } elseif( $format == 'gif' ){ $image_type = 'data:image/gif;' } return $image_type. base64_encode(file_get_contents($image)); } ?>
イメージタイプを判定している部分が多少雑ですが、まぁこんなところでいいんじゃないでしょうか。
JPEGの場合、jpegって書く人もjpgって書く人もいると思うので、とりあえずPNG・GIF以外ならJPEGってことにしました。
画像フォーマットの種類も含めて、こだわる人はこの辺をもっと細かくしてください。
また、画像のタイプを引数で渡していますが、拡張子から直接判定してもいいし、finfo(FILEINFO_MIME_TYPE) あたりを使用して自動判定しても良いと思います。
面倒だしファイル処理増えるしその分重くなるので、とりあえず引数で渡すくらいでちょうど良いと思います。
使える局面は、
1. そんなに大きな画像じゃない
2. 他の箇所やページには(ほとんど)使用しない画像
というのが条件になると思います。
1は、容量が大きな画像でbase64変換すればそれだけエンコード後の文字列が長大になりますので、サイトの軽量化にはなりません。むしろ、主になるHTMLの読み込みが遅くなる分、表示が遅れます。
2は、他箇所にもちょくちょく出てくる画像であれば、画像ファイルをキャッシュさせちゃった方がよっぽど早いということです。この場合は、昔ながらのCSSスプライトの手法を用いるべきです。
また、当然のこと、毎回プログラムが走って画像を拾ってbase64化するので、サーバ側には多少なりとも負荷がかかります。
結果、単純にサーバ側のレスポンスが悪くなるので、そういった意味でも多用はしないほうが良いですね。
1度base64エンコードした画像はデータベース(Redisのようなキー・バリュー型が速くて良いでしょうか)に保存しておくって手もあるとは思いますが、よほどアクセス数が多くてサーバへのヒット数を減らしたいような要件でもない限りあまり意味ないでしょうから、通常のサイトであればそこまでする必要もないかと思います。
というか、そもそも普通のサイトを収容するサーバでキー・バリューストアとか用意されていませんよね。SQLiteあたりなら可搬性もあるし設置も簡単で良いですが、どちらにしてもそこまでしなくてもってところです。
ワンポイントの画像ファイルにちょっと用いるくらいなら、便利に使えますね。