Search code examples
htmldata-uri

Data Protocol URl

What is a reliable way to use data URIs for images? I know IE6/7 don't support them, so will this work?

  1. I use data URIs for images by default
  2. If browser is IE6/7 it shows the image (not as data but actual image) using javascript
  3. include the image (not as data) in <noscript>.

My question is: will the image be fetched in <noscript> even if the browser supports javascript and data URIs?

Solution

  • If you do want to go down this road (and I personally would not bother), you could do it...

    // Parse user agent and figure out if this browser supports data 
// URIs - e.g. `supportDataUri()`.  Also, store the image path
// somewhere - I'll assume for convenience an attribute called `data-image-src`

if ( ! supportDataUri()) {

   var images = document.getElementsByTagName('img');

   for (var i = 0, imagesLength = images.length; i < imagesLength; i++) {
       var imgSrc = images[i].getAttribute('data-image-src');
       images[i].src = imgSrc;
   }

}