Acelerar la web con imágenes WebP

08-01-2023
Tiempo de lectura: 2 minutos

Uno de los recursos que cuesta más de cargar en una web son las imágenes. Google ha desarrollado un estandar que ofrece una compresion sin pérdidas, o con pérdidas, dando unos pesos de imagen muy reducidos.

WebP

WebP

WebP es un formato de imagen moderno que proporciona una compresión superior sin pérdidas y con pérdidas para imágenes en la web. Con WebP, los webmasters y los desarrolladores web pueden crear imágenes más pequeñas y sinpérdidas que hacen que la web sea más rápida.

Las imágenes sin pérdida de WebP son un 26% más pequeñas en comparación con las imágenes PNG. Las imágenes, con pérdida WebP, son un 25% a 34% más pequeñas que las imágenes JPEG comparables con un índice de calidad SSIM equivalente, lo que es mucho.

WebP sin pérdidas admite transparencia (también conocida como canal alfa) con solo 22% de bytes adicionales. Para los casos en los que la compresión RGB con pérdida es aceptable, WebP con pérdida también es compatible con la transparencia y, por lo general, proporciona tamaños de archivo 3 veces más pequeños en comparación con PNG, una pasada.

Para instalar un conversor de imágenes a webp sigue los pasos descritos en este artículo.

Compatibilidad

¿Cómo se detecta que un navegador es compatible con este formato? Aunque los principales navegadores son compatibles en sus últimas versiones, se pueden utilizar varias técnicas:

Accept Headers

Es común que los clientes web envíen un encabezado de solicitud Accept, que indica qué formatos de contenido están dispuestos a aceptar como respuesta. Si un navegador indica de antemano que "aceptará" el formato de imagen/webp, el servidor web sabe que puede enviar imágenes WebP de forma segura, lo que simplifica enormemente la negociación de contenido.

HTML5

HTML5 admite un elemento <picture>, que te permite enumerar varios objetivos de imagen alternativos en orden de prioridad, de modo que un cliente solicite la primera imagen candidata que pueda mostrar correctamente. Cada vez hay más navegadores que soportan <picture>.

JavaScript

Otro método de detección es intentar decodificar una imagen WebP muy pequeña que utiliza una característica particular y comprobar si no da error. En la web de Developers de Google se muestra un código para implementar la prueba:

// check_webp_feature:
//   'feature' puede ser una de estas:
// 'lossy', 'lossless', 'alpha' o 'animation'.
//   'callback(feature, result)' 
//retornará el resultado de la detección (¡de forma asíncrona!)
function check_webp_feature(feature, callback) 
{
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR
        /Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/
        ////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Permite probar cada uno de los tipos de imágenes en webp para ver si los soporta el navegador. Utiliza unas imágenes de prueba codificadas en el script.

Referencias

Elemento picture
https://developer.mozilla.org