Formato de imagen AVIF: ventajas, comparación y generación de archivos en dicho formato

La escuela
1

Este artículo está publicado en formato wiki para que entre todos podamos ir completándolo y mejorándolo.

Introducción

El formato avif es un formato libre de royalties y basado en código opensource que permite una mucha mayor compresión de la imágenes que jpeg (hasta un 50% o más manteniendo la misma calidad) y el resto de formatos anteriores.

Viene a sustituir al jpeg y el png, permite compresión con y sin pérdida, carga sencuencial o progresiva, secuencias de imágnes en movimiento como el gif, inclusión de diferentes perfiles ICC y espacios de color, espacios de color HDR como Rec 2020 y rec 709 (muy utilizados en el video HDR de alta calidad y el mundo cinematográfico, el futuro de la edición de imagen y video digitales), codificación de color en 8,10 y12 bits por canal y muchas otras opciones avanzadas.

El foromato AVIF se compone de una compresión de imagen o secuencias de imágenes basada en la compresión de video AV1 almacenado en un contenedor HEIF.
El conocido format HEIC (creado en 2017 por Apple e impulsado por esa compañía en sus productos recientes) utiliza el mismo contenedor HEIF, pero el algoritmo de compresión que utiliza es HECV también conocido como H.265, sucesor del H.264 (muy utilizado éste en la compresión de video en mp4 y los bluerays) y que por tanto está sujeto a royalties, licencias y código propietario.

Soporte por navegadores

El formato surgió en 2019 impulsado por Google, Netflix y muchas otras compañías, pero no fue hasta 2021 que fue adquiriendo implantación en los navegadores web para PC y móviles.

Actualmente lo soportan Chrome (uno de los primeros en implementarlo) y muchos de los navegadores basados en chromium, Safari, Firefox, Opera y muchos otros.

MS Edge en la versión estable (113) no lo soporta, si bien la versión en desarrollo (canary) 115 sí lo soporta aunque hay que activarlo. Se espera que en los próximos meses, en la siguiente actualización de windows, ya esté disponible.

Una lista actualizada de los navegadores que lo soportan la puedes obtener aquí: AVIF Browser Support | caniuse | avif.io :sparkles:

Soporte en software de edición

La exportación a formato AVIF es admitida ya por mucho software de edición en sus versiones actuales como:

Convertidores online y offline

Existen algunas páginas gratuitas donde podrás convertir tus archivos a formato avif, así como software y librerías para su conversión en tu ordenador.

  • AVIF.io: dispone de un sencillo conversor donde puedes subir tu archivo en formato jpeg, gif, png o webp y generar un archivo comprimido en avif con unos sencillos controles básicos.
    Dispone también de muchísima información del formato avif, software y navegadores que lo admiten, etc.
  • Squoosh.app: un sitio online gratuito donde poder subir tu imagen para convertirla a avif. Tiene la ventaja de tener más control sobre el proceso de conversión y poder comparar el antes y después de la conversión para así ajustar mejor los parámetros.
    También permite conversión a muchos otros formatos.

Una lista actualizada de convertidores la tienes aquí: Convert to AVIF - A list of all software | avif.io :sparkles:

Comparativas

Comparativa AVIF frente a JPEG

En esta comparativa mostraremos las diferencias al comprimir usando ambos formatos imágenes de la misma resolución y usando en todas el mismo perfil de color: sRGB (el más utilizado hasta ahora en jpeg) para que así las diferencias que se puedan apreciar sean sólo debidas a la compresión.

Comparativa de calidad a igual tamaño de archivo y resolucion

Un archivo con un colorido normal que no se sale del sRGB.
Resolución de 2400 px en el lado largo, partiendo de un PNG con perfil sRGB que ocupa unos 19 MB

Comparativa de tamaño de archiva a calidad de imagen similar.

Comparativa AVIF frente a PNG

