Imagem para Base64 / data URI
Image to Base64 / Data URI
Codifica uma imagem como string Base64 ou como data URI pronto para colar em CSS, HTML ou JSON.
Embutir uma imagem como data URI remove uma requisição e acrescenta um terço ao tamanho dela, para sempre, a cada visita, porque um data URI não pode ser cacheado separadamente do documento que o carrega. Esta ferramenta codifica o arquivo e põe as duas metades dessa troca na sua frente antes de você colar.
Solte uma imagem
A codificação acontece nesta aba. Base64 não é compressão — deixa o arquivo um terço maior.
Como usar
Solte a imagem
O tipo é decidido pelos bytes, não pela extensão: um .png que na verdade é um JPEG é comum, e uma imagem embutida com o tipo errado não renderiza.
Leia o veredito
Abaixo de uns 4 KB embutir é de graça; passados uns 100 KB está atrasando a primeira pintura por um recurso que de outro modo seria buscado em paralelo e cacheado.
Escolha o invólucro
CSS dá a forma url(), HTML uma tag img e JSON uma string entre aspas, coladas direto em vez de montadas à mão.
Perguntas frequentes
O Base64 comprime a imagem?
O contrário. Ele codifica três bytes como quatro caracteres, então o texto é exatamente 33⅓% mais longo do que o arquivo antes de qualquer compressão de transporte. É uma codificação, não uma compressão.
Devo embutir o meu SVG deste jeito?
Não. Um SVG já é texto, então codificá-lo como URL custa cerca de 10% em vez de 33% e o resultado continua legível e comparável em um diff. Base64 em um SVG é o erro comum que esta página aponta quando vê um.
Por que ele recusa arquivos acima de 8 MB?
O data URI seria mais de 10 MB de texto em uma linha só. A maioria dos editores, e as ferramentas de desenvolvedor de vários navegadores, ficam inutilizáveis nesse tamanho, e uma imagem embutida de 8 MB nunca foi a resposta certa para começar.
Pode receber de
Compressor de PNG
PNG Compressor
Quantiza a paleta e reescreve o fluxo deflate para reduzir um PNG sem alterar as dimensões — sem enviar arquivos, tudo no seu navegador.
Imagem placeholder
Placeholder Image
Gera um placeholder liso ou degradê em qualquer tamanho, com as dimensões desenhadas nele.
Base64 para imagem
Base64 to Image
Decodifica uma string Base64 ou data URI de volta numa imagem visível e baixável.
Codificar e decodificar Base64
Base64 Encoder & Decoder
Codifica e decodifica Base64 e Base64URL para texto ou arquivos, tratando UTF-8 corretamente.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Codificar e decodificar Base64
Base64 Encoder & Decoder
Codifica e decodifica Base64 e Base64URL para texto ou arquivos, tratando UTF-8 corretamente.
Base64 para imagem
Base64 to Image
Decodifica uma string Base64 ou data URI de volta numa imagem visível e baixável.
Compressor de PNG
PNG Compressor
Quantiza a paleta e reescreve o fluxo deflate para reduzir um PNG sem alterar as dimensões — sem enviar arquivos, tudo no seu navegador.
SVG para data URI de CSS
SVG to CSS Data URI
Codifica um SVG como data URI de background CSS, escapando só o que precisa para mantê-lo pequeno.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.