Formato de imagen WebP: El estándar moderno de imagen de Google explicado
WebP es un formato de imagen moderno desarrollado por Google, introducido en 2010. Construido sobre el codec de vídeo VP8 para compresión con pérdida y codificación predictiva estilo PNG para sin pérdida, WebP entrega tamaños de archivo significativamente más pequeños que JPEG y PNG mientras soporta características que ambos formatos carecen: animación (como GIF), transparencia alpha completa en modo con pérdida e inserción de metadatos.
Fundamento técnico
WebP con pérdida
WebP con pérdida usa el algoritmo de codificación intra-fotograma VP8 — la misma tecnología usada para fotogramas clave de vídeo VP8. El proceso de codificación:
-
Conversión de espacio de color: RGB → YCbCr (luma + dos canales de croma). Los canales de croma se submuestrean 4:2:0, explotando la menor sensibilidad del sistema visual humano al color que al brillo.
-
Predicción de macroblocks: La imagen se divide en macroblocks de 16×16 (luma) y bloques de 8×8 (croma). Los valores de cada bloque se predicen a partir de bloques adyacentes ya codificados usando uno de 10 modos de predicción.
-
Transformada DCT: El residuo de predicción se transforma usando la Transformada Discreta del Coseno, convirtiendo datos espaciales en coeficientes de frecuencia.
-
Cuantización: Los coeficientes DCT se dividen por una matriz de cuantización (controlada por el parámetro de calidad 0-100).
-
Codificación aritmética: Los coeficientes cuantizados se codifican por entropía usando el codificador aritmético booleano de VP8.
WebP sin pérdida
WebP sin pérdida usa un enfoque completamente diferente basado en codificación de referencia hacia atrás:
- Codificación predictiva con 14 modos de predicción por píxel
- Transformación de color 2D para decorrelacionar canales R, G, B
- Indexación de color para imágenes con pocos colores únicos
- LZ77 + Huffman: codifica datos residuales
WebP sin pérdida es típicamente un 26% más pequeño que PNGs equivalentes.
Animación WebP (ANIM)
WebP animado usa un chunk ANIM (parámetros globales) + chunks ANMF repetidos (datos por fotograma). Cada fotograma puede ser con pérdida o sin pérdida independientemente. WebP animado logra consistentemente archivos 50-80% más pequeños que GIFs equivalentes.
Comparación de tamaño de archivo
| Tipo de contenido | vs. JPEG | vs. PNG | vs. GIF |
|---|---|---|---|
| Fotografías (con pérdida) | 25-34% más pequeño | — | — |
| Gráficos con transparencia (sin pérdida) | — | 26% más pequeño | — |
| Gráficos con transparencia (con pérdida) | — | 60-70% más pequeño | — |
| Animaciones | — | — | 50-80% más pequeño |
Soporte de navegador y plataforma
A partir de 2024: Chrome/Edge/Opera (soporte completo desde 2014), Firefox (desde Firefox 65, 2019), Safari (desde Safari 14 / macOS Big Sur, 2020), iOS Safari (desde iOS 14, 2020). Soporte global de navegadores: ~97%.
Conversión a WebP
cwebp (codificador oficial de Google)
# Codificación con pérdida (calidad predeterminada 75)
cwebp entrada.jpg -q 80 -o salida.webp
# Codificación sin pérdida
cwebp -lossless entrada.png -o salida.webp
# Casi sin pérdida (reduce tamaño siendo visualmente idéntico)
cwebp -near_lossless 40 entrada.png -o salida.webp
# WebP animado desde fotogramas
img2webp -d 100 fotograma1.png fotograma2.png -o animacion.webp
ffmpeg
# Imagen a WebP con pérdida
ffmpeg -i entrada.jpg -c:v libwebp -quality 80 salida.webp
# PNG a WebP sin pérdida
ffmpeg -i entrada.png -c:v libwebp -lossless 1 salida.webp
# GIF a WebP animado
ffmpeg -i entrada.gif -c:v libwebp_anim -quality 70 -loop 0 salida.webp
# Clip de vídeo a WebP animado
ffmpeg -i entrada.mp4 -vf "fps=15,scale=480:-1" \
-c:v libwebp_anim -quality 70 -loop 0 \
-t 5 salida.webp
Guía de configuración de calidad
| Calidad | Caso de uso | Tamaño típico vs. JPEG |
|---|---|---|
| 90-100 | Casi sin pérdida, archivo | Similar o mayor |
| 80-89 | Imágenes web de alta calidad | 20-30% más pequeño |
| 70-79 | Entrega web estándar | 30-40% más pequeño |
| 60-69 | Redes sociales, miniaturas | 40-50% más pequeño |
| <60 | Compresión agresiva | 50%+ más pequeño |
Servir WebP con fallback (HTML)
<!-- Enfoque moderno: elemento <picture> con fallback -->
<picture>
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" alt="Descripción" width="800" height="600">
</picture>
.htaccess de Apache
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.%2.webp [T=image/webp,E=accept:1]
Header append Vary Accept env=REDIRECT_accept
Limitaciones de WebP
- Clientes de correo: Outlook para Windows no renderiza imágenes WebP en línea. Usa JPEG/PNG para campañas de email.
- Flujo de edición: WebP con pérdida debe tratarse como formato de entrega — recodificar WebP con pérdida causa pérdida de generación similar a JPEG.
- Impresión: WebP usa profundidad de color de 8 bits en modo estándar. Para impresión que requiere 16 bits o CMYK, usa TIFF o PNG.
- HDR: WebP soporta HDR limitado; AVIF y JPEG XL ofrecen mejor soporte HDR para fotografía.
WebP vs. AVIF vs. JPEG XL
| Característica | WebP | AVIF | JPEG XL |
|---|---|---|---|
| Compresión (fotos) | -30% vs JPEG | -50% vs JPEG | -60% vs JPEG |
| Sin pérdida | ✅ | ✅ | ✅ |
| Animación | ✅ | ✅ | ✅ |
| HDR | Limitado | ✅ Completo | ✅ Completo |
| Soporte navegador | 97% | 95% | ~80% |
| Velocidad codificación | Rápida | Lenta | Media |
Resumen
WebP ha madurado convirtiéndose en el formato de imagen moderno por defecto de la web. Su compresión con pérdida basada en VP8, modo sin pérdida, soporte de animación y transparencia alpha completa abordan todas las principales limitaciones de JPEG, PNG y GIF en un único formato. Con soporte de navegador del 97%+, la barrera principal para la adopción ha sido eliminada. Para cualquier pipeline de entrega de imágenes web, convertir activos JPEG y PNG a WebP es una optimización directa y de alto impacto sin sacrificio de calidad.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: