WebP vs PNG y JPG: formatos modernos para la web

En la duda entre WebP vs PNG y JPG, WebP gana en tu propia web: puede comprimir como un JPG o sin pérdida como un PNG, admite transparencia y genera archivos más ligeros con la misma calidad visual. Todos los navegadores actuales lo admiten. Donde PNG y JPG siguen ganando es fuera de tu web: subidas a Instagram y LinkedIn, adjuntos de correo, archivos para clientes e imprentas. Así que la regla práctica es sencilla. Crea y guarda los originales en PNG y sirve WebP (o AVIF) a los visitantes.

Qué es WebP

WebP es un formato de imagen desarrollado por Google y documentado en web.dev. Un solo formato cubre lo que antes necesitaba tres: fotos con pérdida como JPG, gráficos sin pérdida con transparencia como PNG y animaciones cortas como GIF. El ahorro viene de una compresión más inteligente, que predice cada bloque de píxeles a partir de sus vecinos y guarda solo la diferencia.

WebP vs PNG para gráficos y transparencia

Para logotipos, imágenes de interfaz y recortes, WebP sin pérdida conserva cada píxel como PNG y suele pesar menos. WebP con pérdida y transparencia es la gran ventaja: un recorte de producto con un borde suave y translúcido puede ocupar una fracción del PNG sin diferencia visible.

Los degradados son la excepción que exige cuidado. Una mezcla oscura y suave puede mostrar bandas en WebP con pérdida igual que en JPG. Si tu imagen principal es casi todo degradado, compara la versión con pérdida a calidad alta con la versión sin pérdida, y plantéate si debería ser una imagen: un degradado CSS no cuesta ninguna descarga.

WebP vs JPG para fotos

En fotografías, WebP con pérdida a una calidad de entre 75 y 80 suele igualar a un JPG al 85 y pesa menos. La diferencia se nota en páginas con muchas imágenes: cuadrículas de productos, portfolios, blogs. En una sola foto principal la mejora es real pero menos espectacular, y acertar con las dimensiones en píxeles importa más que el formato.

1. 1

   Primero el tamaño

   Exporta la foto al tamaño máximo al que se muestra de verdad. Una imagen principal de web de 1920×1080 nunca necesita un original de 6000 píxeles.

2. 2

   Elige una calidad

   Empieza con WebP con pérdida a 80. Mira la piel, los cielos y las esquinas oscuras al 100% de zoom, baja hasta que algo cambie y vuelve un paso atrás.

3. 3

   Crea versiones más pequeñas

   Exporta anchos de 640, 1280 y 1920 píxeles para que los móviles descarguen el pequeño.

4. 4

   Sirve con srcset

   Deja que el navegador elija el ancho adecuado con srcset y sizes, como en el código de abajo.

AVIF vs WebP

AVIF es más reciente y suele comprimir más que WebP, sobre todo en fotografías y tonos suaves. Lo admiten todos los navegadores principales actuales. Sus costes son una codificación más lenta, que importa si conviertes imágenes al vuelo, y menos herramientas que lo abran. Muchas webs sirven primero AVIF, luego WebP y por último JPG, y dejan que el navegador tome el primero que entienda.

<picture>
  <source type="image/avif" srcset="hero-1280.avif 1280w, hero-1920.avif 1920w" sizes="100vw">
  <source type="image/webp" srcset="hero-1280.webp 1280w, hero-1920.webp 1920w" sizes="100vw">
  <img src="hero-1920.jpg" alt="Evening light over the harbour" width="1920" height="1080" fetchpriority="high">
</picture>

Si usas un framework o una CDN de imágenes, puede que haga todo esto automáticamente a partir de un único original subido. Revisa lo que genera antes de convertir nada a mano.

Dónde siguen ganando PNG y JPG

Las redes sociales convierten las subidas por su cuenta, y algunas rechazan o tratan mal WebP. Los rastreadores de vistas previas de enlaces también varían, así que deja tu imagen Open Graph como PNG o JPG de 1200×630. Y un WebP enviado a un cliente a menudo se abre en la aplicación equivocada o no se abre.

Cómo convertir PNG a WebP

La herramienta gratuita de línea de comandos cwebp de Google convierte un archivo o una carpeta entera, y la mayoría de editores de imagen y herramientas de diseño ya exportan WebP directamente.

# lossy, good for photos
cwebp -q 80 photo.png -o photo.webp

# lossless, good for logos and interface graphics
cwebp -lossless logo.png -o logo.webp

# a whole folder
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

Tus archivos de diseño originales pueden quedarse en PNG: Gradiently exporta los diseños en PNG y JPG, que son la entrada correcta para este paso y los archivos correctos para cualquier subida a redes. Para entender los ajustes de calidad, lee compresión de imágenes sin estropear los degradados; para la pareja clásica, PNG vs JPG; y para la lista completa de velocidad, optimizar imágenes para la web.