is there a viable way to feature detect support for image:data base64

Question

using something along the lines of:

background:url(data:image/gif;base64,R0lGODlhIwAhALMAAAAAADQ0NENDQ25ubouLi6ioqLa2ttPT0/Dw8P///wAAAAAAAAAAAAAAAAAAAAAAACwAAAAAIwAhAAAIpQABCBxIsCCAAAYTKlw4cECCAQwjMnSY4KHEiwQpVrSIUaLGjRw7Kvy4EYEAkSNBljyJ0iDJiiZbulQJk6XMhjQTxLyJk+ZOngBe6rTJU+jPojmTKqXZc6nTpAKFPp0qsMDUqyoHWsWKleBWrk8LfgV5AKjYnGXNakWrdi3NtG3HbjTQtmrOAnUByK2It+7eBH3j5iSQVy5cv3PzegWsuCDExmYDAgA7) no-repeat center center;}

is fine but I want to be able to provide graceful degradation (the css assertion is through javascript) when base64 is not available.

obviously, IE prior to v8 lacks this functionality so I could go by browser - but i'd prefer to have it feature detected, if possible.

any ideas on how do go about doing it?

Answer 1

This might be what you are looking for : http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/

I worked on a script that adds a partial support of the DataURI scheme in IE6+ : http://phenxdesign.net/projects/phenx-web/iedatauri/example.php and the code is here : http://code.google.com/p/phenx-web/source/browse/trunk/iedatauri/

IE5+ supports a sort of data URI too, it is but not always possible to use it : http://www.betalon.com/blog/html%5Fcss/data-uri-in-css-crossbrowser.htm

Answer 2

just thought i'd post the way i now use the above to extend the mootools Browser.Features hash, i hope it helps somebody.

(function() {
    var imageHandler = function() {
        $extend(Browser.Features, {
            base64: this.width == 1 && this.height == 1
        });

        this.dispose();
        // alert(Browser.Features.base64);   
    }
    new Element("img", {
        src: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==",
        events: {
            load: imageHandler,
            error: imageHandler
        }
    }).inject(document.body);
})();