AVIF para Base64

Como converter AVIF em Base64

1. Arraste um arquivo .avif para a caixa ou escolha-o no seletor de arquivos.
2. Deixe Largura máx., Converter para e Remover metadados (EXIF) em branco para codificar o arquivo original.
3. Mantenha Saída como em Data URI, ou escolha CSS, <img>, Markdown, JSON ou Base64 puro.
4. Clique em Copiar saída. O medidor mostra o tamanho da entrada, o tamanho da saída e o acréscimo.

Se a prévia ficar vazia, seu navegador não consegue decodificar AVIF. O arquivo continua sendo codificado corretamente; ele só não pode ser exibido aqui.

Por que geralmente é melhor deixar o AVIF como está

O AVIF existe para ser pequeno. Em fotos, ele muitas vezes supera o JPEG e o WebP com qualidade visual parecida, o que o torna atraente para placeholders e miniaturas embutidos, onde cada byte de Base64 conta.

O problema é a codificação. As opções de redimensionar, converter e remover metadados redesenham a imagem num canvas do navegador, e os navegadores exportam um canvas como PNG, JPEG ou WebP, nunca como AVIF. Então:

• Manter formato com uma Largura máx. gera um PNG. Para uma foto, esse PNG pode ter muitas vezes o tamanho do AVIF.
• Converter para WebP é o substituto mais próximo em tamanho, exceto no Safari, que também não codifica WebP e recorre ao PNG.
• Converter para JPEG dá ampla compatibilidade, mas perde a transparência.

Se você precisa de um AVIF menor, redimensione-o com uma ferramenta que suporte AVIF, como um editor de imagens ou um codificador de linha de comando, e depois codifique esse arquivo aqui sem alterações.

AVIF em Base64

O AVIF usa o mesmo formato de arquivo de mídia base ISO que o HEIC e o MP4. O arquivo começa com uma caixa ftyp: quatro bytes com o tamanho da caixa, as letras ftyp e uma marca.

O quinto caractere muda com o tamanho da caixa, então, ao detectar AVIF no código, compare eXBhdmlm ou eXBhdmlz a partir do 9º caractere.

Fallbacks e imagens embutidas

Uma imagem AVIF comum num site geralmente vem com um fallback via <picture>, listando primeiro uma fonte AVIF e depois um JPEG ou WebP. Dá para fazer isso com data URIs também, mas aí cada formato fica embutido no HTML e a página carrega todos eles. Para qualquer coisa maior que um pequeno placeholder, use links para os arquivos e deixe o navegador baixar só aquele que ele consegue usar.

Para conferir uma string Base64 que você recebeu, decodifique-a com o Base64 para imagem. Para WebP, que a maioria dos navegadores também consegue codificar, veja WebP para Base64.

Perguntas frequentes