1 Escolha as imagens
2 Diga para onde ela vai
Uma data URI sozinha raramente é o que alguém quer. O que se quer é a linha que vai na folha de estilo. Então escolha a linha, e a imagem chega dentro dela já entre aspas, que é a parte fácil de errar e que só falha com SVGs.
O texto alt fica vazio de propósito. Só você sabe se a imagem carrega significado ou é decoração, e uma descrição chutada a partir de um nome de arquivo é pior para quem usa leitor de tela do que descrição nenhuma.
SVGs com outra codificação XML ou bytes que não são UTF-8 válido usam base64 automaticamente. Os bytes originais e a declaração de codificação são preservados.
Pôr os SVGs em base64 também Desligado por padrão, porque um SVG é texto e base64 é para bytes. A codificação em porcentagem deixa a marcação legível na folha de estilo e costuma ser uns 20% mais curta. Ligue para a rara cadeia de ferramentas que insiste em ;base64.
3 Copie
Nada escolhido ainda. Jogue uma imagem aí em cima e a linha para colar aparece aqui.
# Imagem para data URI — codificar uma imagem em base64 para CSS ou HTML
A imagem inteira como uma linha de texto. Cole direto no CSS ou no HTML.
> Transforme um PNG, JPEG, SVG ou WebP numa data URI que você cola no CSS ou no HTML. SVGs em UTF-8 são codificados em porcentagem em vez de base64, então ficam legíveis e mais curtos. Roda no seu navegador e não envia nada.
Esta é uma ferramenta interativa de navegador em https://abox.tools/pt/imagem-para-base64/. Os arquivos são processados no dispositivo que executa esse navegador. Compartilhamento deliberado e funções opcionais de rede são explicados na página. A seguir está sua explicação escrita; abra o endereço para usá-la.
## Seus imagens são **processados no navegador**. Sem envio para processamento.
A codificação roda no seu próprio navegador, no seu próprio hardware. É aritmética sobre bytes que a página já tem: sem codificador, sem servidor e sem etapa de rede para deixar de fora. Esta ferramenta não tem função de rede de espécie alguma, não há o que buscar nem o que mandar, e do outro lado desta página não existe servidor nenhum para onde mandar uma imagem, mesmo que houvesse caminho.
- ✗ Sem envio
- ✗ Sem conta
- ✗ Sem recodificação
- ✓ Funciona offline
- ✓ Código aberto
## Como transformar uma imagem em uma data URI
1. **Escolha suas imagens.** Arraste até o seletor, ou escolha na mão. Quem lê tudo direto do seu disco é o navegador, e nada é mandado para lugar nenhum enquanto você faz isso.
2. **Diga para onde o resultado vai.** A URI sozinha, uma regra de CSS, uma propriedade personalizada, uma tag `<img>` ou Markdown. Todas elas põem a URI entre aspas, que é o detalhe que decide se um SVG embutido funciona ou deixa de funcionar em silêncio.
3. **Leia o que custou.** Cada resultado diz em quantos caracteres ele virou, quanto isso é maior que o arquivo, e se embutir algo desse tamanho é boa ideia. O base64 acrescenta um terço, e se esse terço vale uma requisição poupada depende inteiramente do tamanho, então a página diz de que lado da linha você está.
4. **Confira os avisos.** Se a imagem carrega EXIF, um perfil de cor ou XMP, isso é nomeado junto com quantos bytes do seu resultado são aquilo. Se a extensão discorda do formato real, a página usa o formato e avisa você. E se o seu navegador não conseguir desenhar o resultado, ela também diz.
5. **Copie, ou baixe.** Um botão por resultado, e um para todos de uma vez. As propriedades personalizadas saem embrulhadas num bloco `:root`, prontas para colar no alto de uma folha de estilo.
## A versão longa
[Quando colocar uma imagem dentro do seu CSS, e quando não](https://abox.tools/pt/guias/colocar-uma-imagem-no-css/): O que uma data URI custa, por que o base64 acrescenta um terço e o gzip não devolve, por que um SVG nunca deveria ir em base64, e o erro de aspas que quebra SVGs embutidos em silêncio.
## Também na caixa
- [SVG para imagem](https://abox.tools/pt/svg-para-png/): Diga o tamanho. Um vetor não tem tamanho próprio a perder.
- [Imagem para SVG](https://abox.tools/pt/imagem-para-svg/): Uma forma, um contorno. Aponte para o que não deveria estar ali.
- [Comparador de alturas](https://abox.tools/pt/comparar-alturas/): Digite as alturas, leve a imagem. Nada é enviado para desenhá-la.
- [Prévia do Perfil da Empresa](https://abox.tools/pt/previa-perfil-empresa/): Digite os dados e veja uma simulação do cartão do Google. Nada é enviado para desenhá-la.
## Perguntas
### Minha imagem é enviada para algum lugar?
Não. Quem lê e codifica o arquivo é o seu próprio navegador, no seu próprio hardware, com duas funções que ele já tem. Esta ferramenta não tem função de rede de espécie alguma: nunca busca nada e nunca manda nada. E a `Content-Security-Policy` da página lista todos os endereços que ela pode acessar, nenhum dos quais é deste site.
### O que é uma data URI?
Um jeito de escrever um arquivo inteiro onde normalmente iria um endereço da web. Em vez de `url("logo.png")`, que manda o navegador ir buscar alguma coisa, você escreve `url("data:image/png;base64,iVBORw0...")`, que contém a própria imagem. O navegador decodifica ali mesmo. O efeito prático é uma requisição a menos: a imagem chega junto com a folha de estilo ou com a página, em vez de chegar depois.
### Por que o meu SVG não está em base64?
SVGs em UTF-8 válido usam codificação em porcentagem, que continua legível e costuma ser mais curta que base64. SVGs com outra codificação XML ou UTF-8 inválido usam base64 automaticamente para preservar os bytes originais e a declaração de codificação. A caixa força base64 também para SVGs em UTF-8. A prévia ainda depende de o navegador conseguir desenhar o arquivo original.
### Quanto o base64 deixa a minha imagem maior?
Cerca de um terço. Três bytes de arquivo viram quatro caracteres de base64, o que dá 33% antes do `data:image/png;base64,` na frente. Esse é o piso, e é inevitável, porque é o que custa escrever bytes arbitrários usando só os caracteres que uma URL permite. É também por isso que a página mostra a contagem de caracteres ao lado do tamanho do arquivo, em vez de deixar você descobrir quando a folha de estilo já estiver no ar.
### Quando embutir uma imagem é realmente boa ideia?
Quando ela é pequena e é necessária de imediato. Um ícone de 2 KB numa folha de estilo que toda página carrega é vitória clara: uma ida e volta a menos, e a imagem já está lá no momento em que o CSS está. Passando de uns 10 KB a troca vira. Uma imagem embutida deixa de ser um arquivo separado, então não pode ser guardada em cache sozinha, não pode ser buscada em paralelo com outra coisa, e é baixada de novo por inteiro toda vez que o arquivo em volta dela muda. Uma fotografia de 200 KB numa folha de estilo são 200 KB acrescentados ao caminho crítico de toda página do site. A página avisa de que lado dessa linha cada resultado cai.
### O gzip desfaz o custo do base64?
Menos do que as pessoas esperam. O base64 de um arquivo já comprimido, que é o que um PNG, um JPEG e um WebP são, comprime mal, porque quase não sobrou redundância para o compressor achar. Você normalmente recupera algo como um décimo daquele terço que o base64 acrescentou, e não o terço inteiro. Um SVG codificado em porcentagem é o caso oposto: ele continua sendo texto, então comprime mais ou menos tão bem quanto antes, o que é mais um motivo para não pôr um em base64.
### Isto muda a minha imagem em alguma coisa?
Não, e essa é uma diferença de propósito em relação à maioria das ferramentas daqui. Nada é decodificado em pixels e codificado de novo: os bytes que saíram do seu disco são os bytes que entram na URI. Um JPEG continua exatamente o JPEG que era, na mesma qualidade, com as mesmas dimensões. É por isso que o resultado pode ser descrito como o mesmo arquivo, e não como uma cópia dele.
### Então os meus dados EXIF e de GPS vão para dentro da folha de estilo também?
Vão, e essa é a parte que vale pensar antes de colar. Como nada é recodificado, tudo o que a câmera escreveu viaja junto com a imagem: a localização, o horário, o número de série da câmera. Numa foto de celular isso pode ser 30 KB do arquivo, que viram 40 KB de base64 no caminho crítico da sua página, e um endereço residencial dentro de algo que vai para um repositório. A página lê quanto metadado existe num JPEG, PNG ou WebP e diz isso. Para tirar antes, use o [Visualizador e removedor de EXIF](https://abox.tools/pt/remover-dados-exif/).
### Por que ele usou um tipo diferente da extensão do meu arquivo?
Porque a extensão pode estar errada e os bytes não podem. Um arquivo chamado `logo.png` que na verdade foi exportado como JPEG é comum o bastante para toda ferramenta de imagem ter que lidar com isso, e uma data URI que declara o tipo errado simplesmente não é desenhada: não há alternativa nem mensagem de erro que valha a leitura. Então o tipo é lido dos primeiros bytes do arquivo, que dizem o que ele é sem ambiguidade em todos os formatos daqui, e a página avisa você quando os dois discordam.
### A pré-visualização está em branco. O que deu errado?
Provavelmente nada na URI. HEIC e TIFF geram data URIs perfeitamente válidas que navegador nenhum, exceto o Safari, vai desenhar, então a imagem também vai faltar onde quer que você a cole. Converta para PNG, JPEG ou WebP antes, com o [Compressor de imagens](https://abox.tools/pt/comprimir-imagem/) ou o [Redimensionador de imagens](https://abox.tools/pt/redimensionar-imagem/). Se o formato for um comum, é provável que o arquivo em si esteja danificado: a pré-visualização é desenhada a partir da URI que esta página montou, então uma em branco significa que a imagem não decodificou.
### Existe limite de tamanho para uma data URI?
Sim. Navegadores impõem limites finitos às URLs de dados, diferentes por implementação; o aplicativo ou a política de destino pode impor limites menores. CSS e um `<img>` podem usá-las, mas a navegação na barra de endereços tem restrições separadas. Use imagens pequenas e teste o destino. [A MDN documenta os limites](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data).
### É grátis, e preciso de conta?
É grátis, e não tem conta, nem login, nem período de teste, nem marca d'água. Também não tem limite para o número nem para o tamanho dos arquivos, porque não existe servidor pagando por eles: o trabalho acontece no seu próprio computador. O site exibe publicidade, e é ela que paga a conta. Os anúncios não recebem nada sobre as suas imagens.
### Funciona offline?
Funciona. Carregue a página uma vez, depois desligue a internet e ela continua funcionando. Esse é também o jeito mais simples de provar que nada está sendo enviado: uma ferramenta que mandasse as suas imagens embora para serem codificadas pararia no instante em que você tirasse da tomada.
## Como dá para conferir a promessa de privacidade
- **O processamento acontece neste navegador.** A ferramenta processa entradas e resultados no navegador. Seu código não os envia para processamento. Content-Security-Policy limita recursos e destinos, mas hosts permitidos podem receber solicitações: ela não inspeciona o conteúdo nem prova sozinha que nada é enviado. Compare código e solicitações da operação ou conclua a operação local desconectado.
- **Nada aqui vai buscar coisa alguma.** Não existe `fetch`, nem `XMLHttpRequest`, nem `sendBeacon` em lugar nenhum de `src/`. A codificação é `btoa` e `encodeURIComponent`, duas funções que o navegador tem desde o começo, e as duas pegam bytes e devolvem texto sem ir a lugar nenhum.
- **A pré-visualização é a prova.** A imagem ao lado de cada resultado é desenhada a partir da data URI que esta página acabou de montar, e não do seu arquivo. Ela aparece porque a URI está correta, no seu computador, sem servidor nenhum envolvido. E se não aparecer, a página avisa em vez de entregar algo quebrado.
- **O aviso de metadados está do seu lado.** Uma data URI copia o arquivo exatamente, então a posição de GPS de uma fotografia viaja junto para dentro da sua folha de estilo. Esta página lê quanto disso existe e conta para você, porque a alternativa é descobrir depois de já ter feito o commit.
- **O que o Google carrega, e o que não chega até ele.** Os scripts de publicidade e de medição vêm do Google, e o botão de doação vem do Buy Me a Coffee. Nenhum deles recebe coisa alguma sobre as suas imagens. Toda linha que lê ou codifica um arquivo é servida desta origem e está listada no repositório.
- **Funciona offline.** Desligue a rede e a ferramenta continua igualzinha, porque nunca houve uma etapa de rede nela. Essa é a prova mais simples de todas.
**Confira você mesmo.** Nada do que está acima precisa ser aceito na fé. Esta página é gerada a partir dos modelos e da configuração do repositório por um script de compilação que você pode ler e rodar por conta própria, e o resultado vai para a branch `dist`. Ou seja, dá para comparar o que é servido com o que uma compilação das fontes produz: https://github.com/A-Box-of-Tools/website
Os primeiros arquivos que valem a leitura são `config/site.toml` para a Content-Security-Policy, `src/encode.js` para as duas codificações e o raciocínio por trás de cada uma, `src/sniff.js` para como o tipo de mídia é lido do arquivo em vez do nome dele, e `src/metadata.js` para a verificação que diz quanto daquilo que você está prestes a colar não é a imagem.
Como transformar uma imagem em uma data URI
- Escolha suas imagens. Arraste até o seletor, ou escolha na mão. Quem lê tudo direto do seu disco é o navegador, e nada é mandado para lugar nenhum enquanto você faz isso.
- Diga para onde o resultado vai. A URI sozinha, uma regra de CSS, uma propriedade personalizada, uma tag
<img>ou Markdown. Todas elas põem a URI entre aspas, que é o detalhe que decide se um SVG embutido funciona ou deixa de funcionar em silêncio. - Leia o que custou. Cada resultado diz em quantos caracteres ele virou, quanto isso é maior que o arquivo, e se embutir algo desse tamanho é boa ideia. O base64 acrescenta um terço, e se esse terço vale uma requisição poupada depende inteiramente do tamanho, então a página diz de que lado da linha você está.
- Confira os avisos. Se a imagem carrega EXIF, um perfil de cor ou XMP, isso é nomeado junto com quantos bytes do seu resultado são aquilo. Se a extensão discorda do formato real, a página usa o formato e avisa você. E se o seu navegador não conseguir desenhar o resultado, ela também diz.
- Copie, ou baixe. Um botão por resultado, e um para todos de uma vez. As propriedades personalizadas saem embrulhadas num bloco
:root, prontas para colar no alto de uma folha de estilo.
A versão longa
Quando colocar uma imagem dentro do seu CSS, e quando não O que uma data URI custa, por que o base64 acrescenta um terço e o gzip não devolve, por que um SVG nunca deveria ir em base64, e o erro de aspas que quebra SVGs embutidos em silêncio.
Também na caixa
Perguntas
Minha imagem é enviada para algum lugar?
Não. Quem lê e codifica o arquivo é o seu próprio navegador, no seu próprio hardware, com duas funções que ele já tem. Esta ferramenta não tem função de rede de espécie alguma: nunca busca nada e nunca manda nada. E a Content-Security-Policy da página lista todos os endereços que ela pode acessar, nenhum dos quais é deste site.
O que é uma data URI?
Um jeito de escrever um arquivo inteiro onde normalmente iria um endereço da web. Em vez de url("logo.png"), que manda o navegador ir buscar alguma coisa, você escreve url("data:image/png;base64,iVBORw0..."), que contém a própria imagem. O navegador decodifica ali mesmo. O efeito prático é uma requisição a menos: a imagem chega junto com a folha de estilo ou com a página, em vez de chegar depois.
Por que o meu SVG não está em base64?
SVGs em UTF-8 válido usam codificação em porcentagem, que continua legível e costuma ser mais curta que base64. SVGs com outra codificação XML ou UTF-8 inválido usam base64 automaticamente para preservar os bytes originais e a declaração de codificação. A caixa força base64 também para SVGs em UTF-8. A prévia ainda depende de o navegador conseguir desenhar o arquivo original.
Quanto o base64 deixa a minha imagem maior?
Cerca de um terço. Três bytes de arquivo viram quatro caracteres de base64, o que dá 33% antes do data:image/png;base64, na frente. Esse é o piso, e é inevitável, porque é o que custa escrever bytes arbitrários usando só os caracteres que uma URL permite. É também por isso que a página mostra a contagem de caracteres ao lado do tamanho do arquivo, em vez de deixar você descobrir quando a folha de estilo já estiver no ar.
Quando embutir uma imagem é realmente boa ideia?
Quando ela é pequena e é necessária de imediato. Um ícone de 2 KB numa folha de estilo que toda página carrega é vitória clara: uma ida e volta a menos, e a imagem já está lá no momento em que o CSS está. Passando de uns 10 KB a troca vira. Uma imagem embutida deixa de ser um arquivo separado, então não pode ser guardada em cache sozinha, não pode ser buscada em paralelo com outra coisa, e é baixada de novo por inteiro toda vez que o arquivo em volta dela muda. Uma fotografia de 200 KB numa folha de estilo são 200 KB acrescentados ao caminho crítico de toda página do site. A página avisa de que lado dessa linha cada resultado cai.
O gzip desfaz o custo do base64?
Menos do que as pessoas esperam. O base64 de um arquivo já comprimido, que é o que um PNG, um JPEG e um WebP são, comprime mal, porque quase não sobrou redundância para o compressor achar. Você normalmente recupera algo como um décimo daquele terço que o base64 acrescentou, e não o terço inteiro. Um SVG codificado em porcentagem é o caso oposto: ele continua sendo texto, então comprime mais ou menos tão bem quanto antes, o que é mais um motivo para não pôr um em base64.
Isto muda a minha imagem em alguma coisa?
Não, e essa é uma diferença de propósito em relação à maioria das ferramentas daqui. Nada é decodificado em pixels e codificado de novo: os bytes que saíram do seu disco são os bytes que entram na URI. Um JPEG continua exatamente o JPEG que era, na mesma qualidade, com as mesmas dimensões. É por isso que o resultado pode ser descrito como o mesmo arquivo, e não como uma cópia dele.
Então os meus dados EXIF e de GPS vão para dentro da folha de estilo também?
Vão, e essa é a parte que vale pensar antes de colar. Como nada é recodificado, tudo o que a câmera escreveu viaja junto com a imagem: a localização, o horário, o número de série da câmera. Numa foto de celular isso pode ser 30 KB do arquivo, que viram 40 KB de base64 no caminho crítico da sua página, e um endereço residencial dentro de algo que vai para um repositório. A página lê quanto metadado existe num JPEG, PNG ou WebP e diz isso. Para tirar antes, use o Visualizador e removedor de EXIF.
Por que ele usou um tipo diferente da extensão do meu arquivo?
Porque a extensão pode estar errada e os bytes não podem. Um arquivo chamado logo.png que na verdade foi exportado como JPEG é comum o bastante para toda ferramenta de imagem ter que lidar com isso, e uma data URI que declara o tipo errado simplesmente não é desenhada: não há alternativa nem mensagem de erro que valha a leitura. Então o tipo é lido dos primeiros bytes do arquivo, que dizem o que ele é sem ambiguidade em todos os formatos daqui, e a página avisa você quando os dois discordam.
A pré-visualização está em branco. O que deu errado?
Provavelmente nada na URI. HEIC e TIFF geram data URIs perfeitamente válidas que navegador nenhum, exceto o Safari, vai desenhar, então a imagem também vai faltar onde quer que você a cole. Converta para PNG, JPEG ou WebP antes, com o Compressor de imagens ou o Redimensionador de imagens. Se o formato for um comum, é provável que o arquivo em si esteja danificado: a pré-visualização é desenhada a partir da URI que esta página montou, então uma em branco significa que a imagem não decodificou.
Existe limite de tamanho para uma data URI?
Sim. Navegadores impõem limites finitos às URLs de dados, diferentes por implementação; o aplicativo ou a política de destino pode impor limites menores. CSS e um <img> podem usá-las, mas a navegação na barra de endereços tem restrições separadas. Use imagens pequenas e teste o destino. A MDN documenta os limites.
É grátis, e preciso de conta?
É grátis, e não tem conta, nem login, nem período de teste, nem marca d'água. Também não tem limite para o número nem para o tamanho dos arquivos, porque não existe servidor pagando por eles: o trabalho acontece no seu próprio computador. O site exibe publicidade, e é ela que paga a conta. Os anúncios não recebem nada sobre as suas imagens.
Funciona offline?
Funciona. Carregue a página uma vez, depois desligue a internet e ela continua funcionando. Esse é também o jeito mais simples de provar que nada está sendo enviado: uma ferramenta que mandasse as suas imagens embora para serem codificadas pararia no instante em que você tirasse da tomada.