Codificar imagem para Base64 online ou em C#

Converter imagem em string codificada em Base64. JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP e outros formatos de imagem são suportados.

Codificação Base64

Base64 é um grupo de esquemas de codificação semelhantes para converter dados binários em um formato de texto ASCII. Base64 é geralmente usado para transferir dados pela Internet. O resultado da conversão de uma imagem para Base64 é apenas um conjunto de letras latinas, números e dois caracteres - “+” e “/”. Qualquer navegador sabe o que fazer com eles. Em outras palavras, Base64 é um tipo de codificação de binário para texto. A string codificada em Base64 é usada em vários formatos de saída: Base64 simples, JSON, XML, URI de dados ou CSS.

Base64 é especialmente comum na Web, onde seu uso inclui a capacidade de incorporar arquivos de imagem ou outros recursos binários em recursos de texto, como arquivos HTML e CSS. Incluir os dados da imagem no arquivo HTML significa que o navegador não precisa fazer uma solicitação adicional da Web para recuperar o arquivo porque a imagem já está incorporada no documento HTML. Recomenda-se usar a codificação Base64 apenas para imagens pequenas. Imagens Base64 grandes resultam em muito código em HTML, o que resulta em perda de benefícios de desempenho. Também deve ser observado que uma imagem Base64 nunca será indexada pelo Google porque não aparece nas pesquisas de imagens.

Converter imagem para Base64 online

Codifique imagens com a API Aspose.SVG for .NET em tempo real! Carregue uma imagem do sistema de arquivos local e você obterá imediatamente o resultado como um URI de dados, fonte de imagem Base64 e fonte de fundo CSS Base64. JPG, JPEG, SVG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP e outros formatos de imagem são suportados.

Converter imagem para Base64 em C#

Este artigo considera como codificar um arquivo de imagem para uma string Base64 usando os recursos da API Aspose.SVG .NET. O exemplo C# a seguir demonstra como converter uma imagem PNG em uma string Base64 e incorporá-la em um arquivo SVG. O método ReadAllBytes(string) é usado para abrir uma imagem (arquivo binário) e ler o conteúdo do arquivo em uma matriz de bytes. O método ToBase64String(bytes) converte uma matriz de inteiros de 8 bits em sua representação de string equivalente codificada em 64 dígitos de base. O método AppendChild() adiciona a imagem codificada em Base64 ao documento SVG.

Código C# para converter imagem PNG em Base64

    // Open a binary file - PNG image
    var bytes = File.ReadAllBytes(@"image.png");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert image to base64
    img.Href.BaseVal = "data:image/png;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");

O fragmento do arquivo image-base64.svg resultante é mostrado abaixo. A string Base64 foi cortada para não sobrecarregar o exemplo de código SVG. O formato para incorporar a imagem Base64 como dados URI é o seguinte, para ser específico:

data:[<mime type>][;charset=<charset>][;base64],<dados codificados>

Código SVG para incorporar imagem Base64

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border"/>
</svg>

Incorporar uma imagem Base64 em HTML


Por que você precisaria converter Image para Base64? As imagens codificadas em Base64 podem ser incorporadas em HTML usando a tag <img>. Basta colar os dados da imagem diretamente no arquivo HTML usando o URI de dados. A codificação Base64 e o uso do esquema URI de dados reduzem o número de solicitações HTTP que um navegador precisa para renderizar uma página da web. Este trecho de código demonstra como você pode incorporar imagens Base64 em HTML.

Código HTML para incorporar a imagem Base64 como URI de dados

<body>
    <div>
        <img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg..." alt="Red border">
    </div>
</body>

O URI de dados consiste em duas partes separadas por uma vírgula. A primeira parte especifica uma imagem codificada em Base64 e a segunda parte especifica uma string de imagem codificada em Base64:

  1. data:image/jpeg;base64, é o cabeçalho do esquema URI de dados.
  2. iVBORw0KGgoAAAANSUhEUg... são os dados Base64 codificados.

Exemplo de incorporação de uma imagem Base64 como código de plano de fundo CSS


Mais uma maneira de reduzir o número de solicitações HTTP para imagens - é o uso da propriedade CSS background-image. A propriedade background-image define imagens como fundo de um elemento. Cada imagem para a propriedade background-image pode ser especificada como um URL ou como um URI de dados de imagem. A diferença é que no primeiro caso o navegador envia uma requisição HTTP para obter a imagem externa, enquanto no segundo caso a imagem Base64 é embutida diretamente no documento e não aponta outras fontes. Portanto, o navegador não precisa carregar solicitações HTTP para entregar a saída.

Código CSS para incorporar a imagem Base64 como URI de dados

body {
    background-image: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUg...');
}

Codificadores Online Base64

Codificadores Base64 on-line convertem o conteúdo de documentos SVG ou arquivos de imagem em sua representação de string equivalente codificada com dígitos base 64. Eles também fornecem exemplos para URI de dados, JSON, XML e outros. As ferramentas de codificação ajudam a evitar vários problemas de codificação de dados que tornam o conteúdo do site ou as mensagens de e-mail ilegíveis. Os codificadores Base64 são seguros, fáceis de usar e totalmente gratuitos. Eles funcionam em qualquer navegador e em qualquer sistema operacional. Converta imagens para Base64 gratuitamente agora mesmo!

Instalando a biblioteca Aspose.SVG para .NET

Aspose.SVG for .NET é uma biblioteca flexível de plataforma cruzada projetada para fornecer uma ampla variedade de recursos para processamento e renderização de documentos SVG. Ele se integra perfeitamente aos seus aplicativos .NET para trabalhar com arquivos SVG sem instalar nenhum software de terceiros. Nossa API .NET SVG pode ser usada com qualquer linguagem .NET, como C#, VB.NET, ASP.NET, etc. essencial. Isso inclui Windows, Linux e macOS.

Instalando Aspose.SVG para .NET através do NuGet :

  1. Usando o Console do Gerenciador de Pacotes.
  2. Usando a GUI do Gerenciador de Pacotes NuGet.

Para obter mais detalhes sobre a instalação da biblioteca C#, consulte Documentação do Aspose.SVG.

Outros Codificadores suportados

Você pode codificar imagem para Base64 - os formatos JPG, PNG, BMP, GIF, TIFF, ICO e SVG são suportados: