Client side WebP switch

+ Fallback for disabled JavaScript

HTML

<noscript data-src="http://www.der-schepp.de/jsfiddle/image">
<img src="http://www.der-schepp.de/jsfiddle/image.jpg" width="400" height="300" />
</noscript>

JavaScript

function webp_process(webp_supported){
    var noscripts = document.getElementsByTagName('noscript');
    for(i=0;i<noscripts.length;i++){
        src = noscripts[i].getAttribute('data-src');
        if(src){
            var webp = new Image();
            webp.onerror = function(){
                this.src = src + '.jpg';
            }
            if(webp_supported) webp.src = src + '.webp';
            else webp.src = src + '.jpg';
            noscripts[i].parentNode.insertBefore(webp,noscripts[i]);
        }
    }
}

var webp = new Image();
webp.onerror = function(){
    webp_process(false);
};
webp.onload = function(){
    webp_process(true);
};
webp.src = 'data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoBAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==';