Use data uris for small image files in CSS

This patch adds a new config option 'cssdatauri'. When enabled, the CSS
patcher will automatically convert all occurances of small (<600 byte)
PNG and GIF images in the CSS to embedded, base64 encoded data uris.

This reduces the number of needed HTTP requests and avoids the HTTP header
overhead.

1 files changed, 33 insertions, 2 deletions

diff --git a/lib/exe/css.php b/lib/exe/css.php
index e4105b427..02ed169c4 100644
--- a/lib/exe/css.php
+++ b/lib/exe/css.php
@@ -135,6 +135,12 @@ function css_out(){
         $css = css_compress($css);
     }
 
+    // embed small images right into the stylesheet
+    if($conf['cssdatauri']){
+        $base = preg_quote(DOKU_BASE,'#');
+        $css = preg_replace_callback('#(url\([ \'"]*)('.$base.')(.*?(?:\.(png|gif)))#i','css_datauri',$css);
+    }
+
     // save cache file
     io_saveFile($cache,$css);
     if(function_exists('gzopen')) io_saveFile("$cache.gz",$css);
@@ -271,11 +277,36 @@ function css_loadfile($file,$location=''){
     $css = io_readFile($file);
     if(!$location) return $css;
 
-    $css = preg_replace('#(url\([ \'"]*)(?!/|http://|https://| |\'|")#','\\1'.$location,$css);
-    $css = preg_replace('#(@import\s+[\'"])(?!/|http://|https://)#', '\\1'.$location, $css);
+    $css = preg_replace('#(url\([ \'"]*)(?!/|data:|http://|https://| |\'|")#','\\1'.$location,$css);
+    $css = preg_replace('#(@import\s+[\'"])(?!/|data:|http://|https://)#', '\\1'.$location, $css);
+
     return $css;
 }
 
+/**
+ * Converte local image URLs to data URLs if the filesize is small
+ *
+ * Callback for preg_replace_callback
+ */
+function css_datauri($match){
+    $pre   = unslash($match[1]);
+    $base  = unslash($match[2]);
+    $url   = unslash($match[3]);
+    $ext   = unslash($match[4]);
+
+    $local = DOKU_INC.$url;
+    $size  = @filesize($local);
+    if($size && $size < 600){
+        $data = base64_encode(file_get_contents($local));
+    }
+    if($data){
+        $url = 'data:image/'.$ext.';base64,'.$data;
+    }else{
+        $url = $base.$url;
+    }
+    return $pre.$url;
+}
+
 
 /**
  * Returns a list of possible Plugin Styles (no existance check here)