Cambiar extension de imagenes si navegador soporta webp

[insyse]

Buenos dias,

Hay alguna forma en que se cambien todas** las extensiones de las imágenes si el navegador soporte WebP y que en caso contrario mantenga la extensión original, (gif, jpg o png)

**La idea es que no se haga imagen por imagen sino una sola función que al detectar que el navegador soporta WebP, cargue todas las imágenes del sitio en este formato

[tuadmin]

Iniciado por insyse

Buenos dias,

Hay alguna forma en que se cambien todas** las extensiones de las imágenes si el navegador soporte WebP y que en caso contrario mantenga la extensión original, (gif, jpg o png)

**La idea es que no se haga imagen por imagen sino una sola función que al detectar que el navegador soporta WebP, cargue todas las imágenes del sitio en este formato

pues puedes usar los EVENTOS que da la libreria de Modernizr

Código Javascript:

Modernizr.on('webp', function (result) {
    if (result) {
        alert("este navegador soporta WEBP");
    } else {
        alert("este navegador es antiguo y no soporta WEBP");
    }
});
 

Código Javascript:

Modernizr.on('webp', function (result) {
    if (result) {
        $('.img-webp').each(function () {
            this.src = $(this).data('webp');
        });
    } else {
        $('.img-webp').each(function () {
            this.src = $(this).data('original');
        });
    }
});
 

[ArturoGallegos]

No he usado el código que muestra el compañero @tuadmin por lo que no tengo idea si funciona, pero he de hacerle una corrección.

carga desde el inicio las imágenes con extención webp
<img src="path/imagen.webp" data-jpg="path/imagen.jpg" />

para que desde el inicio se usen en caso de ser soportada, que sera en la mayoría de los casos.

el javascript le hago este ajuste

Código Javascript:

Modernizr.on('webp', function (result) {
  if (!result) {
      $('.img-webp').each(function () {
          this.src = $(this).data('jpg');
      });
  }
});