簡単★ブログ表示の高速化の為に「小さい画像にbase64」をかける 【data URI scheme】

「画像をbase64に」と「CSSスプライト」の2種類

小さい画像対策に、CSSスプライトを使う手法があります。CSSスプライトに関しては、「一番簡単なCSS Spriteのやり方 」を参考にしてください。

「画像をbase64に」のほうは、かなり簡単です。
IE(IE8以降)をはじめ、その他のブラウザや、Android、iOS(iPhone)など対応しています。
※IE7以前は対応していない

CSS Spriteはメンテナンスが大変ですし、クライアント側にメモリーや処理関係で負荷がかかります。
IE7でその画像が表示されなくても支障がない、IE7はサポートしないとかで割り切れるのなら個人的には、利用価値は高いと思います。

「画像をbase64に」のやり方

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

上記サイトで、画像をbase64(テキスト)に変換できます。もちろん違うツールを使っても可能です。

2.HTMLやCSSファイルにそのまま埋め込む
やり方は簡単で、現状URL指定しているところをただ置き換えるだけです。
■変更前
//CSS
  background: url(https://2.bp.blogspot.com/-IxEoLIS5kpY/Vdn8VY_Ma9I/AAAAAAAARwE/BI5JNs9j6GI/s1600/032_3.png) no-repeat center left;
//HTML
 <img src="https://2.bp.blogspot.com/-IxEoLIS5kpY/Vdn8VY_Ma9I/AAAAAAAARwE/BI5JNs9j6GI/s1600/032_3.png"/>
■変更後
//CSS
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAANCAYAAACzbK7QAAAACXBIWXMAAAsRAAALEQF/ZF+RAAAAgUlEQVR4nKWSCwqAMAxDe9Le0ut4lTo/xVmaftwgjInkrVlIRAiKxnYq+idRbr4IqZkvQOrmQ/wDUjZ/JmivsjkrYN49sDl3zOljbA3BxN3cnQwMzFyAZN/kUu1RcUTgvV6AgYDGwKzRFHc8E4TjOvo3DyfQDwqJe53X121RXe11AABkf2zU12YXAAAAAElFTkSuQmCC) no-repeat center left;

//img
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAANCAYAAACzbK7QAAAACXBIWXMAAAsRAAALEQF/ZF+RAAAAgUlEQVR4nKWSCwqAMAxDe9Le0ut4lTo/xVmaftwgjInkrVlIRAiKxnYq+idRbr4IqZkvQOrmQ/wDUjZ/JmivsjkrYN49sDl3zOljbA3BxN3cnQwMzFyAZN/kUu1RcUTgvV6AgYDGwKzRFHc8E4TjOvo3DyfQDwqJe53X121RXe11AABkf2zU12YXAAAAAElFTkSuQmCC"/>

なぜ表示が高速化されるの?

1.画像1つずつhttpで取得(リクエスト)するわけですが、リクエストに時間がかかる
2.ブラウザにキャッシュされている画像でも、新旧を調べるためにhttpリクエストを投げる

リクエスト数を減らすことにより、表示が高速化されます。これはCSSスプライトも原理は同じです。

base64に変換することにより、元の画像のデータサイズよりも3割程度?増えるわけですが、「小さい画像の場合」はその程度は無視できるできるほど、リクエストには意外と時間がかかります。


PHPで変換するには

base64に変換するツールを自作することは簡単です。
<?php
$img = file_get_contents("http://example.com/sammple.png");
$img = base64_encode($img);
print("data:image/png;base64,".$img);
?>

スポンサーリンク

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。