サイトを制作していると、ソーシャルボタンをはじめ結構な数のアイコン画像を使いますよね。でも、アイコンの種類が増えてくると、画像ファイルの呼び出し回数が増えてページの表示が遅くなります。これを改善する方法の一つがdata URI schemeです。
画像が多いとなぜ遅くなるのか
ウェブページは、そのページを閲覧している端末からHTTPリクエストを受けたサーバーが、要求されたデータをHTTPレスポンスとして各端末に返すことで表示されています。
画像の枚数と同じ回数のHTTPリクエストが必要になります。
そのうえ画像が増えるとサーバーから受け取るデータ量も増加します。
つまり画像が増えるとページの表示速度がダウンするのです。
ページを軽くするには
ページを軽くする対策は以下の二点から考えなければいけません。
- サーバーから呼び出す画像の枚数を減らし、HTTPリクエストの数を減らす。
- サーバーから呼び出す画像のデータ量を減らす。
この両面から有効だとされているのはCSS Spriteという手法です。
CSS Sprite が王道ですがメンテナンスが大変そうで回避
[img-link url=”http://gihyo.jp/design/serial/01/ss-design/0010″ title=”第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の利用にあたっては次のサイトがとても役に立ちます。
[img-link url=”http://blog.thingslabo.com/archives/000058.html” title=”画像を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を利用して、アイコンを文字として扱うことによる高速化手法もあります。
[img-link url=”https://webshufu.com/seo-change-rss-sns-icon-images-to-icon-fonts/” title=”【WordPress高速化日記】アイコン画像を全てアイコンフォントにした｜ウェブシュフ”]
[img-link url=”https://webshufu.com/my-own-feedly-subscription-button/” title=”【WordPressの高速化日記】Feedly購読ボタンを自力で作成・設置してみた｜ウェブシュフ”]
サイトの状況に合わせて使い分けるのが大事かもしれません。
参考にしたページ
[img-link url=”http://davidwalsh.name/data-uri-php” title=”Image Data URIs with PHP”][img-link url=”http://blog.syuhari.jp/archives/770″ title=”PHP の mime_content_type 関数がなかった | Sun Limited Mt.”]