Tada File

Imagem para Data URI

Transforme uma imagem em um data URI completo, pronto para colar em um atributo src do HTML ou em um url() do CSS.

Imagem para Data URI converte um arquivo de imagem em um data URI: uma linha de texto que contém o tipo do arquivo e a imagem codificada em Base64. Você pode colar direto em um atributo src de uma tag img ou em um valor url() do CSS, e a imagem aparece sem um arquivo separado. O tipo MIME do prefixo vem do seu arquivo, e os bytes da imagem não são alterados.

Como usar: Imagem para Data URI

  1. 1

    Abra uma imagem

    Arraste, escolha ou cole qualquer arquivo de imagem, como um ícone, logo ou arte pequena.

  2. 2

    Receba o data URI

    O data URI completo, começando com data:image/, aparece com o comprimento e o tamanho aproximado.

  3. 3

    Copie

    Clique em Copiar data URI, ou use Copiar HTML ou Copiar CSS para um trecho pronto.

  4. 4

    Cole na sua página

    Use em qualquer lugar onde uma URL de imagem normal funciona, como uma tag img ou um fundo no CSS.

O que faz

Tipo MIME correto
O prefixo corresponde ao seu arquivo, por exemplo image/png, image/jpeg ou image/svg+xml.
Bytes originais
O arquivo é codificado como está, então a qualidade e o tamanho não mudam por nova compressão.
Trechos prontos para copiar
Receba uma tag img completa ou uma regra background-image com o data URI já dentro.
Privado
O data URI é criado no seu navegador, então a imagem não é enviada.

Perguntas

O que é um data URI?

Um data URI é um link que contém o próprio arquivo em vez de apontar para ele. Em imagens, ele começa com data:image/png;base64, ou um prefixo parecido, e os navegadores o exibem como uma URL de imagem normal.

Como usar um data URI no CSS?

Clique em Copiar CSS para receber uma regra background-image com o URI completo dentro de url(), e cole na sua folha de estilos.

Quando devo evitar data URIs?

Evite em imagens grandes e em imagens usadas em muitas páginas. O texto codificado é cerca de um terço maior que o arquivo, e o navegador não consegue guardá-lo em cache separadamente.

Imagens em data URI funcionam em e-mails?

O suporte varia. Muitos programas de e-mail, incluindo alguns serviços de webmail, não mostram imagens em data URI, então teste seu e-mail ou use uma imagem hospedada online.

Quais tipos de imagem são aceitos?

Qualquer imagem que seu navegador abra, como JPG, PNG, GIF, WebP, AVIF e SVG. As fotos HEIC do iPhone são convertidas para PNG antes, então o data URI delas usa image/png.