Conversor de imagem para Base64 + SVG para data URI | We.Inc
Converta imagens PNG, JPG, WebP, GIF ou SVG em data URIs Base64 no seu navegador. Copie como tag img, fundo CSS ou JSON, obtenha uma versão URL-encoded menor para SVG e veja se vale a pena colocar a imagem inline.
O Base64 transforma os bytes de uma imagem em texto para que ela possa ficar dentro do HTML ou do CSS como um data URI, por exemplo src="data:image/png;base64,...". O texto fica cerca de um terço maior que o arquivo. Solte uma imagem abaixo para obter o data URI, trechos prontos de img e CSS, e uma orientação sobre se vale a pena colocá-la inline.
Quando colocar inline ajuda e quando atrapalha
Imagem
Colocar inline?
Por quê
Ícone com menos de 4 kB
Normalmente sim
Economiza uma requisição a um custo baixo
Logo ou ícone em SVG
Sim, URL-encoded
Menor que o Base64 e ainda legível
Imagem acima da dobra, de 4 a 20 kB
Às vezes
Só se aparecer em uma única página
Foto ou qualquer coisa acima de 20 kB
Não
Pesa em todo carregamento e não pode ficar em cache sozinha
Solte uma imagem ou várias. Cada uma recebe o seu data URI em Base64 e, no caso de arquivos SVG, uma versão URL-encoded que normalmente é menor. Copie qualquer uma delas como tag img, fundo CSS ou valor JSON. Os arquivos nunca saem do seu dispositivo.
Solte as imagens na caixa ou clique para escolhê-las. PNG, JPG, WebP, GIF, AVIF, ICO e SVG funcionam.
O navegador lê cada arquivo localmente e o codifica. Nada é enviado.
Compare o tamanho original com o tamanho codificado e leia o veredito sobre colocar inline ou não.
Copie o formato de que você precisa: data URI puro, tag img, background-image do CSS ou JSON.
Comprima primeiro, depois codifique. Codificar uma foto de 300 kB gera cerca de 400 kB de texto, o que é pior que o arquivo de partida.
Para SVG, a forma URL-encoded dispensa o Base64 por completo. Ela costuma ser menor e você ainda consegue ler e editar o markup.
Data URIs no CSS são baixados junto com a folha de estilos, o que bloqueia a renderização. Use-os só para ícones pequenos de que todas as páginas precisam.
Lembre do texto alt. Uma imagem inline ainda precisa de uma descrição para leitores de tela, ou alt="" se for decorativa.
Perguntas frequentes
Por que a versão em Base64 é maior que a minha imagem?
O Base64 usa quatro caracteres de texto para cada três bytes, então a saída fica cerca de 33% maior, mais alguns bytes de preenchimento e o prefixo data:. A compressão Gzip ou Brotli na página recupera parte disso, mas raramente tudo.
Devo usar Base64 para SVG?
Normalmente não. O SVG já é texto, então pode ir em um data URI com apenas alguns caracteres escapados. Essa versão costuma ser menor que o Base64 e continua legível. Use Base64 só se a ferramenta em que você vai colar recusar a forma URL-encoded.
Data URIs funcionam em e-mails?
O suporte é irregular. Vários dos principais clientes de e-mail bloqueiam ou removem imagens em data URI, então, em newsletters, hospede a imagem e coloque um link para ela, ou anexe-a com um content ID.
Existe um limite de tamanho para data URIs?
Os navegadores atuais aceitam data URIs muito longos em tags img e no CSS, bem além de qualquer imagem razoável. O limite prático é o desempenho: imagens inline grandes deixam lento o arquivo que as contém. Algumas ferramentas e clientes de e-mail mais antigos de fato os cortam.
Como um data URI é montado
Um data URI tem três partes: o esquema data:, o tipo de mídia, como image/png, e o conteúdo. Para imagens binárias, o conteúdo é Base64 e o tipo é seguido de ;base64. Para formatos de texto como SVG, o conteúdo pode ser o próprio markup com alguns poucos caracteres codificados em porcentagem.
Os navegadores tratam um data URI como qualquer outra fonte de imagem. Ele é decodificado na memória, então não há requisição extra, mas também não há uma entrada de cache separada: a imagem é baixada de novo toda vez que a página ou a folha de estilos que a contém for baixada.
Opções melhores para a maioria das imagens
Para qualquer coisa maior que um ícone, um arquivo normal servido via HTTP/2 ou HTTP/3 é quase sempre mais rápido. Várias requisições compartilham uma conexão, a imagem fica em cache por conta própria e o navegador pode carregá-la de forma lazy ou no tamanho certo com srcset.
Colocar inline ainda vale a pena para ícones minúsculos em um único componente, para placeholders exibidos enquanto a imagem real carrega, e para arquivos HTML autossuficientes, como relatórios ou demos offline.
Pequena o bastante para colocar inline. Economiza uma requisição e acrescenta pouco ao arquivo que a contém.
No limite. Coloque inline só se ela aparecer acima da dobra em uma única página; caso contrário, um arquivo normal fica melhor em cache.
Data URI
JSON
tipo desconhecido
, {w} por {h} px
Arquivo {file}, codificado {encoded} ({pct}% do arquivo)
Codificação do SVG
SVG URL-encoded ({size})
Base64 ({size})
Formato da cópia
... ({n} caracteres; use Copiar para o texto completo)
Saída de {name}
Copiar
{name} não é uma imagem, então foi ignorado.
Codificar imagens
Solte as imagens aqui ou clique para escolher. Elas ficam no seu dispositivo.