画像をBase64にしてWebページを高速化

上記の画像は当ブログ（トップページ）の
GTmetrix の解析結果である。

キャッシュ系のプラグインもCDNも一切使ってないが、
評価はダブルAで、かなりの高得点である。

Webページを高速化する方法はいくつかあるが、
そのうちの1つに、

小さな画像は、DataURL（MIME TYPE + Base64） にして
HTML や CSS に直接、埋め込んでしまうという方法がある。

HTTP リクエストを減らすことでWebページを速くする

上記は、当ブログのトップページのタイムラインである。
ヘッダーの CSS や Javascript は、それぞれ1ファイルにまとめているので、
DNS Lookup も含めた HTTP リクエストも、それぞれ1回。

基本的に、HTTPリクエストが少なければ少ないほど、
Webページは速くなる。

「CSS や Javascript は、なるべく1つのファイルにまとめろ」

と言われるのは、そういうことである。

DataURL を埋め込むことで HTTP リクエストを減らす

当然、画像も1ファイルづつ HTTP リクエストが発生する。

画像が多ければ多いほど、ページが遅くなるのは、

  • 画像のサイズが大きいから
  • HTTP リクエスト回数が増えるから

という、2つの理由がある。

なので、画像も文字列にして、HTML や CSS に埋め込んでしまえば、
HTTP リクエスト回数を減らすことができるため、
Web ページを高速化できるわけである。

なんでもかんでも Base64 にしてはいけない

画像を Base64 に変換して HTML や CSS に埋め込めば、
HTTP リクエスト回数は減らせる。

しかし、画像を Base64 に変換すると、
サイズは 約30～35%増し になる。

つまり、大きい画像を埋め込んでしまうと、
元のサイズよりも大きくなるため、
リクエスト回数を減らしたとしても、むしろ逆効果になってしまう。

よって、小さな画像だけ を対象に Base64 に変換しなければいけない。

画像を Base64 に変換して CSS や HTML に埋め込む方法

↓ 当サイトの「画像をBase64に変換」ページにアクセスする。

↓ この画面に

↓ 画像ファイル（.png .jpg .gif）をドラッグ＆ドロップ

↓ Base64 化されたテキストが表示されるので、それをコピー

あとは、CSS の url や HTML の img にコピーした文字列を書くだけ

・ CSS の background に書く場合の例

background: url("コピーした文字列");

・ HTML の img に書く場合の例

<img src="コピーした文字列" alt="タイトル" width="50" height="50" />

以上で、DataURL の埋め込みは完了です。

当ブログで Base64 化している画像

当ブログでは、以下の画像等を Base64 化してCSSに埋め込んでいる。

Gravatar から取得したアバター画像は、
一回一回読み込んで Base64化すると負荷がかかるので、
特殊な処理で、Base64化したテキストファイルを３日間キャッシュで保存している。

IT・ICT

Posted by るな