¿Qué es el formato WebP?
WebP es un formato de imagen moderno desarrollado por Google y lanzado en 2010. Fue diseñado específicamente para la entrega web — tamaños de archivo más pequeños con igual o mejor calidad visual comparado con JPEG y PNG, soportando compresión con y sin pérdida, transparencia (canal alfa) y animación en un único formato.
En 2024, WebP es compatible con todos los navegadores principales y se considera ampliamente el formato estándar para imágenes web, con AVIF emergiendo como su sucesor de próxima generación.
Modos de compresión WebP
WebP soporta tres modos de compresión distintos, cada uno adecuado para diferentes tipos de imagen:
WebP con pérdida
Basado en la codificación intra-fotograma del códec de vídeo VP8. A igual configuración de calidad visual, los archivos WebP con pérdida son típicamente 25–35% más pequeños que JPEG.
WebP sin pérdida
Usa un algoritmo de compresión completamente diferente. Los archivos WebP sin pérdida son típicamente 26% más pequeños que archivos PNG equivalentes.
WebP con alfa (transparencia)
Ambos modos WebP soportan canales alfa de 8 bits:
- Con pérdida con transparencia: compresión con pérdida de RGB + compresión sin pérdida de alfa. Mucho más pequeño que PNG para fotos con transparencia.
- Sin pérdida con transparencia: compresión completamente sin pérdida para todos los canales.
WebP animado
La animación WebP almacena múltiples fotogramas con:
- Marca de tiempo por fotograma (retraso en milisegundos)
- Soporte de canal alfa completo
- Paleta de colores completa (a diferencia de GIF con 256 colores)
WebP vs. Otros formatos de imagen
| Característica | WebP | JPEG | PNG | AVIF | GIF |
|---|---|---|---|---|---|
| Compresión con pérdida | ✅ | ✅ | ❌ | ✅ | ❌ |
| Sin pérdida | ✅ | ❌ | ✅ | ✅ | ❌ |
| Transparencia/alfa | ✅ | ❌ | ✅ | ✅ | ✅ (1 bit) |
| Animación | ✅ | ❌ | ❌ (APNG sí) | ✅ | ✅ |
| Tamaño vs JPEG | ~30% más pequeño | Base | 2-5× más grande | ~35-40% más pequeño | Muy grande |
| Soporte en navegadores | ✅ Todos | ✅ Todos | ✅ Todos | ✅ La mayoría | ✅ Todos |
Soporte en navegadores
WebP tiene soporte universal en navegadores a partir de 2024:
| Navegador | Versión añadida |
|---|---|
| Chrome | 23 (2011) |
| Firefox | 65 (2019) |
| Safari | 14 (2020) |
| Edge | 18 (2018) |
Usar WebP en tu sitio web
HTML <img> con fallback
El elemento <picture> proporciona compatibilidad progresiva hacia atrás:
<picture>
<source srcset="imagen.webp" type="image/webp">
<img src="imagen.jpg" alt="Descripción" loading="lazy">
</picture>
Los navegadores modernos seleccionan la primera <source> que soportan; los navegadores más antiguos recurren a la etiqueta <img>.
Negociación de contenido del servidor
Sirve WebP automáticamente basándose en el encabezado Accept:
# Apache .htaccess
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^ %{REQUEST_URI}.webp [L,T=image/webp]
Convertir imágenes a WebP
cwebp (herramienta de línea de comandos de Google)
# Instalar: brew install webp (macOS) o apt install webp (Linux)
# Conversión con pérdida (calidad 80)
cwebp -q 80 entrada.jpg -o salida.webp
# Conversión sin pérdida
cwebp -lossless entrada.png -o salida.webp
# Conversión en lote de todos los JPEGs
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done
ImageMagick
# Con pérdida
magick convert -quality 80 entrada.jpg salida.webp
# Sin pérdida
magick convert entrada.png -define webp:lossless=true salida.webp
FFmpeg (para WebP animado desde vídeo/GIF)
# GIF a WebP animado
ffmpeg -i entrada.gif -vf scale=320:-1 -loop 0 salida.webp
WebP y el rendimiento web moderno
Los Core Web Vitals de Google incluyen Largest Contentful Paint (LCP) — qué tan rápido carga la imagen principal. Cambiar de JPEG/PNG a WebP típicamente reduce la carga de imágenes en un 25–35%, mejorando directamente las puntuaciones de LCP. Para un sitio web típico con muchas imágenes, convertir a WebP puede reducir el peso total de la página en un 20–30%.
Más allá de WebP: AVIF
AVIF (AV1 Image File Format) ofrece una compresión ligeramente mejor que WebP (30–40% más pequeño que JPEG vs. el 25–35% de WebP) y mejor soporte HDR/color amplio. El inconveniente: la codificación AVIF es mucho más lenta y el soporte en navegadores más antiguos es inexistente. Muchos sistemas de producción usan ambos: generan AVIF para navegadores modernos, WebP para intermedios, JPEG/PNG como fallback final — todo servido via el elemento <picture>.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: