Como converto uma imagem em um data URI Base64 para CSS?

Solte ou cole uma imagem (Ctrl+V), depois abra a aba CSS e clique em Copiar. Você obtém uma regra background-image: url(...) com o data URI embutido. As abas HTML, Markdown, Raw Base64 e JSON funcionam da mesma forma.

Por que a saída em Base64 é cerca de um terço maior que a minha imagem?

O Base64 transforma cada 3 bytes em 4 caracteres de texto, então o texto fica cerca de 33% maior que o arquivo. É por isso que data URIs servem para ícones e logotipos pequenos, não para fotos grandes.

Como posso deixar a string Base64 mais curta?

Abra Reduzir primeiro e defina uma Largura máxima ou um Formato (WebP, JPEG ou PNG), e diminua a Qualidade para WebP ou JPEG. Arquivos SVG e GIF não podem ser reduzidos assim; o SVG ganha uma aba SVG (codificado para URL).

Posso transformar uma string Base64 de volta em imagem?

Sim. Mude a Direção para Base64 para imagem e cole um data URI ou Base64 puro. Ele reconhece PNG, JPEG, GIF, WebP, SVG, BMP, ICO e AVIF, e depois oferece o download. Uma entrada inválida mostra um erro.

Por que Copiar falha ou a pré-visualização parece cortada em uma imagem grande?

A pré-visualização mostra apenas os primeiros 2000 caracteres, mas Copiar e Baixar entregam o valor completo. Strings muito grandes podem exceder o limite da área de transferência do navegador, então use Baixar ou reduza a imagem primeiro.

Sim. Todas as ferramentas são gratuitas, sem conta e sem cartão de crédito. O processamento acontece no seu dispositivo, e não nos nossos servidores, e é isso que permite manter tudo gratuito.

Meus arquivos são enviados?

Não. Seus arquivos são abertos e processados dentro do seu navegador e não são enviados para o LibraTool. Algumas ferramentas baixam primeiro um motor de processamento ou modelo de IA para o seu navegador; esse download não contém dados seus.

Sim. Funciona nos navegadores móveis atuais em iOS e Android, sem instalar nada. Arquivos muito grandes podem ficar lentos ou esgotar a memória do celular, por isso use um computador para esses.

🖼️

Imagem para Base64 grátis

Converta uma imagem em um URI de dados Base64 para uso inline em CSS, HTML ou Markdown. Copie trechos prontos. Codificado no seu navegador; nunca enviado.

Tamanho depende do seu dispositivoArquivos permanecem privadosSem login necessárioGratuito para sempre

Funciona offline depois de carregado

Solte um arquivo aqui ou clique para procurar

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, HEIC, HEIF · processado no seu dispositivo

ou pressione Ctrl+V para colar da área de transferência

Procurar arquivos

Dica: você também pode colar uma imagem da sua área de transferência (Ctrl+V).

Seus arquivos nunca saem do seu dispositivo. Todo o processamento acontece localmente no seu navegador.

Converta uma imagem em um data URI Base64 que pode ser colado diretamente em CSS, HTML ou Markdown — sem arquivo separado. Codificado no seu navegador; nunca enviado.

Usos comuns

Embutir uma Imagem em CSSIncorpore um ícone pequeno ou plano de fundo como URI de dados em sua folha de estilos.
Incorporar uma Imagem em HTMLIncorpore um logotipo ou ícone diretamente em HTML independente.
Converter um SVG ou Ícone para Base64Transforme um ícone pequeno em um URI de dados para incorporação.
Incorporar uma Imagem em MarkdownIncorpore uma pequena imagem em um arquivo Markdown com um URI de dados.
Obter um URI de Dados de ImagemProduza um URI de dados bruto que você pode usar em qualquer lugar.

Como funciona

Um URI de dados incorpora uma imagem diretamente no seu código como texto, para que seja carregada sem uma solicitação de arquivo separada — útil para ícones pequenos e HTML independente. Isso codifica no seu navegador.

1
Você coloca uma imagem
É lida localmente com a API FileReader — nunca enviada.
2
É codificado em Base64
Os bytes da imagem se tornam um URI de dados: (data:image/...;base64,…) certo no seu navegador.
3
Você escolhe um snippet
Copie o URI de dados bruto, ou CSS pronto para usar (background-image), HTML (<img>) ou Markdown.
4
Cole no seu código
A imagem agora viaja junto com seu CSS/HTML — nenhum arquivo extra para hospedar.

A imagem é codificada completamente no seu dispositivo. Observe que Base64 é ~33% maior que o original, portanto URIs de dados são melhores para imagens pequenas.

Ferramentas relacionadas

🖼️

Esteganografia de Imagem (Ocultar Texto em Imagem)

Oculte uma mensagem de texto secreta dentro de um PNG usando esteganografia de bit menos significativo, com criptografia opcional por senha AES-256-GCM. Extraia-a depois com a mesma ferramenta. Tudo executa no seu navegador.

ExperimentarArquivos ficam no dispositivo

🔢

Base64 Codificador e decodificador

Codifique texto ou arquivos para Base64 ou decodifique strings Base64 de volta para texto simples. Instantâneo, privado e gratuito.

Experimentar

🔗

Codificador e decodificador de URL

Codifique e decodifique URLs e strings de consulta. Suporta encodeURIComponent, decodeURIComponent e análise de strings de consulta.