Base64
Image Data URL
⚠️ Large image may freez the browser
Codificar PNG para Base64 para CSS
Converta imagens PNG para formatos Base64 ou DataURL. Incorpore diretamente em CSS ou JavaScript sem arquivos externos. Arquivos maiores podem afetar o desempenho; tamanhos menores são recomendados. Codificação Base64 simplifica a integração com ativos da web, reduzindo a dependência de recursos externos. Formato DataURL simplifica a estrutura do código para a entrega de conteúdo dinâmico.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Converter Imagens para Código Base64
1
Carregue Imagem PNG
Faça o upload da sua imagem PNG clicando ou arrastrando-a para a área de carregamento.
2
Escolha o Formato de Codificação
Selecione a aba 'Base64' ou 'DataURL' para escolher o formato de codificação desejado.
3
Visualizar Dados Base64
A representação Base64 ou DataURL da sua imagem aparecerá na área de texto abaixo dos separadores.
4
Copie o Texto Codificado
Clique no botão 'Copiar' para copiar o texto codificado para a sua área de transferência para uso no seu CSS ou JavaScript.
Inclua PNGs Diretamente no Seu CSS
Incluir uma pequena imagem diretamente no seu CSS sem gerenciar arquivos separados pode ser alcançado convertendo PNGs para formatos Base64 ou DataURL. A ferramenta encode-png-to-base64-for-css simplifica o seu fluxo de trabalho de desenvolvimento web e reduz solicitações HTTP. Isso resulta em código mais limpo, mais eficiente e tempos de carregamento de página mais rápidos.
Reduzir o Tamanho do Arquivo e Número de Requisições HTTP
Esta ferramenta reduz o número de arquivos que seu site precisa carregar convertendo imagens PNG em formatos Base64 ou DataURL. Incorporar imagens diretamente em seu CSS ou JavaScript reduz solicitações HTTP, o que pode melhorar a velocidade de carregamento da página. Essa abordagem otimiza o desempenho do site minimizando dependências de arquivos externos.
Perguntas Frequentes
O que é uma URL de dados Base64 e por que eu usaria isso?
Um DataURL Base64 é uma forma de representar uma imagem como uma string de caracteres. Permite incorporar imagens diretamente no seu código CSS ou JavaScript, evitando a necessidade de carregá-las de arquivos externos. Isso pode ser útil para pequenos ícones ou imagens.
Como eu uso a Base64 ou DataURL gerada?
Basta copiar o código fornecido após converter sua imagem e colá-lo em seu CSS ou JavaScript. Por exemplo, em CSS, você pode usá-lo assim: background-image: url('data:image/png;base64,...');
Quais formatos de imagem esta ferramenta suporta?
Esta ferramenta é especificamente projetada para imagens PNG. Outros formatos podem não converter corretamente.
Por que imagens grandes não são recomendadas?
Imagens grandes criam strings Base64 muito longas, o que pode diminuir a velocidade do seu computador e aumentar o tempo de carregamento da página. É melhor usar esta ferramenta para imagens menores.
Existe um limite para o tamanho da imagem que posso enviar?
Embora não haja um limite rígido de tamanho de arquivo, o desempenho diminuirá com imagens maiores. Recomendamos usar arquivos PNG menores para melhores resultados.