Imagem para Base64

Codifique imagens como data URI Base64

Um data URI Base64 transforma uma imagem em uma sequência de texto simples que você pode colar diretamente no seu HTML ou CSS. O navegador a decodifica na hora, então a imagem é exibida sem uma requisição de arquivo separada — útil para ícones pequenos, modelos de e-mail e páginas autocontidas em um único arquivo.

Esta ferramenta lê o seu arquivo localmente e gera o data: URI completo, além de trechos <img> e CSS background-image prontos para copiar com um clique. Nada é enviado — a codificação é feita inteiramente no seu navegador.

Quando incorporar (e quando não)

Incorporar elimina uma requisição HTTP, o que pode acelerar imagens pequenas e críticas. Mas o Base64 é cerca de 33% maior que o arquivo binário e não pode ser armazenado em cache separadamente, então evite-o para fotos grandes ou imagens reutilizadas em muitas páginas. Como regra prática, incorpore ícones de poucos quilobytes e mantenha imagens maiores como arquivos normais.

Como usar o resultado

O data URI mantém o tipo original do arquivo, por exemplo data:image/png;base64, seguido dos bytes codificados, e a linha de status mostra quantos quilobytes de texto foram gerados. Use os três botões de copiar conforme o destino: o URI simples para um valor src ou href, a tag <img> para HTML (adicione depois um texto alt descritivo) ou a linha CSS para uma folha de estilos.

Ressalvas práticas

• Uma sequência Base64 longa deixa o seu arquivo HTML ou CSS maior e mais lento de ler, e ela é baixada novamente a cada página que a contém. Gzip ou Brotli recuperam parte do excesso, mas os dados da imagem já estão comprimidos, então a economia é limitada.
• Se o seu site usa uma Content Security Policy, img-src precisa permitir URIs data:.
• Muitos clientes de e-mail bloqueiam ou removem data URIs, então teste antes de depender deles em newsletters.
• Comprima ou redimensione a imagem primeiro; uma origem menor gera uma sequência muito mais curta.

Bons candidatos para incorporação

Ícones pequenos, imagens de espaço reservado minúsculas, indicadores de carregamento, logotipos simples e imagens em demonstrações HTML de arquivo único são a melhor opção. Fotos, banners principais e qualquer imagem exibida em muitas páginas são melhor servidos como arquivos separados, para que o navegador possa armazená-los em cache. A codificação acontece no seu navegador e o texto que você copia nunca sai do seu dispositivo até que você mesmo o cole em algum lugar.