Como usar
- Solte um GIF na área de arrastar e soltar, clique para escolher um ou cole uma imagem.
- Deixe Converter para em Manter o original e Largura máxima em Tamanho original para preservar a animação.
- Confira os tamanhos original e codificado; GIFs animados crescem rápido.
- Copie a saída com a tag img ou com o background-image do CSS, ou use a versão em data URI, Base64 puro ou Markdown.
Sobre o formato GIF
O GIF (Graphics Interchange Format, tipo MIME image/gif) é de 1987. Cada quadro usa uma paleta de no máximo 256 cores, comprimida sem perdas com LZW. A transparência é tudo ou nada: uma entrada da paleta pode ser marcada como transparente, mas não existe opacidade parcial. Um arquivo pode conter muitos quadros com atrasos individuais e uma contagem de repetições, e é por isso que o GIF se tornou o formato das animações curtas.
O Base64 de um GIF começa com R0lGODlh na versão mais comum, GIF89a, ou com R0lGODdh na versão mais antiga, GIF87a.
Como manter a animação
Quando você mantém o formato original, a ferramenta codifica os bytes do arquivo como estão. Por isso, o data URI fica animado exatamente como o arquivo, seja em uma tag <img>, seja como fundo CSS.
Converter para PNG, JPEG ou WebP, ou definir uma largura máxima, redesenha a imagem no navegador, e só o primeiro quadro sobrevive. Isso é útil quando você quer uma prévia estática de uma animação, mas, para a versão animada, deixe as duas opções desativadas.
Onde data URIs de GIF ainda fazem sentido
- Pequenos indicadores de carregamento e ícones de status animados no CSS.
- O clássico pixel transparente de 1x1, usado como
srcprovisório. Ele ocupa só algumas dezenas de bytes e bem menos de 100 caracteres em Base64. - Desenhos de linha simples com poucas cores, em que o GIF é compacto.
Animações grandes não são uma boa ideia. Um GIF de reação de 2 MB vira cerca de 2,7 MB de texto que não pode ser armazenado em cache separadamente; um arquivo de vídeo hospedado ou um WebP animado é muito mais leve.
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">Perguntas frequentes
Meu GIF continua animado depois da codificação Base64?
Sim, desde que você mantenha o formato original e não redimensione a imagem. O Base64 armazena o arquivo completo, incluindo todos os quadros e a configuração de repetição.
Por que meu GIF parou de se mexer depois da conversão?
Converter para PNG, JPEG ou WebP, ou redimensionar, renderiza a imagem novamente a partir do primeiro quadro. A ferramenta não cria arquivos PNG ou WebP animados, então mantenha o GIF original para preservar o movimento.