Utilização Conversor de Imagem para Data URI / Base64

Tamanho máximo do ficheiro: 20 MB
Coloca a tua imagem aqui
ou clique para navegar
Ver imagem
JPG, PNG, GIF, WebP, BMP, SVG, AVIF
Dica: O URI de dados inclui o prefixo MIME; o Base64, por si só, corresponde apenas à carga útil bruta.
Link da ferramenta
Copiado para a área de transferência.
Ajude a melhorar esta ferramenta
2.38K
Tempo utilizado
1.83K
Total de utilizadores
5+ anos
Servido
Última revisão em há 4 dias. Os números relativos à utilização são atualizados durante auditorias periódicas. (Relatórios desde 21 Feb 2022)
Comunicar uma discrepância

Ler o conteúdo

Saiba como funciona a ferramenta e quando a utilizar.

Converta vários arquivos de imagem para o formato Data Uri e base64 online e gratuitamente. 

Conversor de Imagem para Data URI / Base64

Um conversor de imagem para data URI / Base64 é uma ferramenta útil que permite converter rapidamente e facilmente uma imagem em uma sequência de texto que pode ser usada em uma página web ou outro aplicativo online. Esse tipo de conversor é útil quando você precisa incorporar uma imagem em seu código, mas não quer usar um serviço de hospedagem de arquivos externo.


 

O que é o Sistema de Codificação Imagem para Base64

Você já precisou converter uma imagem em data url ou string base 64?

Imagem para Base64 é um sistema de codificação de imagem que converte quaisquer imagens em um formato de texto ilegível sem perda de dados, os textos codificados em Base64 gerados contêm sinal de mais, barra, igual, letras latinas e dígitos.

A codificação Base64 é uma maneira muito útil de armazenar informações binárias em formato de texto. Seu objetivo é representar dados binários (como imagens, sons, clipes de vídeo) usando caracteres ASCII (letras do alfabeto + números).

Por que Data URI / Base64?

Uma imagem pode ser convertida em uma string base64 usando um método chamado data URIs. Isso nos permite criar uma URL para a imagem que pode então ser incluída em uma página web. O processo envolve converter nosso(s) arquivo(s) original(is) em um array de bytes (uma coleção de bytes). Então podemos codificar nosso array de bytes em uma string codificada em base64.

Data URIs oferecem vários benefícios em comparação com arquivos locais. Eles economizam espaço no cache do cliente (navegador), são menores em tamanho do que imagens comuns e permitem que sites sirvam imagens maiores com menos uso de largura de banda. Strings Base 64 também são mais fáceis de ler, já que podem ser visualizadas facilmente usando editores de texto comuns.

Com data URIs, você pode incorporar uma imagem diretamente em seu código HTML, sem precisar carregar um arquivo externo. Isso pode acelerar o tempo de carregamento da sua página, e é realmente bem fácil de fazer. Neste artigo, vamos mostrar como converter imagens em data URIs em segundos.

Como Converter Imagem para Base64 Codificado / Data URI em Segundos

Você já se perguntou como fazer as imagens carregarem mais rápido no seu site? Uma maneira de fazer isso é usando data URIs. Basta arrastar e soltar ou enviar sua imagem manualmente do seu dispositivo ou colando a URL da imagem da web, você pode converter sua imagem desejada para o formato de texto Base64 / Data URI .

Exemplo de Imagem para Base64 Codificado

Base64 Codificado de saída para uma imagem é como data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC....

Usos de Imagem para Base64 Codificado

Para Fonte de Imagem (img src):

< img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC..." />

Para URL de Imagem de Fundo (background-image: url):

background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC...")

Como usar Data URI / Base64

Para usar o conversor Data URI / Base64, basta copiar e colar o código gerado em seu projeto onde você gostaria que a imagem incorporada aparecesse. Certifique-se de não remover nenhuma quebra de linha ou espaços do código, pois eles são necessários para a formatação correta de exibição. Você também pode precisar ajustar algumas configurações dependendo de como planeja usar as imagens convertidas - como alterar suas dimensões ou adicionar bordas/espaçamento ao redor delas.

Comentários (0)

Para discussões entre utilizadores, casos excecionais e sugestões adicionais.
Deixa um comentário
O seu comentário será publicado após o envio.
Ainda não há comentários. Seja o primeiro a comentar!
Diz-nos!
Comunicar um problema com esta ferramenta

Descreva o problema que encontrou para que possamos investigar e melhorar a ferramenta.

O que ajuda mais
Inclua a entrada, o resultado esperado, o resultado real, o navegador/dispositivo e uma captura de ecrã, caso seja útil.
O botão de captura de ecrã captura a página no navegador e anexa a imagem gerada a este formulário.
Captura de ecrã de página inteira
Capturado no seu navegador com o newisty.
Ainda não foi capturada nenhuma imagem do ecrã.
Ferramenta Relatório