Converta imagens para strings Base64
Technical Details
Tecnologia de Processamento de Imagem
Processamento de imagem baseado em navegador usa Canvas API e tecnologias web modernas. Suporta vários formatos de imagem, mantém qualidade, fornece visualização em tempo real. Processamento do lado do cliente garante privacidade.
Pipeline de Processamento
Lê dados de imagem, aplica transformações ou efeitos, otimiza qualidade de saída, processa conversão de formato. Suporta processamento em lote, fornece feedback de progresso para operações grandes.
Processamento Web
Processamento do lado do cliente garante privacidade (imagens não saem do navegador), fornece resultados instantâneoâneoâneoâneoâneoâneos, suporta arrastar e soltar, funciona offline, processa arquivos grandes eficientemente usando WebWorkers.
Frequently Asked Questions
- O que é codificação Base64 e por que usá-la?
- A codificação Base64 converte dados binários de imagem em texto ASCII usando 64 caracteres (A-Z, a-z, 0-9, +, /). Isso permite incorporar imagens diretamente em HTML, CSS ou JSON sem arquivos de imagem separados. Os benefícios incluem: eliminar solicitações HTTP, permitir uso offline, simplificar o gerenciamento de assets e permitir imagens inline em modelos de e-mail.
- Quais formatos de imagem podem ser convertidos para Base64?
- A ferramenta suporta formatos JPG, PNG, GIF, WebP, SVG, BMP e ICO. Cada formato é detectado automaticamente e recebe o tipo MIME correto (por exemplo, image/png, image/jpeg) na URL de dados Base64. Imagens SVG são convertidas em URLs de dados para incorporação em HTML.
- Quanto maior o Base64 torna o arquivo?
- A codificação Base64 aumenta o tamanho do arquivo em aproximadamente 33% em comparação com o formato binário original. Por exemplo, uma imagem de 100KB se torna cerca de 133KB quando codificada em Base64. Isso ocorre porque Base64 usa 4 caracteres para representar 3 bytes de dados binários. A ferramenta exibe estatísticas de tamanho para ajudá-lo a entender o impacto.
- Como uso a string Base64 no meu código?
- Use a string Base64 como uma URL de dados: Em HTML: <img src="data:image/png;base64,YOUR_BASE64_STRING">, Em CSS: background-image: url(data:image/png;base64,YOUR_BASE64_STRING), Em JavaScript: const img = novo Image(); img.src = "data:image/png;base64," + base64String. A ferramenta fornece o formato de URL de dados completo pronto para uso.
- Quando devo usar Base64 vs arquivos de imagem normais?
- Use Base64 para: imagens pequenas (< 10KB) como ícones e logotipos, fundos CSS inline, modelos de e-mail, aplicativos offline e aplicativos HTML de arquivo único com todos os assets incorporados. Evite Base64 para: imagens grandes (aumenta significativamente o tamanho da página), imagens que mudam frequentemente (problemas de cache), e imagens que precisam ser atualizadas regularmente (requer alterações no código).
Related Documentation
- MDN - Canvas API - Manipulação de imagem com Canvas HTML5
- MDN - File API - Trabalhando com arquivos em aplicações web
- Guia Processamento Imagem - Técnicas processamento imagem web
- Fabric.js - Poderosa biblioteca Canvas HTML5
- Wikipedia - Fundamentos processamento imagem digital