Elysia Tools

Explore ferramentas, exemplos, explicações visuais e guias temáticos em um espaço claro.

Categorias populares

Temas

Idioma
ZHESPTRUFRDEEN

Elysia Tools

Navegação

Development

Gerador de Data URI

· Última atualização：2026-06-18

Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Continue com ferramentas e temas relacionados

Escrito pela equipe Elysia Tools
Imagem355
Arquivos143
HTML/CSS86
CSS48
Markdown40
URL32
Base6416

Guia de uso da ferramenta

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Categoria
Development
Tipos de entrada
file, select, text
Tipo de saída
text
Cobertura de exemplos
4
API pronta
Sim

Visão geral

O Gerador de Data URI permite converter arquivos locais, como imagens, fontes e documentos, em strings de dados formatadas em Base64 ou codificação de URL. Com essa ferramenta, você pode incorporar recursos diretamente em seus arquivos HTML, CSS ou Markdown, eliminando a necessidade de requisições HTTP adicionais e simplificando a distribuição de páginas web.

Quando usar

  • Ao criar e-mails em HTML que precisam exibir imagens de forma confiável sem depender de servidores externos de hospedagem.
  • Ao otimizar o carregamento de páginas web embutindo pequenos ícones, logotipos ou fontes diretamente nas folhas de estilo CSS.
  • Ao criar documentos Markdown autônomos que requerem imagens incorporadas sem links quebrados.

Como funciona

  1. 1Selecione ou arraste o arquivo que deseja converter, respeitando o limite de tamanho de até 10 MB.
  2. 2Escolha o tipo de codificação desejado, como Base64, URL-codificado ou texto bruto.
  3. 3Defina o formato de saída apropriado para o seu projeto, seja Data URI puro, tag HTML, CSS ou Markdown.
  4. 4Copie o código gerado instantaneamente para colar diretamente no seu código-fonte.

Casos de uso

  • Incorporação de fontes personalizadas (WOFF/WOFF2) diretamente em arquivos CSS para evitar atrasos na renderização de texto.
  • Inclusão de logotipos em formato SVG ou PNG em assinaturas de e-mail HTML para garantir que apareçam offline.
  • Criação de protótipos rápidos de páginas web contendo pequenos ícones gráficos sem gerenciar múltiplos arquivos de imagem.

Exemplos

1. Incorporar Ícone SVG em CSS

Desenvolvedor Front-end

Contexto

Um desenvolvedor precisa adicionar um ícone de menu SVG a um arquivo CSS sem fazer uma nova requisição HTTP.

Problema

Evitar requisições adicionais para pequenos ícones de interface.

Como usar

Carregue o arquivo menu-icon.svg, selecione a codificação 'URL-codificado' e defina o formato de saída como 'CSS background'.

Arquivo: menu-icon.svg, Codificação: url, Formato de saída: css

Resultado

O gerador fornece o código CSS pronto: background-image: url("data:image/svg+xml,%3Csvg..."); para colar na folha de estilo.

2. Inserir Imagem em Assinatura de E-mail

Designer de E-mail Marketing

Contexto

Uma designer quer garantir que o logotipo da empresa apareça na assinatura de e-mail dos funcionários sem depender de servidores externos.

Problema

Imagens externas bloqueadas ou quebradas em clientes de e-mail.

Como usar

Carregue o arquivo logo.png, selecione a codificação 'Base64' e defina o formato de saída como 'Tag HTML <img>'.

Perguntas frequentes

O que é um Data URI?

É um esquema de URI que permite incluir dados de arquivos diretamente em documentos como HTML e CSS, codificados geralmente em Base64.

Quais formatos de saída posso gerar?

Você pode gerar a string Data URI pura, uma tag de imagem HTML, uma regra de fundo CSS ou um link de imagem em Markdown.

Existe um limite de tamanho para os arquivos?

Sim, o limite máximo para conversão de arquivos nesta ferramenta é de 10 MB.

Posso alterar o tipo MIME detectado automaticamente?

Sim, você pode usar o campo de tipo MIME personalizado para substituir a detecção automática pelo formato que desejar.

Quando devo usar a codificação URL em vez de Base64?

A codificação URL é ideal para arquivos SVG baseados em texto, pois gera códigos menores e mais legíveis que o Base64.

Início
Ferramentas3197
Exemplos593
Visualizações461
Visualizadores de arquivos103
Temas229
Etiquetas333
Imagens, áudio e vídeo655

Ferramentas de processamento, conversão e otimização de imagens, áudio e vídeo

Matemática, datas e finanças644

Calculadoras, ferramentas numéricas, lógica de datas, estatística e finanças

Design e cor296

Ferramentas de cor, layout, gráficos, estilo visual e apoio ao design

Texto e escrita209

Ferramentas de escrita, limpeza, formatação, extração e análise de texto

Desenvolvimento e Web193

Utilitários para desenvolvedores, rede, depuração web e automação

Conversão e codificação175

Ferramentas de conversão de formatos, arquivos, unidades, arquivos compactados e codificação

Estruturar uma captura de interface, revisar e entregar ao desenvolvimento
Esboço de piano, revisão MIDI e entrega de uma demonstração de áudio
Revisão de texturas retrô e entrega de recursos
Revisão e entrega de guias de procedimento com capturas
Revisão visual de alterações responsivas e entrega de evidências

© 2026 Elysia Tools. Todos os direitos reservados.

DocumentaçãoPreçosSobreTermos de serviçoPolítica de privacidadeCookiesContato
TypeScript

Exemplos de Processamento de Imagens Web TypeScript

Exemplos de processamento de imagens Web TypeScript incluindo leitura/salvamento, redimensionamento e conversão de formato

Rust

Exemplos de Processamento de Imagem Web Rust

Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato

Documentos

Exemplos PDF

Exemplos PDF gerados por ferramentas de 2026-02-01 a 2026-02-10

Tecnologias Web

Exemplos de Comunicação em Tempo Real WebRTC

Exemplos completos WebRTC para comunicação áudio/vídeo P2P, canais de dados, compartilhamento de tela e servidor de sinalização

Media

Sequência de Imagens para Vídeo

Converter imagens enviadas ou um ZIP de quadros em vídeo, com ordenação natural por nome

Media

Visualizador musical de partículas de imagem

Transforme uma imagem numa nuvem de pontos reativa ao áudio. Pré-visualize localmente e exporte MP4 a 30 fps, capa PNG e ajustes JSON.

Document Tools

Folha de Contato PDF

Gera folha de contato com miniaturas, nomes e EXIF

Document Tools

Folha de Storyboard PDF

Gera folhas de storyboard com miniatura e area de descricao

Arquivo: logo.png, Codificação: base64, Formato de saída: html

Resultado

Gera uma tag HTML <img src="data:image/png;base64,iVBOR..."> pronta para ser inserida no código da assinatura.