Ya escribimos algunos artículos sobre optimización de imágenes jpegoptim, jpegtran, optipng, pngcrush e ImageMagick. Hoy queremos describir la optimización de imágenes con webp.
La minificación y la compresión se han convertido durante mucho tiempo en cosas bastante estándar para optimizar el código de la página web. Todos los recursos web populares optimizan las imágenes, usan el mismo CSS siempre que sea posible y eligen los formatos de imagen correctos. Pero esto no es suficiente. Las estadísticas de HTTP Archive muestran que las imágenes ocupan alrededor del 64% del tamaño de una página web. El nuevo estándar WebP viene para ayudar a reemplazar JPEG y PNG.
Resumen de WebP
El formato apareció en 2010 y desde entonces ha sido desarrollado por Google. WebP se basa en el algoritmo de compresión de fotogramas clave del códec de vídeo VP8, con o sin pérdida, y se empaqueta en un contenedor basado en RIFF. Las imágenes sin pérdida de WebP son en promedio un 26 % más pequeñas en comparación con PNG, y las imágenes con pérdida de WebP son entre un 25 y un 34 % más pequeñas en comparación con JPEG con el mismo índice SSIM. El nuevo formato también admite transparencia (conocido como canal alfa).
Principio de funcionamiento
En la compresión con pérdida, WebP usa codificación predictiva, en la que los valores de los bloques de píxeles vecinos se usan para predecir el valor del bloque de píxeles deseado y luego se codifica la diferencia.
La compresión sin pérdidas utiliza fragmentos conocidos de la imagen para reconstruir píxeles con precisión. También se puede usar una paleta local si no hay un algoritmo coincidente que le interese.
Ventajas y desventajas
Detrás:
- tamaño de imagen más pequeño;
- algoritmo de compresión avanzado;
- alta calidad de imagen;
- apoyo a la transparencia
En contra:
- pobre prevalencia;
- “Plasticidad” en compresión con pérdidas;
- los colores en píxeles y otros gráficos de computadora pueden perderse.
WebP ya es compatible con Chrome, Opera y el navegador estándar de Android y, con la ayuda de la biblioteca WebPJS, se puede mostrar en todos los navegadores populares (en IE 6 y superior con Flash). Además, se ha desarrollado una biblioteca ligera de codificación y decodificación de libwebp, utilidades de línea de comandos para codificar y decodificar WebP, así como herramientas para ver, multiplexar y animar imágenes en este formato.
Instalando cwebp
Cwebp tiene binarios de Linux precompilados. Por lo tanto, la instalación es fácil de descargar y descomprimir:
# wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz # tar zxf libwebp-1.0.3-linux-x86-64.tar.gz # cp -a libwebp-1.0.3-linux-x86-64/bin/cwebp /usr/bin/ # cp -a libwebp-1.0.3-linux-x86-64/bin/dwebp /usr/bin/
Uso de cwebp
La utilidad cwebp se usa para convertir de JPEG, PNG y TIFF, y dwebp se usa para decodificar. La conversión se inicia con un comando simple (desde el directorio de la utilidad):
# cwebp input.png -q 80 -o output.webp
Por el mismo principio, se puede iniciar la decodificación. Hay muchas opciones y parámetros adicionales, incluso para verificar la codificación.
Despliegue WebP
Entonces, estaba interesado en el nuevo formato, hizo todas las pruebas, miró las estadísticas nuevamente y se aseguró de que Chrome siga siendo el navegador web más popular. ¿Qué sigue? A continuación, debe hacer una copia de todas las imágenes en WebP (puede escribir un script simple para convertir todos los archivos), y luego verifique los usuarios del sitio y colóquelos en imágenes compactas, si su navegador es compatible con WebP.
Es decir, puede crear su propia secuencia de comandos que verificará la compatibilidad con el formato del navegador del cliente, que luego se desconectará del servidor web o asignará esta tarea por completo al servidor web. La segunda opción nos parece más lógica.
Negociación usando el encabezado Aceptar
Los navegadores pasan el encabezado Aceptar como:
en Ópera:
Accept: text / html, application / xml; q = 0.9, application / xhtml + xml, image / png, image / webp, image / jpeg, image / gif, image / x-xbitmap, * / *; q = 0.1
en Chrome:
Accept: image / webp, * / *; q = 0.8
Sabiendo esto, puede configurar el servidor web para transmitir automáticamente WebP. Como ejemplo, usamos Nginx, en cuyo archivo de configuración debe agregar algo como esto:
location / {
if ($http_accept ~* "webp") { set $webp_accept "true"; }
if (-f $request_filename.webp) { set $webp_local "true"; }
if ($webp_local = "true") {
add_header Vary Accept;
}
# if the client supports WebP, then upload the file
if ($webp_accept = "true") {
rewrite (.*) $1.webp break;
}
} La configuración de Apache será similar. Si no se encuentra compatibilidad con WebP en Aceptar, se transfieren los archivos normales. Bueno, si Nginx se usa como proxy para almacenar estáticas en caché, entonces la configuración será diferente:
server {
location / {
if ($http_accept ~* "webp") { set $webp T; }
proxy_cache_key $scheme$proxy_host$request_uri$webp;
proxy_pass http://backend;
proxy_cache my-cache;
}
} Conclusión
El formato de imagen WebP reducirá significativamente el tamaño de la página web, pero dada su compatibilidad limitada, debe configurar adicionalmente el servidor web y contener copias de todas las imágenes en varios formatos.