A día de hoy, la velocidad de carga de los sitios web, se ha convertido en uno de los ajustes más importantes a la hora de optimizar las imágenes para conseguir ese ansiado 100/100 que nos brinda la herramienta Google Page Speed Insight.
Es por ello, que Google presento ya en 2010 su propio formato libre de imagen para páginas web más rápidas, llamado WebP. Veamos un poco de que se trata este formato de imagen.
¿Qué es 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 ricas que hacen que la web sea más rápida.
Las imágenes sin pérdida de WebP son un 26% más pequeña en tamaño que las PNG. Las imágenes con pérdida de WebP son un 25-34% más pequeña que las imágenes JPEG comparables con un índice de calidad SSIM equivalente.
WebP sin pérdida admite la transparencia (también conocido como canal alfa) a un costo de solo 22% de bytes adicionales. Para los casos en que la compresión RGB con pérdida es aceptable, WebP con pérdida también admite transparencia, por lo general proporciona 3 veces más pequeños tamaños de archivo en comparación con PNG.
¿Cómo funciona WebP?
La compresión WebP con pérdida utiliza codificación predictiva para codificar una imagen, el mismo método utilizado por el códec de video VP8 para comprimir fotogramas clave en videos. La codificación predictiva utiliza los valores en bloques vecinos de píxeles para predecir los valores en un bloque y luego codifica solo la diferencia.
La compresión WebP sin pérdida utiliza fragmentos de imagen ya vistos para reconstruir exactamente nuevos píxeles. También puede usar una paleta local si no se encuentra ninguna coincidencia interesante.
Veamos un ejemplo:
Imagen en formato PNG con peso 53KB
Imagen en formato WebP con peso 11KB
La imagen de la izquierda, su formato es PNG y ya estaba comprimida y adaptada para web con un peso de 53KB. Hemos convertido esta imagen a un formato WebP, y podemos apreciar mantiene las mismas dimensiones y no ha perdido resolución y sin embargo su peso es de 11KB.
Utilizar WebP es nuestras páginas web nos ayudará a mejorar el tiempo de carga y ofrecer una mejor experiencia a nuestros usuarios.
Por desgracia no todos los navegadores ofrecen aún soporte a este nuevo formato por lo que en muchos casos tendremos que utilizar ambos formatos.
La forma correcta de hacerlo será la siguiente:
De esta forma, si el navegador sí permite los WebP, cargará primero dicho formato. En el caso de no saber interpretarlo cargará las imágenes en jpg.
Soporte Web
WebP es compatible de forma nativa en Google Chrome, Firefox, Edge, el navegador Opera y en muchas otras herramientas y bibliotecas de software. Los desarrolladores también han agregado soporte a una variedad de herramientas de edición de imágenes.
WebP incluye la biblioteca de codificación y decodificación liviana libwebp y las herramientas de línea de comandos cwebp y dwebp para convertir imágenes hacia y desde el formato WebP, así como herramientas para ver, mezclar y animar imágenes WebP. El código fuente completo está disponible en la página oficial de descarga de Google.
La otra alternativa es descargar el precompilado cwebp herramienta de conversión para Linux, Windows o Mac OS X.
