shadcn.io— miles de bloques de shadcn/ui
Ir al contenido

AVIF frente a WebP — el archivo más pequeño no siempre es el bueno

Una vez pasé una tarde bochornosa comparando la misma imagen de cabecera en WebP y en AVIF, saltando entre dos pestañas del navegador, intentando cazar una diferencia que mis ojos pudieran ver de verdad. El AVIF era un 31 % más pequeño. No supe distinguirlos. Ahí sentado me sentí como si hubiera encontrado dinero gratis, y entonces procesé el lote de una carpeta con 200 imágenes y recordé la trampa.

AVIF es, casi siempre, el archivo más pequeño. Esa parte es cierta y conviene saberla. Pero «más pequeño» es solo una columna de la hoja de cálculo, y las demás columnas son donde vive de verdad la decisión.

Dónde gana AVIF

AVIF está construido sobre el códec de vídeo AV1, y es un diseño de verdad más nuevo y más listo que WebP. En contenido fotográfico suele quedarse entre un 15 % y un 30 % más pequeño que un WebP a la misma calidad visual. Maneja los degradados suaves —cielos, piel, sombras tenues— sin los artefactos en bloques que los códecs más viejos embadurnan por encima. Admite HDR y gama de color amplia, cosa que WebP no. Conserva un canal alfa completo, igual que WebP.

Unos números aproximados de aquella carpeta que menciono, todos a una calidad donde no era capaz de ver diferencia:

OrigenWebPAVIF
Una foto de cabecera — PNG de 3,1 MB~360 KB~250 KB
Una foto de producto — JPG de 1,4 MB~180 KB~140 KB
Una ilustración plana de interfaz~28 KB~30 KB

Mira otra vez esa última fila. En gráficos planos y simples, AVIF a veces sale más grande. Su astucia está afinada para la complejidad fotográfica, y no tiene nada que masticar en una ilustración a dos colores. WebP, o incluso PNG, puede ganar ahí.

Dónde te cuesta AVIF

La ventaja de tamaño no sale gratis. Dos precios reales:

Tiempo de codificación. AVIF es muchísimo más lento de comprimir. Sobre la misma imagen, una codificación AVIF puede tardar varias veces más que una WebP —a veces la diferencia entre «al instante» y «espera un par de segundos por archivo»—. Para una sola imagen de cabecera, da igual. Para un lote de 200, notas cada segundo. WebP codifica tan rápido que es prácticamente gratis.

Descodificación y soporte. Todos los navegadores que la gente usa de verdad descodifican AVIF ya —Chrome desde 2020, Firefox poco después, Safari desde la versión 16 a finales de 2022—. En 2026 eso cubre la inmensa mayoría del tráfico real. Pero «admitido» y «universal» no son la misma palabra. WebP tiene unos años más de saturación a sus espaldas, y descodifica más rápido en móviles de gama baja, donde descodificar AV1 sí puede costar batería y CPU notables. Algunos clientes de correo y webviews antiguos embebidos todavía no tocan AVIF en absoluto.

La pregunta del 20 %

Así que la decisión de verdad se reduce a esto: ¿ese ~20 % extra importa para esta imagen, en este sitio?

Para una imagen de cabecera grande en una página de aterrizaje —el activo pesado que descarga cada visitante—, sí. Rebañar 100 KB de lo que marca el ritmo de tu primer pintado compensa una codificación más lenta que solo pagas una vez. Es el caso más claro de AVIF que conozco.

Para una cuadrícula de miniaturas, las capturas insertadas de un blog o cualquier cosa que ya baja de unos 50 KB en WebP, la respuesta suele ser no. El veinte por ciento de un número pequeño es un número más pequeño. Has cambiado tiempo de codificación y una pizca de compatibilidad por ahorrar unos bytes que nadie esperaba. WebP es el valor por defecto más tranquilo ahí.

Cuándo no me molesto con AVIF

Si un archivo va a ir a cualquier sitio fuera de un navegador moderno —una newsletter por correo, un CMS viejo, el sistema de un socio que no controlo—, no me la juego con AVIF. Uso WebP, o JPG a secas si quiero cero riesgo. El archivo más pequeño que no se renderiza no vale nada.

Y no codifico en AVIF los gráficos planos, los logos ni el line art. No es para lo que sirve el códec, y lo he visto perder ante WebP en eso las veces suficientes como para dejar de intentarlo.

Cómo decido yo

Mi flujo sincero: convierto a AVIF lo fotográfico y pesado, y dejo en WebP lo ligero, simple y muy distribuido. No hay un formato para gobernarlos a todos. Es elegir por imagen.

Si quieres probar la comparación tú mismo, ambos se ejecutan en tu navegador aquí —WebP a AVIF para exprimir aún más activos WebP existentes, y PNG a AVIF para ir directo desde un maestro—. Nada se sube a ningún lado; la codificación ocurre en tu equipo, que es también por lo que sentirás en tus carnes la lentitud de AVIF. No es un fallo. Es el códec haciendo más trabajo por un archivo más pequeño, delante de ti.

Pasa tu propia imagen de cabecera por los dos. Si no ves la diferencia y el AVIF es apreciablemente más pequeño, tienes tu respuesta. Solo no des por hecho que la respuesta es la misma para las siguientes 200 imágenes.

Artículos relacionados


Todos los artículos