Reemplazo de imágenes de WebP

Question

Mi objetivo final es detectar si el navegador es capaz de mostrar imágenes webp. Si es así, reemplace todas las imágenes en la página con su equivalente webp (ubicado en el mismo directorio con el mismo nombre, solo extensión diferente)

Actualmente tengo un script que detecta correctamente si el navegador puede mostrar WebP

(function(){
  var WebP=new Image();
  WebP.onload=WebP.onerror=function(){
    if(WebP.height!=2){
      console.log("You do not have WebP support.");
    } else {
      console.log("You do have WebP support.");
    }
};
  WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
        })();

Dentro del estuche para tener soporte de WebP, he probado el siguiente código, pero no he tenido éxito.

// replace .gif with .webp
var allImages = document.body.getElementsByTagName("img");
var length = allImages.length;
var i;
for(i = 0; i < length; i++){
  allImages[i].src.replace("png", "testtest");
  console.log(allImages[i]);
}

Cuando se coloca en el encabezado, la consola muestra correctamente todas las etiquetas de imagen, pero la fuente no se ha cambiado desde el nombre de archivo.png que originalmente era.

¿Alguna idea sobre lo que se está haciendo incorrectamente?

Editar: Descubrí que descubrí el problema con por qué no estaba cargando las imágenes, gracias a Wsanville. Sin embargo, mirar la pestaña de red en Chrome todavía revela que estoy cargando tanto el PNG como ahora la imagen WebP también. ¿Cómo puedo evitar que la imagen PNG se cargue en primer lugar?

Answer 1

los replace función Devuelve una cadena, no lo muta. Solo necesita asignar el valor:

allImages[i].src = allImages[i].src.replace("old", "new")

Editado para comentarios:Todos los navegadores descargarán el archivo correspondiente en el src atributo de una imagen. Como alternativa a su enfoque, sugiero almacenar el nombre del archivo en un atributo diferente del img etiqueta.

Tus etiquetas de imagen podrían verse como:

<img alt="" data-png-source="/path/to/image.png" />

El JavaScript correspondiente podría establecer el src atributo a la versión correcta.

var supportsWebP = true; //set this variable properly

for(i = 0; i < length; i++)
{
    var image = allImages[i];
    var pngSource = image.getAttribute('data-png-source');
    image.src = supportsWebP ? pngSource.replace('.png', '.webp') : pngSource;
}

Answer 2

Sé que esta es una pregunta muy antigua, pero mientras buscaba una forma de reemplazar las imágenes web con los JPG correspondientes, no encontré mucho.

Con esta publicación, Junté esto, lo que parece funcionar a través de IE 9.

(En realidad, podría funcionar más atrás con una versión jQuery más antigua, pero estoy usando jQuery 2.1.1 que se rompe en IE <= 8, así que no estoy seguro)

Comprueba el soporte de .WEBP, entonces si el navegador no admite .webp, reemplaza todos los ocurrencias con un equivalente .jpg.

$(function() {
  var WebP=new Image();
  WebP.onload=WebP.onerror=function(){
    if(WebP.height!=2){
      $('img[src$=".webp"]').each(function(index,element) {
        element.src = element.src.replace('.webp','.jpg');
      });
    }
  };
  WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
});

Answer 3

Si tiene (algunos) control del servidor, puede usar la negociación de contenido en lugar de JavaScript. Ver http://httpd.apache.org/docs/2.2/content-negotiation.html Por cómo se hace en Apache.

Answer 4

En realidad, está tratando de resolver una variación del problema clásico de la imagen receptiva.

El problema que tiene al cambiar la imagen de los atributos SRC es que un navegador moderno mirará hacia adelante y comenzará a descargar imágenes con la extensión incorrecta. Probablemente no quiera descargar imágenes que no va a usar.

El truco es colocar la imagen dentro de un cárcel etiqueta, luego mejore progresivamente eso cambiando la ruta a medida que lee el contenido del texto de la etiqueta. En los navegadores más antiguos necesitarás un Polyfill simple Para leer el contenido de las etiquetas Noscript.

Puede ver mi serie sobre imágenes receptivas y soporte de webp aquí. Ver un ejemplo aquí Basado en el diseño receptivo clásico de Ethan Marcotte.