Para las imágenes de un sitio web: ¿JPG o AVIF?
6 min de lectura
Una pregunta mal planteada
La pregunta "¿JPG o AVIF?" da por supuesto que los dos formatos son intercambiables. En el contexto web esa suposición es errónea.
AVIF supera a JPG con claridad en eficiencia. JPG, por su parte, se sitúa en un punto de compatibilidad al que AVIF no puede llegar. La práctica profesional del desarrollo web no elige entre ambos: sirve los dos y deja que el navegador escoja.
Aun así, para tomar esa decisión de forma consciente hay que ver con claridad qué ofrece cada formato. En este artículo hacemos la comparación con honestidad.
Eficiencia: AVIF va muy por delante
Con la misma calidad visual, AVIF suele producir archivos notablemente más pequeños que JPG. La proporción de aproximadamente la mitad que tanto se repite es una aproximación, y la ganancia real varía de forma considerable de una imagen a otra.
La magnitud de la ganancia depende del contenido. En imágenes con zonas de color plano, degradados suaves y amplias regiones monocromáticas la diferencia es muy marcada. En fotografías con mucho ruido y textura aleatoria fina, en cambio, la distancia se estrecha.
En el contexto web esa diferencia no es irrelevante. Las imágenes son la partida más grande del total de datos descargados en la mayoría de las páginas. Menos datos significan una página más rápida, sobre todo en conexiones móviles lentas.
AVIF además transporta cosas que JPG no puede llevar: canal alfa, profundidad de color de 10-12 bits, gamut de color amplio y HDR. No puedes servir con JPG un elemento que necesite transparencia: te ves obligado a pasar a PNG y pagas un precio alto en tamaño. AVIF lo resuelve en un solo archivo.
Compatibilidad: JPG no tiene rival
Los navegadores principales actuales soportan AVIF. Ese es un umbral importante para tu sitio y la razón de fondo para tomarse AVIF en serio.
Pero el cuadro no termina ahí:
- Dispositivos y sistemas operativos antiguos. Los teléfonos y ordenadores que llevan mucho tiempo sin recibir actualizaciones no pueden mostrar el archivo.
- Versiones antiguas de navegador. En entornos corporativos y en mercados de rentas bajas, el uso de navegadores no actualizados es un fenómeno real.
- El archivo que descarga el usuario. Cuando un visitante hace clic derecho sobre la imagen y la guarda, acaba con un AVIF en su equipo y puede que no consiga abrirlo en un programa de escritorio.
- Sistemas fuera de tu control. Alguien que suba tu imagen a otra plataforma, la adjunte a un correo o la coloque en un documento puede encontrarse con problemas.
Con JPG no se produce ninguno de estos problemas. Lleva más de treinta años funcionando en todas partes y eso no va a cambiar en un futuro cercano.
Calidad: la conversión no aporta nada
Aclaremos un malentendido frecuente. Convertir tus JPG existentes a AVIF no mejora la imagen.
El detalle que JPG descartó durante la compresión no está en el archivo; AVIF solo empaqueta lo que queda de forma más eficiente. Si la imagen tiene artefactos de bloque, bandas o desenfoque, también los tendrá en AVIF.
Y lo que es más importante: si eliges un ajuste de calidad demasiado bajo, se superponen dos capas de compresión con pérdida y el resultado empeora de forma visible respecto al origen. Al hacer la conversión usa un valor de calidad razonable; como AVIF ya es eficiente, incluso así obtendrás una ganancia seria de tamaño.
Si tienes un origen más limpio que el JPG —la fotografía original, la versión PNG, el archivo en bruto—, generar el AVIF a partir de él siempre da un mejor resultado.
Carga de trabajo: seamos realistas
El coste ignorado de pasar a AVIF es operativo.
Tienes que generar y almacenar una segunda versión de cada imagen. Tienes que actualizar tus plantillas de página para servir con respaldo. Tienes que repetir este proceso con cada nueva imagen que añadas.
En un sitio pequeño y estático esto es un trabajo puntual. En un sitio al que se añade contenido de forma continua, no es sostenible sin montar automatización. Si tu gestor de contenidos puede generar automáticamente las variantes de imagen, el trabajo es fácil; si no puede, tendrás que diseñar un proceso.
Ten en cuenta también que la codificación AVIF es pesada en términos de cómputo. Convertir un archivo grande lleva notablemente más tiempo que guardar en JPG.
La respuesta profesional: los dos a la vez
La solución real de este debate es no elegir.
La etiqueta picture de HTML te permite declarar varias fuentes para la misma imagen. El navegador lee la lista de arriba abajo y descarga la primera que puede soportar. Un navegador que soporta AVIF recibe el AVIF y se beneficia de la velocidad; uno que no lo soporta cae en silencio al JPG y el visitante no nota nada.
La belleza de este enfoque es que elimina el riesgo por completo. Ningún visitante ve una imagen rota, y quienes lo soportan salen recompensados.
Conclusión práctica: genera AVIF, no borres los JPG. Los originales son ahora tu capa de respaldo.
¿Dónde usar cada uno?
Recomendaciones concretas:
- Imágenes hero, banners grandes, galerías: son las que más ganan con AVIF, porque su tamaño es grande. Sírvelas con respaldo.
- Iconos pequeños y gráficos simples: como ya son pequeños, la ganancia es modesta; puede que la carga de trabajo extra no compense. Si el vector (SVG) encaja, suele ser una respuesta mejor.
- Imágenes que se espera que el usuario descargue: catálogo de producto, kit de prensa, fotografía descargable. Aquí sirve JPG; que el usuario pueda abrir el archivo importa más que la velocidad.
- Elementos que requieren transparencia: AVIF ofrece aquí una ventaja seria de tamaño frente a PNG, pero el respaldo tiene que ser PNG.
En resumen
AVIF gana en eficiencia, JPG en compatibilidad. Estas dos verdades no se contradicen; se complementan. En un sitio cargado de imágenes, pasar a AVIF aporta una ganancia real de velocidad, pero en lugar de eliminar JPG hay que posicionarlo como respaldo. Recuerda que la conversión no aporta calidad y que, con ajustes bajos, la resta. Y no subestimes la carga de trabajo: una optimización que no se puede mantener es más dañina que una optimización que no se hizo.
Preguntas frecuentes
¿Debería convertir todas las imágenes de mi sitio a AVIF?
Convertirlas todas y borrar los JPG es un enfoque arriesgado. La estrategia correcta es generar las versiones AVIF y conservar los JPG como respaldo, dejando que el navegador descargue el que puede soportar. Así, los visitantes que soportan AVIF se benefician de la ganancia de velocidad y los que no lo soportan ven el JPG sin notar nada. Además, si más adelante necesitas pasar a otro formato, sigues teniendo tu origen limpio en la mano.
¿Pasar a AVIF afecta realmente a la velocidad de mi página?
En páginas cargadas de imágenes el efecto es tangible, porque las imágenes suelen constituir la mayor parte del peso de la página y descargar menos datos significa directamente un tiempo de carga más corto. El impacto es especialmente notable en conexiones móviles lentas y en páginas con imágenes hero grandes o galerías extensas. En cambio, si tu página ya es ligera o si tu cuello de botella no son las imágenes sino el tiempo de respuesta del servidor o la carga de scripts, la ganancia será limitada. Medir antes y después del cambio es el único método fiable.
¿JPG se considera ya un formato obsoleto?
No está obsoleto, solo es ineficiente. JPG sigue siendo el formato de imagen con soporte más extendido del mundo y eso por sí solo lo hace valioso; ningún formato moderno se acerca a esa universalidad. En contenido fotográfico ofrece además un equilibrio razonable entre calidad y tamaño. AVIF lo supera con claridad en eficiencia, pero en compatibilidad ni siquiera se le aproxima. Por eso la pregunta correcta no es cuál es mejor, sino cómo vas a usar los dos juntos.
¿Cuánta carga añade generar AVIF a mi flujo de trabajo?
Hay dos tipos de carga. La primera: para cada imagen hay que generar y almacenar una segunda versión, lo que implica almacenamiento y gestión de archivos. La segunda: la codificación AVIF es pesada en términos de cómputo y convertir un archivo grande lleva notablemente más tiempo que con JPG. Además tienes que actualizar el HTML de tus páginas para servir con respaldo. En un sitio pequeño es un trabajo puntual; en un sitio grande al que se añaden imágenes continuamente no resulta sostenible sin montar automatización.
Pruébalo ahora mismo con JPG → AVIF Dönüştür.
Probar JPG → AVIF Dönüştür