AVIF a Base64

Cómo convertir AVIF a Base64

1. Suelta un archivo .avif en el recuadro o elígelo con el selector de archivos.
2. Deja vacíos Ancho máx., Convertir a y Quitar metadatos (EXIF) para codificar el archivo original.
3. Deja Salida como en Data URI, o elige CSS, <img>, Markdown, JSON o Base64 simple.
4. Pulsa Copiar salida. El indicador muestra el tamaño de entrada, el de salida y el aumento.

Si la vista previa se queda vacía, tu navegador no puede decodificar AVIF. El archivo se codifica bien de todos modos; solo que no se puede mostrar aquí.

Por qué conviene dejar el AVIF tal cual

AVIF existe para ocupar poco. En fotos suele superar a JPEG y WebP con una calidad visual similar, lo que lo hace atractivo para marcadores de posición en línea y miniaturas, donde cada byte de Base64 cuenta.

El problema está en la codificación. Las opciones de redimensionar, convertir y quitar metadatos vuelven a dibujar la imagen en un canvas del navegador, y los navegadores pueden exportar un canvas como PNG, JPEG o WebP, nunca como AVIF. Por tanto:

• Mantener formato con un Ancho máx. produce un PNG. En una foto, ese PNG puede ocupar muchas veces más que el AVIF.
• Convertir a WebP es lo más parecido en tamaño, salvo en Safari, que tampoco puede codificar WebP y recurre a PNG.
• Convertir a JPEG ofrece una compatibilidad amplia, pero pierde la transparencia.

Si necesitas un AVIF más pequeño, redimensiónalo con una herramienta que admita AVIF, como un editor de imágenes o un codificador de línea de comandos, y luego codifica aquí ese archivo sin cambios.

AVIF en Base64

AVIF usa el mismo formato de archivo multimedia base ISO que HEIC y MP4. El archivo empieza con una caja ftyp: cuatro bytes con el tamaño de la caja, las letras ftyp y una marca.

El quinto carácter cambia según el tamaño de la caja, así que para detectar AVIF en código busca eXBhdmlm o eXBhdmlz a partir del carácter 9.

Alternativas e incrustación

Una imagen AVIF normal en una web suele llevar una alternativa mediante <picture>, con una fuente AVIF primero y un JPEG o WebP después. Puedes hacer lo mismo con data URIs, pero entonces todos los formatos van incrustados en el HTML y la página los carga todos. Para cualquier cosa mayor que un pequeño marcador de posición, enlaza los archivos y deja que el navegador descargue solo el que puede usar.

Para comprobar una cadena Base64 que hayas recibido, decodifícala con Base64 a imagen. Para WebP, que la mayoría de los navegadores también pueden codificar, consulta WebP a Base64.

Preguntas frecuentes