GIF para Base64

Como converter um GIF para Base64

1. Arraste um arquivo .gif para a caixa ou escolha-o no seletor de arquivos.
2. Não mexa em Largura máx., Converter para e Remover metadados (EXIF) se o GIF for animado.
3. Escolha Saída como: Data URI, CSS background-image, HTML <img>, Markdown ou Base64 puro.
4. Clique em Copiar saída. O medidor mostra quanto o texto ficou maior que o arquivo.

A prévia reproduz a animação, então você confere se é o arquivo certo antes de copiar.

Animação e as opções de recodificação

As opções acima da saída redesenham a imagem num canvas. Um canvas guarda uma única imagem estática, e os navegadores não conseguem gravar GIF a partir dele, então um GIF recodificado sai como PNG (ou JPEG ou WebP, se você escolher) só do primeiro frame. Isso serve para uma miniatura estática de uma animação; para manter a animação, deixe as opções desligadas.

Para um GIF animado grande demais, a solução tem que vir antes desta ferramenta: reduza o número de frames, as dimensões ou a paleta de cores num editor de GIF, ou troque por um MP4 ou WebM curto em loop, que costuma ser bem menor que o mesmo clipe em GIF.

Como é o Base64 de um GIF

O GIF transparente de 1×1 abaixo tem 42 bytes, 56 caracteres de Base64:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1" height="1">

Ele servia para preencher layouts em tabela e ainda aparece como src provisório de imagens com lazy loading, porque uma imagem válida evita o ícone de imagem quebrada e uma requisição extra.

Tamanho de um GIF animado em Base64

A compressão do GIF é fraca para os padrões atuais, e GIFs animados guardam cada frame. Um GIF de reação de dois segundos passa fácil de alguns megabytes, o que vira vários megabytes de texto Base64. Embuta só GIFs pequenos, como spinners de carregamento ou ícones minúsculos. Para qualquer coisa maior, um arquivo normal pode ficar em cache e ser carregado sob demanda, enquanto um data URI é baixado de novo em cada página que o contém.

E-mail combina mal com GIFs em Base64. O Gmail e outros webmails não mostram imagens em data URI, então GIFs animados em newsletters entram como arquivos hospedados com link. Veja Base64 em e-mail.

Codificar um GIF em Node.js

import { readFileSync } from "node:fs";

const gif = readFileSync("spinner.gif");
const uri = `data:image/gif;base64,${gif.toString("base64")}`;

Base64 em Node.js trata de streams e saída URL-safe. Para transformar uma string Base64 de volta num arquivo reproduzível, use o Base64 para GIF.

Perguntas frequentes