Qual ferramenta de imagem eu preciso
| Sua tarefa | Ferramenta |
|---|---|
| Qualquer imagem para Base64 ou data URI | Imagem para Base64 |
| Colar Base64 e ver a imagem | Base64 para imagem |
| Logos, capturas de tela, transparência | PNG para Base64, Base64 para PNG |
| Fotos | JPG para Base64, Base64 para JPG |
| Arquivos menores para a web | WebP para Base64, AVIF para Base64, Base64 para WebP |
| Animações | GIF para Base64, Base64 para GIF |
| Ícones vetoriais no CSS | SVG para Base64, ou o data URI de SVG, que costuma sair mais curto |
| Inspecionar com segurança um SVG em Base64 | Base64 para SVG |
| Um favicon inline | Favicon para data URI, Base64 para ICO |
| Fotos do iPhone, digitalizações, bitmaps legados | HEIC para Base64, TIFF para Base64, BMP para Base64, Base64 para BMP |
Os codificadores compartilham o mesmo conjunto de saídas: Base64 puro, data URI, background-image do CSS, HTML <img> com largura e altura, Markdown e um objeto JSON com nome, tipo e tamanho. Você pode arrastar vários arquivos de uma vez ou colar uma captura de tela com Ctrl+V.
Escolher o formato antes de codificar
O Base64 deixa toda imagem um terço maior, então o formato decide a maior parte do tamanho final.
- PNG para gráficos chapados, elementos de interface e qualquer coisa com transparência ou texto.
- JPEG para fotos, em que um PNG ficaria várias vezes maior.
- WebP para os dois casos, quando o destino suporta; costuma ser o menor dos três.
- SVG para ícones e logos que são desenhos vetoriais. Como data URI com codificação de URL, muitas vezes fica mais curto que o Base64, e a ferramenta data URI de SVG compara os dois lado a lado.
- HEIC e TIFF são codificados como estão. A maioria dos navegadores não os exibe, então converta para JPEG ou PNG antes se o resultado precisar aparecer numa página web.
Reconhecer o Base64 de uma imagem
| Prefixo | Formato |
|---|---|
iVBORw0KGgo | PNG |
/9j/ | JPEG |
R0lGODlh / R0lGODdh | GIF |
UklGR | contêiner RIFF: WebP, mas também áudio WAV |
PHN2Zy / PD94bWwg | SVG começando com <svg ou <?xml |
AAABAA | ICO |
Qk | BMP |
Um data URI completo acrescenta o MIME type na frente, como em data:image/png;base64,iVBORw0KGgo…. Os decodificadores aceitam as duas formas, e também strings coladas junto com o CSS ou o HTML em volta. Se a string não for uma imagem, o Base64 para arquivo identifica outros formatos, e as ferramentas de arquivo cobrem PDFs, áudio, vídeo e documentos.
Perguntas frequentes
Como saber qual formato de imagem uma string Base64 contém?
Olhe os primeiros caracteres: iVBORw0KGgo é PNG, /9j/ é JPEG, R0lGOD é GIF, UklGR é um contêiner RIFF como o WebP, e PHN2Zy ou PD94bWwg geralmente é SVG. O Base64 para imagem detecta o tipo para você.
Dá para reduzir uma imagem antes de codificar?
Dá. Os conversores de PNG, JPG, WebP, GIF, BMP e AVIF, e o codificador geral de imagens, redimensionam para uma largura máxima, recodificam em PNG, JPEG ou WebP com controle de qualidade e removem os metadados EXIF, tudo no navegador.
Ícones pequenos devem ser embutidos em Base64?
Para alguns ícones pequenos, embutir economiza requisições. Imagens maiores ficam melhores como arquivos: o Base64 acrescenta um terço ao tamanho e os dados não podem ficar em cache separados da página. Desempenho de data URIs traz os números.