En una oración
WebP es un formato de imagen moderno desarrollado por Google que toma prestados trucos de la compresión de video para exprimir imágenes y dejarlas en un tamaño de archivo significativamente menor que los JPEGs o PNGs, todo esto manteniendo exactamente la misma calidad visual.
El problema que resuelve
Durante mucho tiempo, el internet fue impulsado visualmente por una tensa y frágil tregua entre dos facciones rivales: JPEG y PNG. (El GIF también andaba por ahí, haciendo ruido en un rincón, pero ya hablaremos de eso).
Si tenías una foto con millones de colores, usabas JPEG. JPEG tenía compresión "lossy" (con pérdida), lo que significa que botaba a la basura datos que se supone que tus ojos no podían ver para ahorrar espacio. Si tenías un logo, texto nítido, o necesitabas un fondo transparente, usabas PNG. PNG era "lossless" (sin pérdida): mantenía cada píxel perfecto, pero como resultado, los tamaños de archivo podían ser astronómicamente pesados. ¿Y si querías una animación? Usabas GIF, un formato ancestral de 1987 que era dolorosamente ineficiente y estaba limitado a 256 colores.
El problema fue que las imágenes crecieron hasta ocupar más del 60% de los bytes descargados en una página web promedio. A medida que el mundo pasaba de las computadoras de escritorio con banda ancha a los teléfonos móviles en redes 3G intermitentes, estos formatos de imagen inflados se convirtieron en un dolor de cabeza masivo. Las imágenes lentas en cargar significaban usuarios frustrados, carritos de compras abandonados y una web que se sentía como nadar en melaza.
Alrededor de 2010, Google decidió que este sistema de doble formato estaba roto. Habían adquirido recientemente On2 Technologies, una empresa que creó un formato de compresión de video llamado VP8. Los ingenieros de Google tuvieron un momento eureka: un video no es más que una secuencia rápida de imágenes fijas. ¿Qué pasaría si arrancaran la parte de "imagen fija" de su flamante codec de video VP8 y la empaquetaran como un archivo de imagen independiente?
Así nació WebP. Su misión era ser el "único formato para gobernarlos a todos". Soportaba compresión lossy que superaba al JPEG, compresión lossless que humillaba al PNG, transparencia (canales alpha) e incluso animación, para por fin mandar al GIF a jubilarse.
Cómo funciona bajo el capó
Para entender por qué WebP es tan eficiente, tienes que ver cómo hace trampa. En realidad no guarda tu imagen píxel por píxel; guarda instrucciones sobre cómo adivinar matemáticamente cómo se ve tu imagen.
Compresión Lossy: Codificación Predictiva
Cuando WebP opera en modo "lossy" (el reemplazo de JPEG), usa codificación predictiva, un truco heredado directamente del codec de video VP8.
WebP divide tu imagen en "macrobloques", unas grillas de 16x16 o 4x4 píxeles. En lugar de guardar independientemente el color de cada píxel en un bloque, el encoder de WebP mira los bloques que están inmediatamente arriba y a la izquierda del bloque actual. Se pregunta: "Basado en los píxeles que ya dibujé, ¿puedo predecir cómo se verá el siguiente bloque?"
Como la mayoría de las fotos tienen áreas continuas de color (como un cielo azul, una mejilla suave o una sombra), la predicción suele ser muy precisa. Entonces, WebP solo guarda el residual, es decir, la diferencia matemática entre su predicción y la imagen real.
Al guardar solo estas pequeñísimas diferencias en lugar de toda la data de los píxeles, WebP encoge drásticamente el tamaño del archivo.
Compresión Lossless: Otra bestia distinta
El WebP lossless (el reemplazo de PNG) no usa VP8. Usa un set de técnicas completamente diferente diseñado por Google específicamente para WebP. Se basa en un enfoque de varias etapas:
- Predicción Espacial: Al igual que su hermano lossy, intenta predecir píxeles basándose en sus vecinos.
- Transformación de Color: Separa la data de color para encontrar redundancias.
- El Verde es el Rey: Usa el canal verde como su baseline, prediciendo los valores de rojo y azul basándose en los valores del verde (porque los ojos humanos son más sensibles a este color).
- Compresión LZ77: Finalmente, toma toda esta data optimizada y la pasa por una versión avanzada del algoritmo de compresión basado en diccionarios LZ77.
La Estructura del Archivo (RIFF)
En el fondo, WebP está envuelto en un contenedor súper liviano llamado RIFF (Resource Interchange File Format). RIFF es una estructura de archivos etiquetada, lo que significa que un archivo WebP está organizado en chunks (fragmentos). Esto permite que el formato añada fácilmente metadata (como la data EXIF de tu cámara) o perfiles de color ICC sin romper la imagen principal.
| Característica | JPEG | PNG | GIF | WebP |
|---|---|---|---|---|
| Compresión Lossy | Sí | No | No | Sí |
| Compresión Lossless | No | Sí | Sí | Sí |
| Transparencia (Alpha) | No | Sí | 1-bit | Sí (Tanto Lossy como Lossless) |
| Animación | No | No | Sí | Sí |
| Ahorro Promedio | Baseline | Baseline | Baseline | ~25-34% más pequeño |
Historias del mundo real
La avalancha del E-commerce
Un retailer de ropa online de tamaño mediano notó que su bounce rate (tasa de rebote) era excepcionalmente alto en dispositivos móviles. Una auditoría reveló que las páginas de su catálogo de productos descargaban casi 15 megabytes en JPEGs de alta resolución. El navegador móvil se pasaba todo el rato parseando imágenes gigantes de cárdigans.
El equipo de ingeniería implementó un pipeline automatizado para servir imágenes WebP a los navegadores soportados. Al ajustar la compresión lossy, mantuvieron la nitidez visual exacta requerida para mostrar las texturas de la tela, pero bajaron el payload total de la página a 3.5 megabytes. El tiempo de carga de la página se desplomó en 4 segundos. En consecuencia, las tasas de conversión móvil se dispararon un 18%.
La lección: Los bytes de las imágenes están inversamente correlacionados con tus ingresos. Cuando sirves archivos más pequeños, los usuarios se quedan el tiempo suficiente para comprar algo de verdad.
La "Hero Image" transparente
Un diseñador web armó una landing page hermosa para un nuevo producto SaaS. La sección del hero presentaba una intrincada ilustración 3D de un rack de servidores flotando sobre un fondo con un degradado dinámico hecho en CSS. Para que esto funcionara, la imagen del rack de servidores necesitaba un fondo transparente.
El diseñador la exportó como un PNG-24 con canal alpha. Debido al complejo sombreado y a los millones de colores del render 3D, el PNG terminó pesando la brutalidad de 2.2 megabytes. Cargar esa página se sentía como volver a conectarse por módem en 2004.
El desarrollador tomó ese PNG y lo convirtió a WebP. Usó un superpoder muy específico de WebP: RGB lossy con un canal Alpha lossless. Esto significaba que los colores se comprimían como en un JPEG, pero la transparencia seguía siendo perfecta píxel por píxel, sin bordes aserrados. El archivo WebP resultante fue de 210 kilobytes: una reducción de tamaño del 90% sin ninguna pérdida de calidad perceptible.
La lección: Ya no tienes que elegir entre colores fotográficos ricos y un fondo transparente. WebP maneja ambos simultáneamente.
El blog lleno de memes
Un blog de cultura pop muy popular dependía a muerte de los GIFs animados para mostrar clips de películas y reacciones. Un solo artículo podía contener cinco GIFs, chupando 20 megabytes de data y haciendo que las laptops más viejas sonaran como turbinas de avión mientras el CPU sufría para decodificar ese formato ancestral.
Migraron su biblioteca multimedia a WebP Animado. Como los GIFs guardan cada uno de los frames como una imagen completa, mientras que el WebP Animado usa una compresión tipo video para guardar solo las diferencias entre los frames, el ahorro fue astronómico. Un GIF de 5MB se convirtió en un WebP de 800KB. El uso de CPU se fue a pique.
La lección: El formato GIF pertenece a un museo. Para animaciones cortas en loop en la web, los formatos modernos como WebP (o directamente videos MP4/WebM) son infinitamente superiores.
Errores comunes y trampas
- La trampa del doble Lossy: Convertir un JPEG recontra comprimido y lleno de artefactos a un WebP lossy es una pésima idea. El algoritmo de WebP, de hecho, intentará preservar a la perfección esos horribles bloques del JPEG tratándolos como parte de la imagen, lo que puede resultar en un archivo más pesado o en una imagen mucho más borrosa. Siempre haz la conversión desde la fuente de mayor calidad posible (como un archivo RAW, un PNG en alta resolución o el JPEG original sin compresión).
- Olvidarse del elemento HTML
<picture>: Aunque hoy WebP disfruta de un ~97% de soporte global en navegadores, durante años fue una fiesta exclusiva de Google. Safari de Apple arrastró los pies con el soporte para WebP hasta finales de 2020. Si te toca darle soporte a navegadores verdaderamente antiguos, no puedes simplemente aventar un.webpen un tag<img>. Tienes que usar el tag<picture>para ofrecer un fallback:<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="A reliable fallback"> </picture> - Asumir que WebP siempre es el más ligero: WebP es fantástico, pero no es magia. Para formas vectoriales increíblemente simples con colores planos (como un logo minimalista), un SVG casi siempre será más pequeño e infinitamente escalable. De la misma forma, los nuevos formatos de última generación como AVIF frecuentemente le ganan a WebP en puro ratio de compresión, aunque AVIF necesita mucho más poder de cómputo para hacer el encode.
- Ignorar el tiempo de encode en el servidor: WebP toma significativamente más poder de CPU para comprimirse que un JPEG. Si estás generando imágenes WebP "on-the-fly" (al vuelo) cuando el usuario las pide, el tiempo de CPU requerido para encodear la imagen podría llegar a causar un retraso que anule por completo el ahorro en ancho de banda. La conversión a WebP debería hacerse por adelantado (durante un build process o al momento de subirse), no de manera dinámica en el primer render.
Por qué debería estar en tu radar
Si construyes cosas para internet, la web performance ya no es un lujo; es un requerimiento fundamental. Los motores de búsqueda como Google penalizan activamente los sitios lentos en sus rankings, dándole muchísimo peso a las métricas conocidas como Core Web Vitals (específicamente al Largest Contentful Paint, o LCP). Como el "contenido más grande" de una pantalla suele ser una imagen, optimizar esa imagen es el camino más rápido para mejorar tu SEO.
Además, el ancho de banda cuesta dinero: tanto para ti (las tarifas de data egress de AWS son notoriamente caras) como para tus usuarios en países en desarrollo que usan planes de datos medidos.
Siempre que lidies con avatares subidos por usuarios, landing pages de marketing masivas, galerías de fotos o catálogos de e-commerce, WebP es la opción por defecto y la más pragmática de la década de 2020. Provee el mejor equilibrio entre un soporte de navegadores súper amplio, excelente calidad visual y una dramática reducción en el peso de los archivos.
Para ir más a fondo
- Google Developers: An Image Format for the Web - La documentación oficial y sumamente técnica, además de referencia del formato WebP directamente de sus creadores.
- MDN Web Docs: Image file type and format guide - El excelente desglose que hace Mozilla sobre cuándo usar WebP frente a otros formatos de imagen web.
- RFC 6386: VP8 Data Format and Decoding Guide - La especificación fundacional de la IETF para el codec de video VP8, el motor subyacente que le da vida a la compresión lossy de WebP.
- CanIUse: WebP image format - El tracker definitivo de compatibilidad entre navegadores, que muestra exactamente qué versiones de navegador soportan WebP a nivel global.