Siga este exemplo prático e, em seguida, adapte os mesmos controlos à sua própria imagem. Abrir Conversor de Imagem para Base64.
Selecione uma imagem e pré-visualize a sua identidade
Abra o Conversor de Imagem para Base64. Selecione uma imagem ou Experimente uma amostra. O exemplo utiliza o favicon-orbit.png de 512 × 512 píxeis, que contém 202,491 bytes. O editor mostra a imagem acima do seu código para que possa confirmar que selecionou o ativo pretendido.
PNG, JPG, WebP, GIF, BMP e AVIF são suportados quando o seu navegador os consegue descodificar para pré-visualização. O tamanho máximo do ficheiro é 25 MB, com limites de 60 megapíxeis e 16,000 píxeis por lado. A marcação SVG não é aceite por este conversor raster.
A ferramenta lê os bytes do ficheiro original. Não utiliza a pré-visualização para reconstruir a imagem, redimensioná-la ou recompressá-la. Os metadados existentes e a animação GIF são, portanto, retidos nos dados codificados.
Antes de codificar, utilize Redimensionar Imagem ou Compressor de Imagem se precisar de um ativo mais pequeno. O Base64 por si só não reduz o tamanho da imagem.
Escolha a representação que o seu projeto espera
Abra Definições e selecione imagem HTML em Formato de código para este exemplo. O resultado é uma etiqueta img que contém um URL de dados Base64. O atributo alt está inicialmente vazio; escreva texto alternativo útil quando a imagem comunica informações.
O URL de dados começa com um prefixo como data:image/png;base64, seguido pelos dados codificados. O Base64 simples contém apenas os dados. O fundo CSS envolve o URL de dados numa declaração background-image. Estas representações servem destinos diferentes, por isso copie o formato solicitado pela sua aplicação em vez de alterar apenas o nome do ficheiro.
O painel de código é atualizado imediatamente após alterar o Formato de código. O ícone de cópia copia a representação atual e apresenta a confirmação de cópia partilhada. Quando o acesso à área de transferência está bloqueado, o código é selecionado para cópia manual.
Uma tag HTML img completa não é a mesma coisa que um URL de dados. Utilize apenas o valor src quando um campo solicitar um URL.
O exemplo neste guia
Experimente um exemplo: favicon-orbit.png, 512 × 512 px, 202,491 bytes. Escolha a imagem HTML no formato de código. Selecione Iniciar e transfira favicon-orbit-base64.txt.
- PNG original
- 512 × 512 px · 202,491 bytes
- Saída de texto HTML
- 270,029 bytes
- Codificação
- Bytes originais; sem recompressão
Transfira o código e compreenda o seu tamanho
Selecione Iniciar e, em seguida, Transferir. O exemplo guarda favicon-orbit-base64.txt contendo HTML código de imagem. Os seus 270,029 bytes são maiores do que a fonte de 202,491 bytes. A comparação do artigo mostra o início real do texto transferido, encurtado apenas para facilitar a leitura.
Base64 converte tipicamente três bytes de origem em quatro caracteres de texto, adicionando cerca de um terço antes do pequeno invólucro. Incorporar um pequeno ícone pode tornar um documento autónomo, mas colocar grandes cadeias de imagem dentro de HTML ou CSS também aumenta esse documento e impede que a imagem seja colocada em cache como um ficheiro separado.
A codificação não é encriptação. Qualquer pessoa com a cadeia Base64 completa pode recuperar a imagem subjacente. Trate o código com o mesmo cuidado que a fonte se contiver informações privadas.
O excerto truncado neste artigo é explicativo. Utilize o TXT transferido completo ou copie o código integral da ferramenta.
Questões comuns
A codificação reduz a qualidade da imagem?
Não. A codificação preserva os bytes originais. Não redimensiona, comprime nem redesenha a imagem.
Porque é que a string Base64 é maior do que a imagem?
Base64 representa três bytes de entrada usando quatro caracteres de texto, pelo que normalmente adiciona cerca de um terço antes de um invólucro ou prefixo.
As animações GIF são preservadas?
A codificação preserva os bytes GIF originais, incluindo a animação. Uma pré-visualização pode mostrar um fotograma estático enquanto os dados codificados retêm todos os fotogramas.
Base64 é seguro para imagens secretas?
Base64 não é encriptação. Mantenha a string privada se a imagem subjacente for privada. O conversor processa-a localmente no seu navegador.
Transforme a imagem certa no código certo.
Experimente um exemplo ou utilize o seu próprio ficheiro e reveja o resultado antes de partilhar.
