AVIF, WebP, JPEG y PNG: qué es cada uno y qué soporte tiene en 2026

Las imágenes son el tipo de recurso más pesado de la web y la elección de formato es la palanca con mayor efecto sobre esos bytes. Hay cuatro formatos que importan, cada uno con una tecnología distinta debajo, límites técnicos que no se anuncian y una cobertura de navegadores que hay que consultar en lugar de recordar, porque cambia y porque la memoria colectiva sobre este tema lleva años desactualizada.

Qué hay debajo de cada formato

JPEG, de 1992. Compresión con pérdida basada en la transformada discreta del coseno sobre bloques de ocho por ocho píxeles, con el color separado en luminancia y crominancia y la crominancia habitualmente reducida a la mitad de resolución. No tiene canal de transparencia. Su modo progresivo permite mostrar una versión de baja resolución antes de tener todos los bytes, que es la razón de que siga siendo interesante para conexiones malas. Sus artefactos característicos son la cuadrícula de bloques y el zumbido alrededor de los bordes duros.

PNG, de 1996. Compresión sin pérdida: filtros por línea seguidos del algoritmo de compresión sin pérdida clásico. Canal alfa de ocho bits completo. Tiene un modo indexado con paleta de hasta 256 colores que reduce drásticamente el tamaño en imágenes de pocos colores y que casi nadie usa porque los exportadores no lo eligen solos. No pierde nada, y por eso pesa lo que pesa.

WebP, de 2010. Dos formatos distintos bajo un mismo nombre. El modo con pérdida reutiliza la codificación intracuadro del códec de vídeo VP8; el modo sin pérdida es un formato propio, sin relación con el anterior, basado en predicción espacial y una variante de codificación por entropía. Admite transparencia en los dos modos y admite animación.

Tiene dos límites que hay que conocer. La dimensión máxima es de 16.383 píxeles por lado, lo que descarta panorámicas grandes y mapas. Y el modo con pérdida siempre reduce la crominancia a la mitad, sin opción de desactivarlo: en una imagen con texto rojo sobre fondo azul, ese submuestreo se ve.

AVIF, de 2019. Codificación intracuadro del códec de vídeo AV1, empaquetada en el contenedor de la familia del formato de imagen de alta eficiencia. Es el más capaz de los cuatro: transparencia con pérdida o sin ella, profundidad de 10 y 12 bits, gama de color amplia y alto rango dinámico, crominancia completa o reducida a elección, y síntesis de grano de película, que reconstruye el grano en el decodificador en lugar de gastar bytes en codificarlo.

Su coste está en el otro lado: codificar AVIF es entre uno y dos órdenes de magnitud más lento que codificar JPEG en el mismo hardware, y la decodificación también es más cara, lo que se nota en un móvil de gama baja con veinte imágenes en pantalla. El parámetro de esfuerzo del codificador, que en la herramienta de referencia va de 0 a 10 con el valor por defecto en 6, mueve ese coste varios órdenes: la diferencia entre esfuerzo máximo y esfuerzo mínimo puede ser de minutos a milisegundos, a cambio de un porcentaje de tamaño.

El soporte real, medido

Las cifras que siguen son las de la tabla de compatibilidad de referencia con datos de uso de junio de 2026. Convienen consultarse, no recordarse.

WebP: 96,15 % de cobertura global. Chrome desde la versión 32, Edge desde la 18, Firefox desde la 65, Safari con soporte completo desde la 16 y parcial desde la 14, y Safari de iOS desde la 14. Es, a efectos prácticos, universal: lo que queda fuera son navegadores que tampoco van a renderizar bien tu CSS.

AVIF: 93,42 % de cobertura global. El recorrido fue largo y desigual: Chrome en la versión 85, en agosto de 2020; Firefox en la 93, en octubre de 2021; Safari en la 16.4, en marzo de 2023; y Edge en la 121, en enero de 2024, que es la fecha que sorprende y la que explica por qué mucha documentación de 2023 sigue tratando AVIF como experimental. Safari de iOS lo admite desde la 16.

El seis y pico por ciento que no lo admite se concentra en versiones antiguas de iOS anteriores a la 16, en la vista web integrada de Android de dispositivos viejos, y en navegadores de nicho. Para ese resto existe la reserva, y con reserva AVIF es desplegable sin reservas en 2026.

JPEG y PNG: universales. Siguen siendo la red de seguridad, y en el caso de PNG siguen siendo además la mejor opción para algunos tipos de imagen, cosa que veremos en elegir formato por tipo.

async function admite(tipo, datos) {
  try {
    const blob = await fetch(`data:${tipo};base64,${datos}`).then((r) => r.blob());
    await createImageBitmap(blob);
    return true;
  } catch {
    return false;
  }
}

// Un AVIF de un pixel rojo, 315 bytes, el minimo valido.
const AVIF_1X1 =
  'AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADrbWV0YQAAAAAAAAAhaGRscgAAAAAAAAAAcGlj' +
  'dAAAAAAAAAAAAAAAAAAAAAAOcGl0bQAAAAAAAQAAAB5pbG9jAAAAAEQAAAEAAQAAAAEAAAETAAAAKAAAAChp' +
  'aW5mAAAAAAABAAAAGmluZmUCAAAAAAEAAGF2MDFDb2xvcgAAAABqaXBycAAAAEtpcGNvAAAAFGlzcGUAAAAA' +
  'AAAAAQAAAAEAAAAQcGl4aQAAAAADCAgIAAAADGF2MUOBAAwAAAAAE2NvbHJuY2x4AAEADQAGgAAAABdpcG1h' +
  'AAAAAAAAAAEAAQQBAoMEAAAAMG1kYXQSAAoIGAAGiAhoNCAyGhTHh4ZlAgggnkAAAJBLsrmsZEBiFja8FSJv';

console.log('AVIF:', await admite('image/avif', AVIF_1X1));

JPEG XL: el estado real

Conviene decirlo con datos porque es el formato sobre el que más expectativa desfasada circula.

A fecha de 2026, JPEG XL no está activado por defecto en ningún motor mayoritario. Safari lo admite parcialmente desde la versión 17 y es la única implementación que un usuario puede encontrarse sin tocar un indicador. En Chromium el soporte fue retirado en la versión 110 y ha vuelto al árbol de código detrás de un indicador desactivado por defecto. Firefox lo tiene igualmente detrás de un indicador desactivado. La cobertura global activa por defecto es del cero por ciento, con un trece y pico por ciento adicional en soporte parcial.

Técnicamente es un formato excelente: compresión competitiva con AVIF, mejor comportamiento en imágenes con texto, recompresión sin pérdida de JPEG existentes que ahorra un veinte por ciento sin tocar la calidad, y decodificación progresiva. Nada de eso importa para tu sitio mientras no lo decodifique el navegador de tu usuario.

La lectura práctica es una sola: no lo pongas en producción como formato principal. Si tienes muchos usuarios de Safari y una infraestructura de imágenes que genera variantes baratas, añadirlo como fuente adicional del elemento adaptativo es inocuo y algo ahorra. Como apuesta estratégica, en 2026 no lo es.