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.
dokuwiki · Jun 16, 2011 · 809d3ba · 809d3ba
1 parent 571b9b9
commit 809d3ba
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/conf/dokuwiki.php b/conf/dokuwiki.php
@@ -108,6 +108,7 @@
 $conf['subscribe_time'] = 24*60*60;      //Time after which digests / lists are sent (in sec, default 1 day)
                                          //Should be smaller than the time specified in recent_days
 $conf['compress']    = 1;                //Strip whitespaces and comments from Styles and JavaScript? 1|0
+$conf['cssdatauri']  = 1;                //Embed small images into CSS, won't work on IE<8 1|0
 $conf['hidepages']   = '';               //Regexp for pages to be skipped from RSS, Search and Recent Changes
 $conf['send404']     = 0;                //Send a HTTP 404 status for non existing pages?
 $conf['sitemap']     = 0;                //Create a google sitemap? How often? In days.

diff --git 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)