Cómo usar imágenes AVIF en tu sitio web

Los pasos esenciales

1. Elige una imagen que ya aparezca en una página y conserva el original.
2. Crea una versión AVIF y revisa su calidad.
3. Añade el AVIF al sitio mediante un método compatible con tu sistema de publicación.
4. Revisa la página publicada en un teléfono y en un ordenador.
5. Consulta las solicitudes de red del navegador para comprobar qué archivo de imagen se carga.

En las siguientes secciones encontrarás qué revisar en cada paso.

Comprueba cómo gestiona tu sitio las imágenes AVIF

Un sistema de publicación puede aceptar un AVIF en su biblioteca multimedia, pero procesarlo de forma distinta a un JPG o PNG. Comprueba tanto la incorporación del archivo como su uso en una página publicada.

Haz una prueba con una imagen:

• ¿La biblioteca multimedia acepta el archivo?
• ¿La imagen aparece en el editor de la página?
• ¿Se muestra en la página publicada?
• ¿Se generan las versiones más pequeñas necesarias, si el sistema suele crearlas?

Un servicio de optimización o una CDN podría estar entregando ya tus imágenes en AVIF. Revisa cómo funciona actualmente antes de sustituir archivos a mano. Que la biblioteca contenga un JPG no indica por sí solo qué formato reciben los visitantes.

Prepara una imagen para la prueba

Elige una imagen representativa de tu sitio. Una foto de producto, una imagen de cabecera de un artículo o un gráfico transparente resulta más útil que una imagen de prueba ajena a tu contenido.

Utiliza el conversor correspondiente al formato de origen:

• JPG → AVIF
• PNG → AVIF
• WebP → AVIF

Los conversores AVIF de Pixilo conservan las dimensiones originales en píxeles y usan un ajuste fijo de compresión con pérdida. Generan una única imagen estática. No conservan la animación, la información HDR original ni los metadatos.

Compara el AVIF descargado con el original. Fíjate en la legibilidad del texto, los bordes finos, los degradados y las zonas transparentes. Comprueba también el tamaño: convertir una imagen no siempre reduce el archivo.

Si la calidad no es suficiente o el archivo aumenta de tamaño, conserva la versión actual. Cambiar de formato no es un objetivo en sí mismo.

Añade el AVIF mediante tu sistema de publicación

Si utilizas un constructor de páginas o un gestor de contenidos, añade el AVIF a la biblioteca multimedia y selecciónalo como nueva imagen en el elemento correspondiente.

Durante la prueba, mantén el tamaño de visualización y el recorte. Así podrás evaluar el cambio de formato sin modificar al mismo tiempo el diseño de la página.

Al sustituir la imagen, revisa:

• el texto alternativo
• la relación de aspecto y el recorte
• el pie de foto y el enlace, si los hay
• la presentación en ordenadores y móviles.

Cambiar la extensión en una URL no convierte la imagen. Publica un archivo AVIF real o utiliza un servicio que haga la conversión.

Ofrece otro formato cuando sea necesario

Si editas el HTML, puedes usar un elemento picture para ofrecer AVIF como primera opción y JPG como alternativa.

En este ejemplo, ambos archivos representan la misma imagen de 1200 × 800 píxeles. Adapta las rutas, las dimensiones y el texto alternativo a tu imagen.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <img
    src="/images/product.jpg"
    width="1200"
    height="800"
    alt="Mochila azul vista de frente">
</picture>

Un navegador compatible con AVIF puede elegir la versión AVIF. Si no admite el formato indicado, en este ejemplo utiliza el JPG. Para una imagen transparente, elige una alternativa que conserve la transparencia, como PNG. Consulta la documentación de MDN sobre el elemento picture.

Esta alternativa resuelve la compatibilidad del formato. No corrige automáticamente una URL AVIF incorrecta ni un archivo dañado.

Si tu sistema de publicación gestiona los formatos alternativos de forma automática, utiliza su propia función.

Comprueba qué imagen carga el navegador

Que una imagen se vea en la página no demuestra que sea AVIF. El navegador podría cargar la imagen antigua, una versión más pequeña o un archivo generado por un servicio de optimización.

En Chrome puedes comprobarlo con las herramientas de desarrollo:

1. Abre la página publicada y las herramientas de desarrollo.
2. Selecciona la pestaña Network y el filtro Img.
3. Activa Disable cache y recarga la página con las herramientas abiertas.
4. Abre la solicitud de la imagen que quieras comprobar.
5. Revisa su URL y el Content-Type de la respuesta. El tipo de AVIF es image/avif.

La extensión no es la única pista: un servicio de optimización puede entregar AVIF desde una URL que termine en .jpg. El panel Network también permite comprobar el tamaño del archivo transferido. Consulta la guía de Chrome para inspeccionar las solicitudes de red.

Si la página utiliza una imagen distinta en móviles o varios tamaños, revisa también esas solicitudes.

Revisa la página publicada antes de cambiar más imágenes

Examina la imagen donde se utiliza realmente. La vista previa de la biblioteca no muestra el recorte en móviles, el efecto del fondo de la página ni si se carga la versión correcta.

Comprueba que:

• la imagen se ve completa o el recorte es intencionado
• el texto y los detalles importantes siguen siendo suficientemente nítidos
• la transparencia se muestra correctamente sobre el fondo de la página
• el espacio reservado para la imagen y el diseño siguen siendo correctos
• el navegador carga el archivo esperado.

Para comparar la carga antes y después del cambio, utiliza la misma página, el mismo tamaño de ventana y los mismos ajustes de prueba. Una carga más rápida no demuestra una mejora constante. Es más fácil verificar la reducción del archivo si las imágenes tienen las mismas dimensiones y una calidad aceptable.

Si la imagen AVIF no aparece

Comprueba primero si la URL directa de la imagen se abre en el navegador. Si no funciona, revisa la ubicación del archivo y los mensajes de error del sistema de publicación.

Si la imagen funciona directamente, pero la página muestra la versión antigua, revisa la URL del elemento de imagen, los otros tamaños y la caché del sitio. Omitir la caché del navegador no vacía la del sistema de publicación ni la de la CDN.

Si la causa no está clara, vuelve a colocar el original que funcionaba en ese elemento y verifica la compatibilidad con AVIF antes de hacer otra prueba.

Preguntas frecuentes

¿Hay que convertir todas las imágenes del sitio a AVIF?

No. Sustituye las imágenes cuando el archivo se reduzca de forma útil y el resultado funcione en tu sistema de publicación con una calidad aceptable.

¿Basta con añadir el AVIF a la biblioteca multimedia?

No. También debes seleccionarlo para usarlo en la página. Revisa las solicitudes de red de la página publicada para ver qué archivo se carga.

¿AVIF necesita siempre una imagen alternativa?

Depende de los navegadores de tus visitantes y de cómo publiques las imágenes. Otro formato resulta útil para los entornos en los que AVIF no funciona.

¿Por qué el nuevo AVIF no reduce el archivo que carga la página?

La página puede seguir usando la imagen antigua u otra versión generada por tu sistema. El propio AVIF también puede ser más grande. Comprueba la solicitud real y compara archivos con las mismas dimensiones en píxeles.

Resumir conChatGPT (se abre en una pestaña nueva)Grok (se abre en una pestaña nueva)Google (se abre en una pestaña nueva)Perplexity (se abre en una pestaña nueva)Claude (se abre en una pestaña nueva)