Gerador de Data URI

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

Click to upload file or drag and drop file here

Maximum file size: 10MB Supported formats: image/png, image/jpeg, image/gif, image/webp, image/avif, image/bmp, image/svg+xml, image/x-icon, image/tiff, audio/mpeg, audio/wav, audio/ogg, audio/flac, video/mp4, video/webm, font/woff, font/woff2, font/ttf, font/otf, application/pdf, text/css, text/javascript, text/plain, text/html, application/json, application/xml, */*

Fatos principais

Categoria
Desenvolvimento e Web
Tipos de entrada
file, select, text
Tipo de saída
text
Cobertura de amostras
4
API disponível
Yes

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

  • •Selecione ou arraste o arquivo que deseja converter, respeitando o limite de tamanho de até 10 MB.
  • •Escolha o tipo de codificação desejado, como Base64, URL-codificado ou texto bruto.
  • •Defina o formato de saída apropriado para o seu projeto, seja Data URI puro, tag HTML, CSS ou Markdown.
  • •Copie 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'.
Configuração de exemplo
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>'.
Configuração de exemplo
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.

Testar com amostras

json, xml, html
Exemplos PDF
Exemplos PDF gerados por ferramentas de 2026-02-01 a 2026-02-10
preferred input family image,pdf,text
image, pdf
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
preferred input family audio,video,text
audio, video
Exemplos de Códigos QR
Imagens de código QR de exemplo para testar ferramentas de leitura e geração de código QR
preferred input family image,text,json
image, text
Exemplos de XML
Exemplos de formato XML (eXtensible Markup Language) de estruturas simples a complexas
preferred input family image,text,xml
image, text

Hubs relacionados

Ferramentas de codificacao e conversao de audio
Compare conversao de formatos de audio, ajustes de bitrate, conversao de taxa de amostragem, troca de codec e exportacao em um unico hub.
Ferramentas de conversao de formatos de imagem e exportacao animada
Compare conversores de imagem para JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 e saidas voltadas para animacao em um unico hub.
Ferramentas de intercambio JSON e traducao de formatos
Compare ferramentas de conversao JSON para CSV, YAML, TOML, GraphQL, XML, Markdown, Excel, BSON, EDN e outros formatos estruturados em um unico hub.
Ferramentas de conversão de caixa, codificação e normalização de texto
Compare conversão de caixa de texto, conversão de largura de caracteres, conversão de codificação, tratamento de quoted-printable e normalização de texto em um único hub.

FAQ

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.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/data-uri-generator

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
file file (Upload necessário) Sim -
encoding select Não -
outputFormat select Não -
customMime text Não -

Os parâmetros de tipo arquivo precisam ser carregados primeiro via POST /upload/data-uri-generator para obter filePath, depois filePath deve ser passado ao campo de arquivo correspondente.

Formato de resposta

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Texto: Texto

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-data-uri-generator": {
      "name": "data-uri-generator",
      "description": "Converte arquivos em Data URIs (Base64 ou porcentagem-codificada) para incorporar imagens, fontes e recursos diretamente em HTML, CSS ou Markdown",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=data-uri-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Suporta links de arquivos URL ou codificação Base64 para parâmetros de arquivo.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]