WebP y AVIF: compara salidas y conserva una alternativa

No elijas AVIF por una cifra de ahorro genérica. Comprueba cuánto reduce tus imágenes, si el resultado conserva el detalle necesario y si tus destinos lo abren. Mantener varias variantes también implica almacenamiento, generación y pruebas.

Comparación con archivos disponibles

Nuestro caso de formatos comparte original, generador y cinco salidas. En ese patrón de 800 × 600, WebP con calidad 80 ocupa 40808 bytes y AVIF con calidad 50, 17608 bytes. Son ajustes distintos y no una comparación de igual calidad perceptual. La región de ruido y los bordes permiten ver qué ha cambiado.

Descarga WebP, AVIF y los parámetros completos. Repite con tus propias imágenes antes de adoptar una receta. No hemos medido tiempos de codificación comparables y no prometemos segundos por megapíxel.

Entrega con alternativa

picture deja elegir al navegador el primer formato compatible de la lista; no compara automáticamente su calidad ni su tamaño. Este ejemplo usa nuestros archivos existentes:

<picture>
  <source type="image/avif" srcset="/examples/formats/sample-q50.avif">
  <source type="image/webp" srcset="/examples/formats/sample-q80.webp">
  <img src="/examples/formats/sample-q80.jpg"
       alt="Synthetic gradient, edges and noise" width="800" height="600">
</picture>

En una web en español, traduce también el texto alternativo. Comprueba el formato seleccionado con la pestaña Red del navegador y pruébalo en los dispositivos y aplicaciones de destino. Las cuotas globales de soporte no describen necesariamente a tus visitantes; la guía de formatos de MDN enlaza datos de compatibilidad.

Qué hace OpenImages

JPG a WebP y PNG a WebP exportan WebP en el navegador. AVIF a PNG ayuda a abrir una entrada AVIF en otros programas, sujeto al soporte del navegador. Esas herramientas no constituyen un codificador AVIF: el AVIF de este ejemplo se generó con el script Sharp descargable.

Para una imagen que cambias a menudo, mide también cuánto tarda el proceso completo en tu equipo. Para una imagen estable, compara el ahorro observado con el coste de mantener más variantes. Un ajuste 100 no implica por sí solo modo sin pérdidas; selecciona explícitamente ese modo cuando tu codificador lo admita.