Introducción al formato WebP

WebP es un nuevo formato de imagen desarrollado por Google que admite compresión con pérdida, compresión sin pérdida y transparencia; sus archivos comprimidos son más pequeños que los de formatos como JPEG y PNG. Por ello, permite ahorrar ancho de banda, reducir el tiempo de carga de las páginas y disminuir el consumo de datos de los usuarios.

Las aplicaciones de Android e iOS pueden admitir fácilmente el formato WebP con solo incorporar la biblioteca de decodificación proporcionada por Google. Sin embargo, en la web, la compatibilidad con WebP todavía no está muy extendida, según Datos de Can I Use，actualmente solo los navegadores Chrome y Opera, así como WebView de Android, admiten WebP. Pero, con tantas ventajas que ofrecen las imágenes WebP, ¿podemos utilizarlas en páginas web? Sí. Este artículo aborda esta cuestión.

Convertir las imágenes existentes al formato WebP

Para utilizar el formato WebP, debes crear una versión en WebP de todas las imágenes que utiliza tu sitio web. Si utilizas un proveedor de CDN, normalmente ofrecerá una opción para convertirlas a WebP. Por ejemplo, Upyun：

Tras añadir esta configuración, podemos utilizar la versión de los recursos en formato WebP agregando el sufijo correspondiente a la URL de la imagen.

También puedes utilizar complementos de webpack y gulp para convertir formatos de imagen por lotes. No entraré en detalles aquí.

Usar el formato WebP en el navegador

Como no todos los navegadores admiten el formato WebP, tenemos dos opciones：utilizar WebP únicamente en los navegadores compatibles con este formato; o hacer que los navegadores que no lo admiten puedan hacerlo.

Método uno： <picture>Etiquetas

<picture>es una nueva etiqueta de HTML5, similar a<video>También permite especificar recursos en varios formatos, para que el navegador elija y cargue uno que admita.

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

Si el navegador admite el formato WebP, cargará image.webp，de lo contrario, se cargará image.jpg。

Aunque el navegador no admita<picture>etiqueta, la imagen seguirá mostrándose con normalidad, aunque es posible que CSS no pueda seleccionarla correctamente picture elemento. Por ejemplo, en IE8, el siguiente CSS no surtirá efecto：

.picture img {  width: 100px;  height: 100px;
}

Pero podemos definir los estilos de la imagen de esta manera:

.image {  width: 100px;  height: 100px;
}

Aunque el navegador utilice imágenes en formato WebP, al final se seguirá aplicando img el estilo del elemento.

Sin embargo, basta con utilizar html5shiv，para que los navegadores antiguos admitan esta etiqueta y los selectores CSS puedan utilizarse con normalidad.

Este método es el más sencillo, pero no funciona con las imágenes de CSS（como los fondos）.

Método dos: usar JS para sustituir la URL de la imagen.

Muchas de nuestras páginas utilizan la «carga diferida» de imágenes: normalmente, la URL de la imagen se coloca en img en un atributo personalizado del elemento y después usar JS para asignar la URL, en el momento adecuado, a src atributo. Siguiendo un principio similar, podemos, según si el navegador admite el formato WebP, asignar a img atribuir a los elementos diferentes src valor.

Primero necesitamos comprobar con JS si el navegador admite el formato WebP. Para ello, le proporcionamos una imagen en formato WebP y observamos si puede renderizarla correctamente. Este método es asíncrono, así que las operaciones posteriores deben escribirse en la función de devolución de llamada. Podemos guardar el resultado en localStorage dentro, de modo que después no sea necesario comprobarlo de nuevo.

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

Después, utiliza el siguiente código para sustituir el src correspondiente según se admita o no WebP.

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

La ventaja de este método es que puede combinarse con las funciones de carga diferida existentes. Además, con JS también podemos gestionar las imágenes de CSS (como las imágenes de fondo).

Método tres：utilizar JS para decodificar imágenes WebP

Puesto que el decodificador de WebP es de código abierto, ¿se podría implementar en JS? Por supuesto que sí，Alguien llegó a escribir un decodificador de WebP en JS。Al incorporar esta biblioteca JS, todas las imágenes WebP se descodifican con JS y después se convierten en base64，y después sustituir la URL original; así, los navegadores que inicialmente no admitían WebP podrán mostrarlo correctamente. Esta biblioteca es muy sencilla de utilizar; basta con consultar las instrucciones de su página web.

La desventaja de este método es que, para descodificar las imágenes WebP, JS necesita realizar aquí una solicitud asíncrona a la URL de src（aunque, como la imagen ya se había descargado previamente, se utiliza directamente la caché）；además, la descodificación con JS es relativamente lenta y afecta al rendimiento, por lo que la imagen puede tardar un tiempo en mostrarse.

Estas son algunas formas de utilizar imágenes WebP en el navegador; puedes elegir la que mejor se adapte a tu situación. En nuestra experiencia, al utilizar WebP, el tamaño de las imágenes se redujo generalmente en más de 1/3, lo que aceleró la carga y ahorró datos a los usuarios. Recomendamos encarecidamente empezar a utilizar este formato desde ahora.