El formato PNG es un formato sin pérdidas muy utilizado en la compresión de imágenes de diseño gráfico con zonas de color uniforme que es donde resulta más efectivo (no consigue gran compresión en fotografías o imágenes con muchos detalles finos).
AVIF tamibén permite la compresión sin pérdidas, por lo que resultará adecuado comparar los tamaños de archivos conseguidos por ambos algoritmos en diversas imágenes a igual resolución.

2

23_DSC6581
23_DSC65811600×1070 340 KB

Arriba, jpeg; abajo avif
23_DSC6581
23_DSC65811600×1070 284 KB

Se aprecia diferencia en contraste aparente y color (más vivo en jpeg), pero en el PC es mucho más visible que aquí, en el foro. En la pantalla del monitor, la diferencia es muy marcada, volviendo a lo ya citado: a primera vista es más atractiva la versión jpeg, pero es un falso atractivo.

3

Sería interesante que indicarais cual es la versión jpg y cual la avif. En este caso observo un peso bastante inferior de una versión a la otra, pero no se cuál es cuál.

20230529201905
202305292019051302×212 71.7 KB

Estas son las opciones que me da mi programa para guardar las imágenes. ¿Alguno de estos es AVIF?

4

Mil perdones. Sí, la más pequeña es la AVIF; ahora incluyo el dato.
De las muestras, ninguna es AVIF; el archivo se identifica con la extensión .avif (“título del archivo.avif”)

1 me gusta
5

Gracias José. Es un programa viejuno ya, seguro que si lo actualizo dispone de ese formato.

6

¿El PS?
Mira a ver en el enlace que puse si te funciona la extensión que menciona en tu versión de PS.

Si no siempre puedes usar uno de los conversores online que he puesto (te recommiendo squoosh) subiendo el fichero.

7

Hace años que no uso ps. He descargado en prueba la nueva versión de affinity pero tampoco da la opción avif.

Seguiremos como siempre.

8

El krita sí lo tiene incorporado, el gimp como plugin y como te digo tienes conversores online.

Mira las dos últimas fotos que puse a 140 KB con resolución de 2400 px de lado.
Es espectacular la diferencia entre jpeg y avif, el avif conserva mucho más detalle y no tiene ese pixelado horrible.

Y si las descargas y ves al 100 % mucho más (que el foro te las escala a tamaño pantalla).

9

No sé si es error a la hora de subirlas, pero veo que la foto en jpg pesa menos que la avif. Desde luego la diferencia de calidad es más que notable.

10

Como sólo controlas el parámetro de calidad es complicado igual exactamente tamaño.
Los avif siempre los he dejado que pesen algo menos que los jpeg.

La última en jpeg si lo descargas es de 140KB, el avif 134 KB:

Pero el foro nunca pone el mismo peso al fichero que lo que pesa en tu ordenador, no sé muy bien por qué, es posible que no cuente los metadatos incluidos en el fichero, no sé.

Con el formato avif podríamos aumentar resolución (tampoco veo mucho interés a poner imágines a resolución completa, creo que con 2000 px de la do largo ya hay más que suficiente resolución hoy día para la mayoría de pantallas) y reducir el peso máximo permitido para ahorrar espacio en disco (tal vez 700 u 800 KB) sin pérdida de calidad ni detalles, habría que ir probando más.

Estoy buscando una imagen que tenga muchísimos detalles finos para someterla también a compresiones diferentes, aunque la subiría a 1920 para no poner imágenes tan grandes, pero esta primera quería subirla con mucho tamaño a ver qué pasaba.

Si tenéis alguna y me la pasáis en tiff o png puedo hacer pruebas, a ver qué pasa y qué diferencias se ven.

1 me gusta
11

Una prueba a 500 px por lado. A máxima calidad en PNG y en AVIF. El JPG lo he dejado como suelo exportar a 98% de calidad. A ver si aprecias diferencias.

DSCF2229_500x500
191,2 Kb

