Foros del Web » Programando para Internet » Javascript »

Cambiar extension de imagenes si navegador soporta webp

Estas en el tema de Cambiar extension de imagenes si navegador soporta webp en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/08/2019, 08:51
Avatar de insyse  
Fecha de Ingreso: abril-2005
Ubicación: Colombia
Mensajes: 202
Antigüedad: 14 años, 5 meses
Puntos: 5
Cambiar extension de imagenes si navegador soporta webp

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
__________________
.................................................. ...........................
No todos nacemos aprendidos !
  #2 (permalink)  
Antiguo 18/08/2019, 19:29
 
Fecha de Ingreso: abril-2006
Mensajes: 291
Antigüedad: 13 años, 4 meses
Puntos: 52
Respuesta: Cambiar extension de imagenes si navegador soporta webp

Cita:
Iniciado por insyse Ver Mensaje
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:
Ver original
  1. Modernizr.on('webp', function (result) {
  2.     if (result) {
  3.         alert("este navegador soporta WEBP");
  4.     } else {
  5.         alert("este navegador es antiguo y no soporta WEBP");
  6.     }
  7. });
Código Javascript:
Ver original
  1. Modernizr.on('webp', function (result) {
  2.     if (result) {
  3.         $('.img-webp').each(function () {
  4.             this.src = $(this).data('webp');
  5.         });
  6.     } else {
  7.         $('.img-webp').each(function () {
  8.             this.src = $(this).data('original');
  9.         });
  10.     }
  11. });
__________________
Mis aportes te ayudaron??, te hicieron ahorrar valiosos tiempo??, si quieres puedes agradecerme con un Gracias o con una donacion
https://paypal.me/pools/c/87BTML2gwr
  #3 (permalink)  
Antiguo 18/08/2019, 20:58
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.467
Antigüedad: 11 años, 6 meses
Puntos: 1072
Respuesta: Cambiar extension de imagenes si navegador soporta webp

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:
Ver original
  1. Modernizr.on('webp', function (result) {
  2.   if (!result) {
  3.       $('.img-webp').each(function () {
  4.           this.src = $(this).data('jpg');
  5.       });
  6.   }
  7. });



La zona horaria es GMT -6. Ahora son las 04:29.