Como converter uma imagem para Base64
- Arraste uma imagem para a caixa, clique para escolher uma ou cole-a da área de transferência com Ctrl+V.
- Escolha o formato de saída: data URI, somente Base64, HTML, CSS, Markdown ou JSON.
- Clique em Copiar e cole o código no seu HTML, CSS, template de e-mail ou requisição de API.
Quando vale a pena incorporar imagens em Base64?
Imagens em Base64 embutidas no código economizam uma requisição HTTP, o que é útil para ícones pequenos, assinaturas de e-mail, documentos HTML de arquivo único e payloads de API. Como o Base64 é cerca de 33% maior que o arquivo original e não pode ser armazenado em cache separadamente, prefira arquivos de imagem normais para fotos e para tudo o que passar de alguns kilobytes.
Entenda os formatos de saída
- Data URI –
data:image/png;base64,…para atributossrce CSS. - Somente Base64 – a string pura para APIs e bancos de dados.
- HTML / CSS / Markdown – trechos de código completos, prontos para colar.
- JSON – nome do arquivo, tipo MIME e dados em um único objeto.
Perguntas frequentes
Converter para Base64 deixa a imagem maior?
Sim, cerca de um terço maior. Um PNG de 30 KB vira aproximadamente 40 KB de texto Base64. Se o tamanho for importante, comprima ou redimensione a imagem antes.
Quais formatos de imagem posso converter?
Qualquer formato que o seu navegador consiga abrir: PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, AVIF e outros. O tipo MIME correto é adicionado automaticamente ao data URI.
Como usar uma imagem Base64 no CSS?
Escolha o formato CSS e cole o resultado na sua regra, por exemplo .logo { background-image: url("data:image/png;base64,…"); }.