Converter PNG para Base64 - Grátis, Instantâneo, no Navegador
Conversor de PNG para Base64
Até 10 MB. Nada é carregado — o ficheiro nunca sai do seu dispositivo.
Use isto num atributo <img src> ou num url() de CSS.
Sem o prefixo data: — para cargas JSON e APIs.
Os seus ficheiros permanecem privados
Esta conversão decorre inteiramente dentro do seu navegador. A imagem nunca é carregada, por isso nada do que codificar aqui chega ao nosso servidor nem a mais ninguém.
Sobre a conversão de PNG para Base64
O PNG é o formato que mais se embute: ícones, logótipos, pequenos sprites, aquelas peças miúdas de interface que de outro modo custariam cada uma um pedido de rede. Codificar um deles em Base64 transforma-o em texto que pode colar diretamente numa folha de estilos ou num atributo HTML. Se é boa ideia depende quase inteiramente de quão pequeno é o ficheiro.
Como converter PNG para Base64
- 1 Largue o ficheiro .png na área de carregamento.
- 2 O resultado aparece de imediato — não há botão a premir nem nada a esperar.
- 3 Copie a forma de que precisa: o data URI para HTML e CSS, a cadeia em bruto para JSON ou a regra CSS já feita.
Quando embutir compensa mesmo
Cada imagem separada numa página custa um pedido, e um pedido tem um custo adicional para além dos bytes que transporta. Para um ícone de 1 KB esse custo pode superar o próprio ficheiro, por isso dobrá-lo dentro da folha de estilos é um ganho real. Como regra grosseira, embutir ajuda abaixo de alguns kilobytes e começa a prejudicar acima de dez. O ponto de equilíbrio não é um número fixo — desloca-se com a ligação, o servidor e quantas outras coisas competem pela largura de banda — mas a forma da troca é sempre a mesma: troca uma ida e volta por bytes a mais.
A que renuncia
A três coisas, e a segunda surpreende. Primeiro, o tamanho: o texto codificado fica cerca de um terço maior do que o ficheiro. Segundo, a cache: uma imagem embutida não pode ser guardada em cache separadamente, por isso é descarregada de novo a cada alteração da folha de estilos que a contém — e uma folha de estilos muda muito mais vezes do que um logótipo. Terceiro, o navegador tem de descodificar a cadeia antes de poder desenhar: trivial para um ícone, mensurável para algo grande. A transparência, ao menos, sobrevive intacta: o canal alfa faz parte dos dados PNG e o Base64 copia-o byte a byte.
Para ícones, pondere primeiro o SVG
Se o que está a codificar é um ícone plano ou um logótipo simples, um SVG será normalmente mais pequeno do que o PNG antes da codificação, e ainda mais pequeno depois, porque o SVG já é texto e não precisa de Base64 nenhum. Além disso adapta-se a qualquer densidade de ecrã sem um segundo ficheiro. Recorra ao PNG quando a imagem tiver detalhe fotográfico, gradientes suaves ou efeitos que os vetores tratam mal — e nesse caso reduza-a antes de codificar, não depois. O Base64 amplia fielmente tudo o que lhe entregar.