簡単★ブログ表示の高速化の為に「小さい画像に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.画像１つずつhttpで取得（リクエスト）するわけですが、リクエストに時間がかかる
2.ブラウザにキャッシュされている画像でも、新旧を調べるためにhttpリクエストを投げる

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

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

PHPで変換するには

base64に変換するツールを自作することは簡単です。

<?php
$img = file_get_contents("http://example.com/sammple.png");
$img = base64_encode($img);
print("data:image/png;base64,".$img);
?>