Change image extension of "img src" based on browser?

[n_merciano]

Hello there great folks,

I am quite sure it is possible to change the IMAGE extension of an img src… based on the internet browser.

What am i trying to fix here? If Chrome is used by me or client side the image should show “.webp” format only…because Google chrome only supports this extension else show the JPG and PNG and the rest…

How can i do something like this?

<!-- IE, Firefox, Safari -->
<div class="slide">
<img data-src="http://res.cloudinary.com/orangeworx/image/upload//v1437395843/browser-1.png" class="cld-responsive" alt="Browser #1">
</div>

<!-- Chrome only -->
<div class="slide">
<img data-src="http://res.cloudinary.com/orangeworx/image/upload/v1437395843/browser-1.webp" class="cld-responsive" alt="Browser #1">
</div>

How can i slove this… with PHP or JQuery or javascript? Can anybody help?

This is what i have now but it’s no working:

$(document).ready(function(){
	
var BrowserChrome = window.chrome;
if(BrowserChrome) {
		$('data-src[src$=".png"]').each(function(index,element) {
		element.src = element.src.replace('.webp');
	});
} else { 
 		$('data-src[src$=".webp"]').each(function(index,element) {
		element.src = element.src.replace('.png','jpg');
	});  
}
});

Thanks!

[felgall]

The only way to make it work would be to try displaying the .webp version first and then somehow try to detect if it displayed properly or not and if not then use an alternative.

There is no way to test for specific browsers that is useful for anything other than approximate statistics.

[lorenw]

Here is an answer, can’t take credit for it, found on stack overflow.
http://stackoverflow.com/questions/5573096/detecting-webp-support