title: Blank image encoded as data-uri
body: <p>I've built an image slider (based on the terrific <a href="http://bxslider.com/">bxSlider</a>) which will preload images just-in-time before they slide into view. It's working pretty well already, but I don't think my solution is valid HTML.</p>
  
  <p>My technique is as follows: I generate the slider markup with the first slide image being inserted as usual (with an <code>&lt;img src="foo.jpg"&gt;</code>) and subsequent images being referenced in a data attribute like <code>&lt;img data-orig="bar.jpg"&gt;</code>.  A Javascript then juggles the <code>data-orig -&gt; src</code> change when necessary, triggering the preloading.</p>
  
  <p>In other words, I have:</p>
  
  <pre><code>&lt;div class="slider"&gt;
      &lt;div&gt;&lt;img src="time.jpg" /&gt;&lt;/div&gt; 
      &lt;div&gt;&lt;img src="data:" data-orig="fastelavn.jpg" /&gt;&lt;/div&gt; 
      &lt;div&gt;&lt;img src="data:" data-orig="pels_strik.jpg" /&gt;&lt;/div&gt; 
      &lt;div&gt;&lt;img src="data:" data-orig="fashion.jpg" /&gt;&lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>To avoid empty <code>src=""</code> attributes (which are <a href="http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/">harmful to performance</a> in <a href="http://www.nczonline.net/blog/2010/07/13/empty-string-urls-browser-update/">some browsers</a>), I've inserted <code>src="data:"</code> to effectively insert a blank image as a placeholder.</p>
  
  <p>The thing is, I can't seem to find anything in the <a href="http://www.faqs.org/rfcs/rfc2397.html">documentation for data-URI</a> saying whether this is a valid data-URI or not. I basically want the minimal data-URI that resolves to a blank/transparent image, so the browser can resolve the src immediately and move on (with no error or network request). Maybe <code>src="data:image/gif;base64,"</code> would be better?</p>