Imagem para Base64
Copie como data URI, pronto para CSS ou HTML
Imagem
Resultado
Nenhuma imagem ainda
Solte uma imagem e a saída em Base64 aparece aqui.
O Base64 aumenta os dados em cerca de 33%. Use só para imagens pequenas.
Embutir uma imagem pequena como data URI elimina uma requisição de rede, o que faz diferença em ícones que aparecem em todas as páginas. Acima de alguns kilobytes deixa de valer, já que o Base64 aumenta os dados em cerca de um terço e eles não podem ser cacheados separadamente.
Como usar
- 1 Solte uma imagem — ícones pequenos funcionam melhor.
- 2 Escolha se quer o data URI completo ou só o conteúdo Base64.
- 3 Copie o resultado e cole no seu CSS ou HTML.
Perguntas frequentes
Quando devo embutir uma imagem?
Abaixo de uns 4KB, e só para imagens usadas em quase todas as páginas. Acima disso, o custo de tamanho e a perda do cache separado superam a requisição economizada.
Por que o arquivo fica maior?
O Base64 representa três bytes binários como quatro caracteres ASCII, um aumento fixo de 33%, mais um pouco pelo prefixo do URI. Esse é o preço de embutir dados binários dentro de um arquivo de texto.
Um data URI é cacheado?
Só como parte do arquivo que o contém. Mude um ícone embutido e a folha de estilo inteira precisa ser baixada de novo — que é exatamente por que embutir imagens grandes sai pela culatra.