¿Qué son WebP y AVIF?
WebP y AVIF son formatos de imagen modernos para la web que, con una calidad comparable, generan archivos mucho más pequeños que JPEG y PNG. Acortan los tiempos de carga y admiten transparencia; AVIF suele comprimir aún más que WebP.
WebP y AVIF: definición y origen
WebP lo presentó Google en 2010. AVIF (AV1 Image File Format) surgió después a partir del códec de vídeo AV1 de la Alliance for Open Media. Ambos formatos son abiertos y de uso libre de licencias, comprimen las imágenes de forma más eficiente que los clásicos JPEG y PNG y admiten transparencia. Según Google, las imágenes WebP con pérdida son, con la misma calidad, entre una cuarta parte y un tercio más pequeñas que JPEG.
En muchos sitios web, las imágenes representan la mayor parte de los datos transferidos. Quien las sirve en WebP o AVIF acorta notablemente el tiempo de carga, sobre todo en la red móvil. Esto repercute en la experiencia de usuario y en las Core Web Vitals.
Diferencias y compatibilidad con navegadores
WebP funciona en todos los navegadores principales desde 2020, y AVIF, desde 2022. Con el elemento picture se sirven los formatos de forma escalonada: primero AVIF, luego WebP y por último un JPEG como alternativa de respaldo. El navegador elige el primer formato que entiende, de modo que los dispositivos más antiguos también reciben una imagen.
- WebP: por lo general mucho más pequeño que JPEG, rápido de generar, con muy amplia compatibilidad
- AVIF: por lo general aún más pequeño que WebP, admite HDR y espacios de color amplios, requiere más tiempo de cálculo al crearlo
- JPEG y PNG: legibles universalmente, pero con archivos más grandes; siguen siendo útiles como alternativa de respaldo
Ejemplo práctico: estudio de arquitectura
Un estudio de arquitectura presenta sus proyectos con fotos de gran formato. Los originales son JPEG de varios megabytes y la página carga con lentitud en el smartphone. Una cadena de procesamiento de imágenes genera automáticamente, al subirlas, los tamaños adecuados en AVIF y WebP, los sirve mediante el elemento picture y conserva el JPEG como alternativa de respaldo.
Las fotos siguen nítidas y la página pesa mucho menos. También mejora el valor del Largest Contentful Paint, el tiempo de carga del elemento visible más grande, porque la imagen de cabecera contiene menos datos. El estudio sigue subiendo originales; la conversión se hace automáticamente.
Ventajas, límites y errores habituales
Los formatos modernos aportan tiempos de carga más cortos, menor consumo de datos y menores costes de hosting. Límites: las imágenes muy comprimidas muestran artefactos, AVIF requiere bastante más potencia de cálculo para generarse y, para logotipos y gráficos sencillos, SVG suele ser la mejor opción, porque escala sin pérdida. Errores típicos:
- Archivo solo renombrado en lugar de recodificado: el tamaño sigue siendo alto
- Nivel de calidad demasiado bajo: formación de bloques visible
- Sin alternativa de respaldo para navegadores antiguos y programas de correo
- Se sirven dimensiones en píxeles demasiado grandes en lugar de tamaños adecuados (srcset)
Implementación
Muchos sistemas de gestión de contenidos y de tienda, así como las CDN, convierten las imágenes automáticamente. Nano Concepts configura estas cadenas de imágenes, ajusta tamaños y calidad a sus motivos, añade alternativas de respaldo para navegadores antiguos y comprueba con las Core Web Vitals si el resultado carga de forma medible más rápido.
Preguntas frecuentes sobre WebP y AVIF
Lo mejor es ambos, de forma escalonada: AVIF para el archivo más pequeño, WebP como alternativa con amplia compatibilidad y JPEG como respaldo. Quien elija un solo formato, con WebP lo tiene sencillo y con AVIF suele ahorrar más en las fotos.
De forma indirecta: las imágenes más pequeñas acortan el tiempo de carga y mejoran valores como el Largest Contentful Paint. El formato en sí no es un factor de posicionamiento. Google puede indexar ambos formatos en la búsqueda de imágenes, de modo que sus imágenes se siguen encontrando.
Sí, con herramientas de imagen, programas de línea de comandos o plugins. Para obtener los mejores resultados, parta del original y no de un JPEG ya muy comprimido, y compruebe la calidad por muestreo antes de cambiar todas las imágenes.
Servicios que encajan
Optimización de Pagespeed
Tiempos de carga más cortos y mejores Core Web Vitals: optimización selectiva de imágenes, código, plugins y servidor.
Más información
Desarrollo web
Páginas web con función real: calculadoras, formularios, áreas de clientes e interfaces, bien programadas y rápidas.
Más información
E-commerce y tiendas online
Tiendas online con Shopify, WooCommerce o Shopware, con pago, envío y conexión con su gestión de mercancías.
Más informaciónTérminos relacionados
Relevante para estos sectores
Artículos relacionados de la revista
Accesibilidad según la BFSG: obligaciones para webs, tiendas y apps
Desde el 28 de junio de 2025 se aplica en Alemania la Ley de accesibilidad (BFSG). A quién afecta, qué deben cumplir las tiendas online, los procesos de reserva y las apps y cómo comprobar con rigor si la ley le concierne.
Seguir leyendo
Diseño y desarrollo de un solo equipo: ventajas y proceso
Cuando la agencia y los desarrolladores trabajan por separado, se pierden tiempo y calidad en los traspasos. Así trabajan como un solo equipo la agencia asociada LOMA DESIGN y Nano Concepts.
Seguir leyendo
Relanzamiento web sin perder posicionamiento: guía y lista de comprobación
¿Nuevo diseño, nuevo sistema y, de repente, menos visitas? Así protege el posicionamiento y las solicitudes en un relanzamiento web: con plan de redirecciones, revisión técnica, lista de puesta en producción y seguimiento.
Seguir leyendo
