WebP: El Formato de Imagen Web de Google — Guía Completa

WebP: El Formato de Imagen Web de Google — Guía Completa

WebP es el formato de imagen que Google construyó para hacer la web más rápida. Desde su introducción en 2010, ha alcanzado soporte universal en navegadores y se ha convertido en el estándar de facto para la entrega de imágenes web, recomendado por Lighthouse, las directrices de Core Web Vitals y todas las CDN principales.

¿Qué Es WebP?

WebP es un formato de imagen rasterizado desarrollado por Google basado en tecnología del códec de vídeo VP8 (para compresión con pérdida) y un novedoso algoritmo sin pérdida. Fue diseñado específicamente para ser mejor que JPEG para fotos y mejor que PNG para gráficos con transparencia — todo en un único formato.

WebP tiene cuatro variantes:

Formato Contenedor WebP: RIFF

WebP usa el contenedor RIFF (Resource Interchange File Format):

Fichero WebP
├── Cabecera del chunk RIFF (12 bytes)
│   ├── "RIFF" (4 bytes)
│   ├── Tamaño del fichero - 8 (4 bytes, little-endian)
│   └── "WEBP" (4 bytes)
└── Chunk(s)
    ├── Simple con pérdida:    chunk VP8  (flujo VP8)
    ├── Simple sin pérdida:    chunk VP8L (flujo sin pérdida)
    └── Extendido:             chunk VP8X
                               ├── [ICCP] — Perfil de color ICC
                               ├── [ANIM] — Parámetros de animación
                               ├── [ANMF] × N — Fotogramas de animación
                               ├── [ALPH] — Canal alfa
                               ├── [VP8 o VP8L] — Imagen principal
                               ├── [EXIF] — Metadatos EXIF
                               └── [XMP ] — Metadatos XMP

Conversión con cwebp y dwebp

# Codificar JPEG a WebP con pérdida (calidad 80)
cwebp -q 80 entrada.jpg -o salida.webp

# Codificar PNG a WebP sin pérdida
cwebp -lossless entrada.png -o salida.webp

# PNG con pérdida + canal alfa separado
cwebp -q 80 -alpha_q 80 entrada.png -o salida.webp

# Casi sin pérdida (visualmente sin pérdida, más pequeño que sin pérdida real)
cwebp -near_lossless 40 entrada.png -o salida.webp

# Decodificar WebP a PNG
dwebp salida.webp -o decodificado.png

# Conversión por lotes de todos los JPEGs a WebP
for f in *.jpg; do
    cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

Guía de parámetro de calidad:

• 80–85: Calidad web estándar (indistinguible del original en visualización a 1×)
• 90–95: Alta calidad (diferencia sutil solo bajo inspección cercana)
• Usa -m 6 (método más lento) para 10-20% de reducción extra al mismo nivel de calidad

Conversión con Python

from PIL import Image
import os

# Abrir WebP y convertir a JPEG
with Image.open('entrada.webp') as img:
    if img.mode in ('RGBA', 'LA', 'P'):
        fondo = Image.new('RGB', img.size, (255, 255, 255))
        if img.mode == 'P':
            img = img.convert('RGBA')
        fondo.paste(img, mask=img.split()[-1] if 'A' in img.mode else None)
        fondo.save('salida.jpg', 'JPEG', quality=92)
    else:
        img.convert('RGB').save('salida.jpg', 'JPEG', quality=92)

# Convertir JPEG/PNG a WebP
with Image.open('entrada.jpg') as img:
    img.save('salida.webp', 'WEBP', quality=82, method=6)

# WebP sin pérdida
with Image.open('icono.png') as img:
    img.save('icono.webp', 'WEBP', lossless=True)

# Conversión por lotes con informe de ahorro
def convertir_a_webp(directorio, calidad=80):
    for nombre in os.listdir(directorio):
        if nombre.lower().endswith(('.jpg', '.jpeg', '.png')):
            src = os.path.join(directorio, nombre)
            dst = os.path.join(directorio, os.path.splitext(nombre)[0] + '.webp')
            with Image.open(src) as img:
                img.save(dst, 'WEBP', quality=calidad, method=4)
            tam_orig = os.path.getsize(src)
            tam_webp = os.path.getsize(dst)
            ahorro = (1 - tam_webp/tam_orig) * 100
            print(f"{nombre}: {tam_orig//1024}KB → {tam_webp//1024}KB ({ahorro:.1f}% ahorrado)")

convertir_a_webp('./imagenes', calidad=82)

Servir WebP con el Elemento HTML picture

<!-- Mejora progresiva: WebP para navegadores compatibles, JPEG de respaldo -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg"  type="image/jpeg">
  <img src="hero.jpg" alt="Imagen hero" width="1200" height="600"
       loading="lazy" decoding="async">
</picture>

En Apache .htaccess — servir WebP automáticamente si está soportado y disponible:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^(.+)\.(jpe?g|png)$ $1.webp [T=image/webp,L]
</IfModule>

Comparativa WebP vs JPEG vs PNG vs AVIF

Cuándo Usar WebP

Usa WebP para todas las imágenes web excepto cuando:

• Necesites HDR o gama de color amplia → usa AVIF
• Necesites máxima compatibilidad con usuarios legacy → mantén respaldos JPEG/PNG
• Crees imágenes listas para imprimir → usa TIFF o PDF

Recomendaciones específicas:

• Fotos, imágenes hero, imágenes de blog: WebP con pérdida a calidad 80–85
• Imágenes de producto con fondos transparentes: WebP con pérdida + alfa
• Logos e iconos con colores sólidos: WebP sin pérdida (o simplemente usa SVG)
• Banners animados que reemplazan GIF: WebP animado (o bucle MP4 corto)

Resumen

WebP ofrece las ganancias de rendimiento que la web necesita: un 30% más pequeño que JPEG para fotos, un 26% más pequeño que PNG para gráficos, con soporte completo para transparencia y animación. Su soporte casi universal en navegadores (97%+) significa que puede servirse a prácticamente todos los usuarios.

Conversiones relacionadas

Lo más habitual al trabajar con imágenes son estas direcciones de conversión:

• JPG a WEBP
• PNG a JPG
• HEIC a JPG
• PNG a WEBP
• TIFF a PNG
• RAW a JPG