WebP

WebP es un formato de imagen moderno desarrollado por Google y publicado en 2010. Su objetivo es ser el sucesor unificado de JPG y PNG para la web: soporta tanto compresión con pérdida (para fotografías) como sin pérdida (para gráficos), incluye transparencia (canal alfa) y permite animaciones. Con soporte completo en todos los navegadores desde 2020, es hoy el formato recomendado para imágenes en sitios web.

Cuánto ahorra WebP en la práctica

Google publicó en su presentación original estas cifras de ahorro medio sobre una muestra amplia de imágenes reales:

En la práctica, el ahorro varía: una fotografía con mucho ruido de grano ahorra menos; un gráfico con grandes áreas uniformes puede ahorrar más. Herramientas como Squoosh (squoosh.app) permiten ver la comparación visual lado a lado antes de exportar.

Cómo funciona la compresión de WebP

• Modo con pérdida: usa el mismo bloque de predicción que VP8 (el códec de vídeo de YouTube). En lugar de los bloques de 8×8 de JPEG, usa macrobloques de 16×16 píxeles con predicción intraframe, lo que reduce los artefactos de bloque a igualdad de tamaño.
• Modo sin pérdida: usa una variante de LZ77 con transformadas adicionales (codificación de paleta, sustracción de color, transformada espacial). El proceso es más complejo que PNG pero produce archivos más pequeños.
• Transparencia: ambos modos admiten canal alfa de 8 bits. En modo sin pérdida, el canal alfa es perfecto; en modo con pérdida, puede comprimirse de forma separada con pérdida o sin pérdida según la herramienta.

Soporte en navegadores y plataformas

Implementar WebP en una web

La estrategia recomendada es usar el elemento <picture> de HTML para servir WebP a quienes lo soportan y JPG/PNG como reserva:

<picture>
  <source srcset="imagen.webp" type="image/webp">
  <img src="imagen.jpg" alt="Descripción de la imagen">
</picture>

El navegador descarga el primer <source> que soporta. Si no soporta WebP, cae al <img> con el JPG.

Con Next.js, el componente <Image> convierte y sirve WebP automáticamente. Con Astro, la integración @astrojs/image hace lo mismo.

Convertir imágenes a WebP

Desde la línea de comandos con cwebp (herramienta oficial de Google):

# JPG a WebP con calidad 82
cwebp -q 82 foto.jpg -o foto.webp

# PNG a WebP sin pérdida
cwebp -lossless logo.png -o logo.webp

# Lote con ImageMagick
mogrify -format webp -quality 82 *.jpg

También puedes usar el conversor de imágenes directamente en el navegador sin instalar nada.

WebP frente a AVIF: ¿cuál es mejor?

AVIF (basado en AV1) es más eficiente que WebP para compresión agresiva, pero el tiempo de codificación es considerablemente mayor y el soporte en Safari hasta iOS 16 era limitado. Para la mayoría de proyectos en 2026, WebP es la opción práctica: soporte universal, buena compresión y codificación rápida. AVIF empieza a tener sentido si tienes un pipeline de imagen automatizado y priorizas el máximo ahorro de ancho de banda.