小さい画像をbase64をかけてhtml内に埋め込み

おいしいアンテナは表示速度が遅いです。
原因の1つが、沢山画像を使っていることだった。

画像自体はキャッシュしているが、更新がないか確認するためのアクセスが足を引っ張っている様子。
なので、そのアクセスを無くすために、小さい画像はhtml内に埋め込むことにした。


今まで画像はこのように書いていたが、

<img src="http://hogehoge.jp/hoge.png">


画像をbase64エンコードすると、以下のように書けるらしい。

<img src="data:image/png;base64,iVBORw0KGgo....">


この施策で40アクセスくらいは減らすことができた。
計測してみるとだいたい30%早くなってた。




最終的にできたライブラリは以下のような感じになった。

画像のURLを渡すと、base64エンコードした

data:image/png;base64,iVBORw0KGgo....

のような文字列が返る。もし、ライブラリの中で失敗したら、渡された画像のURLをそのまま返す感じ。
あと、APC使ってキャッシュしている。
file cache(自作)も使っていて、apacheが再起動すると、file cache から拾いだして apc にコピーするようにした。



メモ

画像を base64エンコード

<?php
$img = file_get_contents( 'http://hogehoge.jp/hoge.png' );
if ( $img !== false ) {
    $img = base64_encode( $img );
}
?>

画像の種類を判別

exif_imagetype() という便利な関数があった。
とりあえず、 gif, jpg, png があればいいので、以下のように使ってみた。

<?php
...
    static protected function getDataType( $img_link ) { 
        switch( exif_imagetype( $img_link ) ) { 
            case IMAGETYPE_GIF      : $res = "gif"; break;
            case IMAGETYPE_JPEG     : $res = "jpg"; break;
            case IMAGETYPE_PNG      : $res = "png"; break;
//          case IMAGETYPE_SWF      : $res = ""; break;
//          case IMAGETYPE_PSD      : $res = ""; break;
//          case IMAGETYPE_BMP      : $res = ""; break;
//          case IMAGETYPE_TIFF_II  : $res = ""; break;
//          case IMAGETYPE_TIFF_MM  : $res = ""; break;
//          case IMAGETYPE_JPC      : $res = ""; break;
//          case IMAGETYPE_JP2      : $res = ""; break;
//          case IMAGETYPE_JPX      : $res = ""; break;
//          case IMAGETYPE_JB2      : $res = ""; break;
//          case IMAGETYPE_SWC      : $res = ""; break;
//          case IMAGETYPE_IFF      : $res = ""; break;
//          case IMAGETYPE_WBMP     : $res = ""; break;
//          case IMAGETYPE_XBM      : $res = ""; break;
            default : $res = false;
        }
        return $res;
    }
?>



参考にさせて頂きました。
http://paranoids.sakura.ne.jp/kaworu/2008-04-06-1.php