Imagem para base64
Uma imagem que você cola numa folha de estilo.
Solte os arquivos aqui
ou clique para escolher no seu dispositivoFormatos aceitos: JPG, JPEG, PNG, WEBP, AVIF, GIF, BMP, HEIC, HEIF, SVG, ICO
Até 3 arquivos por vezAté 20 MB por arquivo10 usos por diaRemova os limites com o Pro✓ Funciona offline
Seus arquivos ficam no seu dispositivo
Esta ferramenta roda inteiramente no seu navegador. Nada é enviado, nada é armazenado, e você pode até desligar a internet antes de começar.
Como funciona
- Adicione a imagem. PNG, JPEG, GIF, WebP, AVIF, SVG, BMP e ICO funcionam.
- Escolha o que vai em volta: data URI puro, regra CSS ou tag img.
- Copie o resultado.
- Olhe a nota de tamanho. Embutir economiza uma requisição e deixa de compensar mais cedo do que se imagina.
Perguntas frequentes
- A imagem é recodificada ou comprimida?
- Não. Os bytes do arquivo são lidos e codificados como estão, então um PNG otimizado continua otimizado e um GIF animado continua animado. Uma ferramenta que recodificasse «para ajudar» mudaria em silêncio as cores de um ícone.
- Quanto aumenta?
- Cerca de um terço. O base64 transforma três bytes em quatro, mais o prefixo. É o preço de uma requisição HTTP economizada.
- Quando embutir compensa de verdade?
- Para algo pequeno e necessário de imediato: um ícone, um espaçador de 1×1, um logotipo minúsculo num e-mail. Passando de alguns kilobytes, os bytes extras em cada carregamento custam mais do que a requisição economizada.
- Dá para embutir um SVG assim?
- Dá, e muitas vezes não deveria: um SVG é texto e pode ir direto no HTML, onde o CSS consegue colorir. O base64 serve para quando tem de ser uma única string opaca.
- Alguma coisa é enviada?
- Não. Tudo acontece no seu navegador.
Ferramentas relacionadas
⇲ Comprimir imagem Reduza JPG, PNG e WebP para caber em e-mail, site ou WhatsApp, direto no seu navegador. ⇄ Converter imagem Um conversor para todos os formatos comuns, incluindo o HEIC do iPhone e o SVG, sem sair do navegador. ◰ Gerador de favicon Entra uma imagem; saem favicon.ico, apple-touch-icon, ícones do manifesto e as tags para colar. ◉ Conta-gotas de cor da imagem Um clique para um código de cor, um botão para a paleta da imagem.