DSCF2229_500x500
2,0 Mb

DSCF2229_500x500_100_calidad
426,4 Kb

Saludos.

12

Por cierto Gimp 2.10.22 tiene la exportación AVIF, nativa no precisas ningún conversor o plugin.

Captura de pantalla de 2023-05-30 08-36-27
Captura de pantalla de 2023-05-30 08-36-271103×350 29.3 KB

Saludos.

13

Veo que el foro no permite ampliar. Igual hay que aumentar el tamaño… :thinking:

14

Apenas veo diferencias. El JPEG sale perdedor, con sombras menos detalladas y más densas, pero poco cosa. También el color algo más exagerado. Entre el PNG y AVIF, nada destacable. Al menos, a ese tamaño.

15

Con tan poquísima compresión no verás diferencias.

Siendo 500px para ver diferencias tendrás que llevarla a unos pocos kb.

Las diferencias que veo son en color y me da que es que el PNG no está en srgb.

El avif ocupa más, has comprimido además en 12 bits en vez de los 8 del JPEG.

Los 12 bits no los necesitas para nada en visualización, solo si pretendes luego manipularla.

El ojo humano distingue como mucho 9 bits, 10 todo más.
Y sólo podrás apreciar diferencias en un espacio de color muy amplio y con un monitor que lo pueda reproducir como rec 2020.

O bien problemas de posterizacion si usas un espacio excesivamente amplio como prophoto y 8 bits.
Si casi no comprimes todos los algoritmos sirven.

Deo que se trata es de comprimir y reducir peso sin que sufran los detalles. Y eso el svif lo hace mucho mejor.

En srgb o con monitores corrientes no podrás distinguir uno de 8 bits de uno de 12 bits.esi está pensado para el vídeo uhd en monitores que cubren rec2020.

El PNG que subiste no tiene sentido hacerlo sin comprimir porque él o g comprime sin pérdidas, por lo que no hay merma de calidad.

Pones que son 2MB pero el foro solo admite 1,2MB por tanto lo habrá comprimido el foro y eso lo invalida como imagen de prueba.

16

Imagino que ya lo distribuyen con el plugin, era lo que ponía la página enlazada.

17

Claro, si la foto ya entra en pantalla para que ampliar.

Aunque estaría bien que las siguiera mostrando como pase de fotos.

18

Bueno si necesitas mas pruebas o archivos, ya sabes… xifla que venimos corriendo.

Saludos.

1 me gusta
19

La verdad es que no es fácil hacer pruebas significativas.

Y luego están las diferente posibilidades de compresión del avif que van mucho más allá de el parámetro de cantidad.

De momento a ver cómo se compara con el JPEG con mismos bits, 8, y espacio de color srgb, para que las diferencias solo sean en compresión

Ya vimos un ejemplo con una foto normal cuando la compresión es fuerte, a ver con otra foto con mucho más detalle que se tiene que notar más.
Si tienes a mano una con mucho detallito fino pues vendrá bien.

Luego ya trataré de poner otras que tengan colorido más amplio de srgb y ver si hay diferencias entre srgb y rec2020 y entre 8 y 10 o 22 bits, ver el efecto de la compresión de croma, etc.

20

Un caso curioso (sí, ya sé que la foto no es para presumir mucho). En la versión JPEG, como de costumbre, algo más de color y contraste, que no le vienen nada mal. Sin embargo, en la versión AVIf aparece un efecto muaré en la zona superior izquierda, bastante mejor reflejada en JPEG.

23_DSC6582
23_DSC65821600×933 395 KB

arriba AVIF, abajo JPEG
23_DSC6582
23_DSC65821600×933 432 KB

Las diferencias son mucho más patentes en el monitor.
Edito: aquí en el foro, no veo la menor diferencia. También podría ser cosa del visor de windows, lo que implica que los algoritmos de presentación en pantalla pueden estar haciendo de las suyas según que casos.