サイトを制作していると、ソーシャルボタンをはじめ結構な数のアイコン画像を使いますよね。でも、アイコンの種類が増えてくると、画像ファイルの呼び出し回数が増えてページの表示が遅くなります。これを改善する方法の一つがdata URI schemeです。

画像が多いとなぜ遅くなるのか

ウェブページは、そのページを閲覧している端末からHTTPリクエストを受けたサーバーが、要求されたデータをHTTPレスポンスとして各端末に返すことで表示されています。

画像の枚数と同じ回数のHTTPリクエストが必要になります。

そのうえ画像が増えるとサーバーから受け取るデータ量も増加します。

つまり画像が増えるとページの表示速度がダウンするのです。

ページを軽くするには

ページを軽くする対策は以下の二点から考えなければいけません。

• サーバーから呼び出す画像の枚数を減らし、HTTPリクエストの数を減らす。
• サーバーから呼び出す画像のデータ量を減らす。

この両面から有効だとされているのはCSS Spriteという手法です。

CSS Sprite が王道ですがメンテナンスが大変そうで回避

• 第10回　CSS Spritesでサイトを高速化：独学で極める “Webデザイン”の技と心｜gihyo.jp … 技術評論社

CSS Spriteは、複数の画像を「1枚の大きな画像」に結合して、background-positionを使って表示内容を選択する手法です。

これだと

• 画像呼び出しのためのHTTPリクエストの数は1回に激減。
• 画像のデータ量も削減。

ともに達成できます。しかし、以下のような制約があります。

• リピートさせて背景として設定したい画像には使えません。
• サイト内で使うアイコンを増やしたり別のものに変えたりすると、そのたびに「1枚の大きな画像」を作り直す必要があるため、メンテナンスが大変

当サイト「ウェブシュフ」では、上の2つのネックはあまりにも巨大で、CSS Spriteの導入は見送ってきました。

メンテが楽なdata URI schemeで対応

ところが、data URI schemeという方法があることを知りました。以下のような使い方をします。

imgタグで画像を表示する場合

<img alt="" src="「base64形式のデータ文字列」" />

CSSのbackground-imageを使う場合

background-image: url(「base64形式のデータ文字列」);

ページ高速化にどう影響するかといえば…

• HTMLファイルやCSSに画像データを直接書き込むので、画像ファイルを読むためのHTTPリクエストが1回も発生しません。
• しかし画像データのサイズは約3割増になります。
• 面倒なメンテナンスは必要ありません。

どちらが有効か

当サイトでは、data URI schemeを使うことにしたのですが、一般にはどちらのほうがサイトの高速化に貢献するのでしょうか。

アイコン画像のような小さくて色彩が単純な画像の場合は、元のデータサイズが小さいので、それが3割増になってもたいしたことはありません。

data URI schemeを使うほうがよさそうです。

データサイズの大きな画像の場合は、CSS Spriteで処理したほうがよさそうです。

data URI scheme利用のためのツール

data URI schemeの利用にあたっては次のサイトがとても役に立ちます。

• 画像をBase64に変換するツール (data URI scheme) - シングスブログ

PCの画像ファイルを選択して、「base64変換」ボタンを押せばimg タグの形式でHTMLコードを出力してくれます。

このサイトを利用して設置していたソーシャルボタンがこちらです。

今は取り外して、アイコンフォントや「テキスト+CSS」でアイコンを表現しています。

画像をエンコードしてdata URI schemeで表示するPHPコード

オンラインツールを使わずPHPコードで画像をエンコードする方法もあります。

//mime_content_type関数が存在しない場合のみ自らmime_content_type関数を定義
if ( !function_exists('mime_content_type') ) {  
    function mime_content_type($filename) {  
    $mime_type = exec('file -Ib '.$filename);  
    return $mime_type;  
    }  
} 
//関数定義ここまで
$image = （表示したい画像ファイルへのパス）;
$imageData = base64_encode(file_get_contents($image));
$src = 'data:'.mime_content_type($image).';base64,'.$imageData;
echo '<img src="',$src,'">';
?>

画像ファイルへのパスは相対パスでも絶対パスでもかまいません。

手動でbase64エンコードでエンコードした画像データを貼り付けるのに比べて、PHPファイルがとても見やすくなるので、どんどん使っていきたいです。

アイコン画像の取り扱いは大事

高速化のためには、アイコンをはじめとした画像をどう処理するかは結構大事です。

data URI schemeやCSS Spriteはアイコンを画像として取り扱ったまま高速化を測る手法です。

アイコンフォントやCSSを利用して、アイコンを文字として扱うことによる高速化手法もあります。

サイトの状況に合わせて使い分けるのが大事かもしれません。

参考にしたページ

• Image Data URIs with PHP

• PHP の mime_content_type 関数がなかった | Sun Limited Mt.