Para la mayoría de los sitios web en 2026, la respuesta es por capas: sirve AVIF para el mayor ahorro (a menudo un 50% más pequeño que JPEG con calidad similar), recurre a WebP para una compatibilidad casi universal, y mantén JPEG para los clientes más antiguos. AVIF gana en tamaño de archivo, WebP gana en compatibilidad, JPEG gana en estar en todas partes.
Si has estado dudando sobre qué formato de imagen de nueva generación adoptar, aquí está la parte liberadora: no tienes que elegir solo uno. El enfoque moderno sirve los tres y permite que cada navegador tome la versión más pequeña que pueda decodificar. Esta guía te da la regla de decisión, las ventajas reales de tamaño y compatibilidad, y cómo cada formato impacta en las Core Web Vitals, para que puedas dejar de adivinar y publicar.
WebP vs AVIF vs JPEG: La respuesta rápida#
Los tres formatos se sitúan en un claro espectro de más nuevo y más pequeño frente a más antiguo y más seguro:
- JPEG (1992) es la línea base universal. Todos los navegadores, sistemas operativos y dispositivos lo abren. También es el menos eficiente, por lo que la misma calidad cuesta más bytes.
- WebP (Google, 2010) suele ser entre un 25% y un 35% más pequeño que JPEG con calidad comparable, y ahora es compatible con prácticamente todos los navegadores en uso. Este es tu valor predeterminado seguro.
- AVIF (2019, basado en el códec de video AV1) es el más eficiente de los tres, frecuentemente alrededor de un 50% más pequeño que JPEG y notablemente más pequeño que WebP, con soporte en todos los navegadores principales actuales.
La decisión en una línea: usa AVIF como formato principal con WebP como alternativa, y solo mantén JPEG si debes dar soporte a clientes muy antiguos. Sírvelos juntos con el elemento <picture> de HTML para que el navegador elija el mejor que entienda.
Cómo se comparan los tres formatos#
Los compromisos se reducen a cuatro aspectos: tamaño de archivo, compatibilidad con navegadores, funciones y costo de codificación. Aquí tienes la comparación lado a lado.
| Formato | Tamaño típico vs JPEG | Compatibilidad con navegadores | Transparencia | Mejor para |
|---|---|---|---|---|
| JPEG | Línea base (100%) | Universal, todos los navegadores | No | Fotos, respaldo, correo electrónico |
| WebP | ~25-35% más pequeño | Todos los navegadores actuales | Sí (con pérdida y sin pérdida) | Valor predeterminado universal seguro |
| AVIF | ~50% más pequeño | Todos los navegadores principales actuales | Sí, además de HDR/gama amplia | Imágenes principales, máximo ahorro |
Algunos detalles detrás de la tabla:
- Las cifras de tamaño son aproximadas y dependen de la imagen. El contenido fotográfico con degradados suaves (cielos, piel) es donde AVIF se destaca más. Los gráficos simples con colores planos tienen ganancias menores, y ahí un PNG o SVG bien optimizado puede seguir siendo mejor.
- Velocidad de codificación: AVIF es más lento de codificar que WebP o JPEG, lo que importa en procesos de compilación que comprimen miles de imágenes, pero es irrelevante para una subida única.
- Transparencia: tanto WebP como AVIF admiten transparencia alfa, por lo que pueden reemplazar a PNG en imágenes fotográficas con fondos transparentes, a menudo con una fracción del tamaño.
Una nota práctica sobre calidad: no busques el archivo más pequeño absoluto. Con configuraciones AVIF muy agresivas puedes introducir artefactos borrosos tipo "acuarela" en detalles finos. Apunta al archivo más pequeño que aún se vea limpio a tamaño completo, no al archivo más pequeño sin más.
Por qué el tamaño del archivo decide las Core Web Vitals#
Esta es la parte que conecta la elección del formato con el ranking y los ingresos. Las imágenes suelen ser lo más pesado de una página, y la imagen más grande suele ser el elemento Largest Contentful Paint (LCP), la imagen principal o destacada que define cuándo Google considera que la página está "cargada".
LCP es una de las Core Web Vitals de Google, y una lenta perjudica tanto la experiencia del usuario como el rendimiento en búsquedas. La matemática es directa: si tu imagen principal es un JPEG de 400 KB y la versión AVIF es de 200 KB, has reducido a la mitad los bytes que el navegador debe descargar antes de que se active el LCP. En una conexión móvil, esto puede marcar la diferencia entre una puntuación "buena" y una "necesita mejorar".
Dos ventajas adicionales relacionadas con el tamaño que vale la pena mencionar:
- Ancho de banda y costo: las imágenes más pequeñas significan menos datos transferidos, lo que reduce las facturas de CDN y ayuda a los usuarios con conexiones medidas o lentas.
- Eficiencia de rastreo: las páginas más ligeras se renderizan más rápido para todos, incluido el paso de renderizado que realizan los motores de búsqueda.
La conclusión es que "el mejor formato de imagen para la web" es realmente una cuestión de Core Web Vitals. Las imágenes más pequeñas y servidas correctamente son una de las soluciones de mayor impacto para la velocidad de página que puedes implementar.
Cómo servir los tres formatos con una sola etiqueta#
No eliges un único formato para todo tu sitio. Proporcionas los formatos modernos y un respaldo, y el navegador selecciona el primero que pueda decodificar. El elemento <picture> maneja esto de forma nativa.
Paso 1: Comprime tu imagen fuente a los tres formatos#
Comienza con tu original de máxima calidad (el JPEG o PNG sin procesar de la cámara o herramienta de diseño). Exporta un AVIF, un WebP y un JPEG optimizado de la misma imagen con las mismas dimensiones. Un compresor de imágenes gratuito hace esto en un solo paso y se ejecuta completamente en tu navegador, por lo que la foto original nunca se sube a un servidor.
Paso 2: Conéctalos en un elemento picture#
Enumera los formatos de menor a mayor. El navegador lee de arriba a abajo y se detiene en el primer type que soporta, así que AVIF va primero, WebP segundo, y el <img> JPEG simple es el respaldo universal.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Texto alternativo descriptivo" width="1200" height="630">
</picture>
Mantén los atributos width y height en el <img>. Permiten que el navegador reserve espacio antes de que la imagen se cargue, lo que evita el desplazamiento del diseño (CLS, otra Métrica Vital de la Web).
Paso 3: Elimina metadatos y ajusta el tamaño antes de comprimir#
Dos mejoras sencillas antes de elegir un formato. Primero, redimensiona a las dimensiones reales de visualización. Servir una foto de 4000px en un espacio de 1200px desperdicia bytes que ningún códec puede recuperar, así que usa un redimensionador de imágenes para que coincida con el tamaño real del diseño. Segundo, elimina los metadatos EXIF (modelo de cámara, coordenadas GPS, marcas de tiempo), que añaden peso y pueden filtrar datos de ubicación privados. Los buenos compresores lo eliminan automáticamente.
Paso 4: Deja que la herramienta elija automáticamente la más pequeña#
En lugar de evaluar tres exportaciones a ojo, comprime a los tres formatos y compara los tamaños de salida directamente. El compresor de imágenes gratuito muestra el tamaño en bytes resultante para cada formato desde una sola subida, para que puedas elegir la más pequeña que aún se vea bien, sin prueba y error manual.
Compresión con pérdida vs sin pérdida, y cómo elegir un nivel de calidad#
Los tres formatos se usan normalmente en modo con pérdida para fotos, lo que significa que descartan detalles que el ojo apenas nota a cambio de archivos mucho más pequeños. WebP y AVIF también admiten el modo sin pérdida, que conserva cada píxel pero genera archivos más grandes, útil para capturas de pantalla, diagramas o imágenes con texto nítido y colores planos.
El ajuste de calidad es donde ocurren la mayoría de los ahorros (y la mayoría de los errores):
- Calidad JPEG 75-85 es el punto óptimo para fotos. Por debajo de ~70 empiezan a verse artefactos de bloqueo en los bordes.
- Calidad WebP 75-80 equivale aproximadamente a JPEG 85 en un tamaño más pequeño, porque WebP comprime de forma más eficiente con la misma calidad percibida.
- Calidad AVIF 50-65 suele verse tan limpia como un ajuste JPEG mucho más alto. La escala de calidad de AVIF no es directamente comparable con la de JPEG, así que no asumas que "calidad 80" significa lo mismo en todos los formatos.
El método fiable no es confiar en un número, sino comparar el resultado. Codifica la imagen, mírala a tamaño completo de visualización y reduce la calidad hasta que veas el primer artefacto, luego retrocede un nivel. Así obtienes el archivo aceptable más pequeño para esa imagen específica, que siempre es mejor que un ajuste de calidad genérico aplicado a todo.
Una trampa sutil: volver a comprimir una imagen ya comprimida con pérdida (tomar un JPEG y guardarlo como WebP con pérdida) acumula la pérdida. Siempre exporta tus formatos modernos desde el original de mayor calidad que tengas, no desde una copia previamente comprimida.
Imágenes Responsivas: Sirviendo el Tamaño Correcto, No Solo el Formato Correcto#
El formato es la mitad de la ecuación de velocidad de página. La otra mitad son las dimensiones. Un teléfono con una pantalla de 400px de ancho no necesita una imagen de 1600px, y enviar la grande desperdicia bytes sin importar el formato.
Los atributos srcset y sizes te permiten ofrecer varios tamaños de la misma imagen y dejar que el navegador elija según la pantalla y resolución del dispositivo. Puedes combinar esto con <picture> para que cada formato también venga en múltiples anchos.
<picture>
<source
type="image/avif"
srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w"
sizes="(max-width: 600px) 400px, 1200px">
<img src="hero-800.jpg" alt="Texto alternativo descriptivo" width="1200" height="630">
</picture>
Esto combina la ventaja del formato (AVIF sobre JPEG) con la ventaja del tamaño (una imagen de 400px para teléfonos), y los dos ahorros se acumulan. Para un sitio de contenido donde el mismo artículo se ve en teléfonos y computadoras, esta combinación suele ser la mejora más grande en LCP móvil disponible.
Si escribir este marcado manualmente es demasiado, la mayoría de los frameworks modernos y plataformas CMS generan variantes AVIF y WebP y el marcado responsivo automáticamente al subir. El principio es el mismo en ambos casos: el formato más pequeño que soporte el navegador, al tamaño más pequeño que necesite el diseño.
Cuándo NO usar AVIF o WebP#
Estos formatos son para fotografías e imágenes raster complejas. Son la herramienta incorrecta para dos casos comunes:
- Logos, iconos y arte lineal: use SVG. Es un formato vectorial, por lo que se mantiene nítido a cualquier tamaño y suele ser muy pequeño. Si solo tiene un logo raster, nuestra guía y herramienta para convertir SVG a PNG cubre el proceso inverso.
- Animaciones: los bucles cortos funcionan mucho mejor como un video silenciado y con reproducción automática (MP4 o WebM) que como un GIF animado pesado o incluso un WebP animado.
También está el caso excepcional de algunos clientes muy antiguos o especializados que no decodifican ni AVIF ni WebP. Para eso está la alternativa JPEG en su elemento <picture>, así que no pierde nada al incluirla.
La regla de decisión de 2026, resumida#
En conjunto, el flujo de trabajo es breve:
- Por defecto, AVIF; como respaldo, WebP; y JPEG como red de seguridad. Sirve los tres con
<picture>y deja que el navegador elija. - AVIF para imágenes principales y grandes, donde su ahorro de aproximadamente un 50% frente a JPEG tiene el mayor impacto en LCP.
- WebP si solo sirves un formato moderno, porque su compatibilidad es prácticamente universal y sigue superando cómodamente a JPEG.
- SVG para logotipos e iconos, nunca un formato rasterizado.
- Redimensiona primero, elimina metadatos, luego comprime, y deja que la herramienta informe qué formato resultó más pequeño.
La elección del formato es solo una palanca. Para obtener una visión completa sobre cómo reducir el peso de la página sin sacrificar calidad, consulta nuestro tutorial sobre el uso de un compresor de imágenes gratuito para mejorar la velocidad de la página.
Preguntas Frecuentes#
¿Es AVIF mejor que WebP? En cuanto al tamaño de archivo, generalmente sí. AVIF suele producir archivos más pequeños que WebP con una calidad similar, a menudo notablemente en imágenes fotográficas, y añade soporte HDR y gama amplia. WebP codifica más rápido y ha tenido soporte universal un poco más tiempo, por lo que el patrón común es AVIF primero con WebP como respaldo.
¿Cuánto más pequeño es AVIF que JPEG? En contenido fotográfico típico, AVIF suele ser alrededor de un 50% más pequeño que JPEG con una calidad visual comparable, aunque el ahorro exacto depende de la imagen. Las fotos con degradados suaves obtienen las mayores ganancias, mientras que los gráficos de color plano obtienen menos, donde SVG o PNG pueden ser la mejor opción.
¿Debería usar WebP para todo? WebP es un valor predeterminado sólido y seguro porque su soporte en navegadores es prácticamente universal y supera a JPEG en tamaño. Pero servir AVIF como formato principal con WebP como respaldo le brinda archivos aún más pequeños, sin costo de compatibilidad, ya que el navegador solo toma AVIF si puede decodificarlo.
¿Estos formatos perjudican el SEO? Todo lo contrario. Las imágenes más pequeñas aceleran el Largest Contentful Paint, una métrica web esencial que afecta tanto la experiencia del usuario como el rendimiento en buscadores. Solo mantenga texto alternativo descriptivo y atributos de ancho y alto correctos para evitar cambios de diseño.
¿Cómo convierto un JPEG a WebP o AVIF gratis? Suba su imagen a un compresor de imágenes gratuito basado en navegador, que exporta WebP y AVIF sin enviar el archivo a un servidor. Comprima en los tres formatos a la vez y conserve el que resulte más pequeño manteniendo un aspecto limpio a tamaño completo.
¿Cuál es el formato de imagen más pequeño para la web? Para fotografías, AVIF es generalmente el más pequeño de los formatos raster comunes, por delante de WebP y muy por delante de JPEG. Para logotipos, iconos e ilustraciones, SVG es aún más pequeño porque es vectorial y escala sin añadir píxeles.
