Encode Image to Base64 online or in C#

Convert Image to Base64 encoded string. JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP, and other image formats are supported.

Download from NuGet
 

Aspose.SVG for .NET Aspose.SVG for .NET

  Free Trial   Pricing Buy

Base64 Encoding

Base64 is a group of similar encoding schemes to convert binary data into an ASCII text format. Base64 is generally used to transfer data over the Internet. The result of converting an image to Base64 is just a set of Latin letters, numbers and two characters – “+” and “/”. Any browser knows what to do with them. In other words, Base64 is a kind of binary-to-text encoding. The Base64 encoded string is used in various output formats: plain Base64, JSON, XML, data URI, or CSS.

Base64 is especially common on the Web, where its use includes the ability to embed image files or other binary resources within text resources such as HTML and CSS files. Including the image data in the HTML file means the browser does not need to make an additional web request to retrieve the file because the image is already embedded in the HTML document. It is recommended to use Base64 encoding only for small images. Large Base64 images result in a lot of code in HTML, which results in a loss of performance benefits. It should also be noted that a Base64 image will never be indexed by Google because it doesn’t show up in image searches.

Convert Image to Base64 online

Encode images with Aspose.SVG for .NET API in real-time! Please load an image from the local file system and you will immediately get the result as a data URI, Base64 Image Source, and Base64 CSS Background Source. SVG, JPG, JPEG, PJP, PJPEG, PNG, BMP, XBM, GIF, TIFF, ICO, IFIF, WEBP and other image formats are supported.

Convert Image to Base64 in C#

This article considers how to encode an image file to a Base64 string using Aspose.SVG .NET API features. The following C# example demonstrates how to convert a PNG image to a Base64 string and embed it into an SVG file. The ReadAllBytes(string) method is used to open an image (binary file) and read the contents of the file into a byte array. The ToBase64String(bytes) method converts an array of 8-bit integers to its equivalent string representation encoded in base 64 digits. The AppendChild() method then adds the Base64 encoded image to the SVG document.

C# code to convert PNG image to 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");

The fragment of the resulting image-base64.svg file is shown below. The Base64 string was cut so as not to clutter up the SVG code example. The format to embed Base64 image as URI data is the following, to be specific:

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

SVG code to embed Base64 Image

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

Embed a Base64 Image in HTML


Why would you need to convert Image to Base64? Base64 encoded images can be embedded in HTML using the <img> tag. Just paste the image data directly into the HTML file using the data URI. Base64 encoding and data URI scheme usage reduce the number of HTTP requests a browser needs to render a web page. This code snippet demonstrates how you can embed Base64 images in HTML.

HTML code to embed Base64 Image as data URI

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

The data URI consists of two parts separated by a comma. The first part specifies a Base64 encoded image, and the second part specifies a Base64 encoded image string:

  1. data:image/jpeg;base64, is the data URI scheme header.
  2. iVBORw0KGgoAAAANSUhEUg... is the encoded Base64 data.

Example of embedded a Base64 image as CSS background code


One more way to reduce the number of HTTP requests for images – is the CSS background-image property usage. The background-image property defines images as the background of an element. Each image for the background-image property can be specified as a URL or as an image data URI. The difference is that in the first case the browser sends an HTTP request to get the external image, while in the second case the Base64 image is directly embedded in the document and does not point out other sources. Therefore, the browser doesn’t need to load HTTP requests to deliver the output.

CSS code to embed Base64 Image as data URI

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

Online Base64 Encoders

Online Base64 Encoders convert the content of SVG documents or image files to its equivalent string representation that is encoded with base-64 digits. They also provide examples for for data URI, JSON, XML, and others. Encoding tools help you avoid various data encoding issues that make website content or email messages unreadable. Base64 Encoders are secure, easy to use and completely free. They work in any browser and on any operating system. Convert Image to Base64 for free just now!

Installing Aspose.SVG for .NET library

Aspose.SVG for .NET is a cross-platform flexible library that is designed to provide a wide range of features for processing and rendering SVG documents. It seamlessly integrates into your .NET Apps to work with SVG files without installing any 3rd party software. Our SVG .NET API can be used with any .NET language, such as C#, VB.NET, ASP.NET, etc. It works equally well on any OS that can install Mono (.NET 4.0 Framework support) or use .NET core. This includes Windows, Linux, and macOS.

Installing Aspose.SVG for .NET through NuGet :

  1. Using the Package Manager Console.
  2. Using the NuGet Package Manager GUI.

For more details about C# library installation, please refer to Aspose.SVG Documentation.

Other Supported Encoders

You can encode Image to Base64 – JPG, PNG, BMP, GIF, TIFF, ICO, and SVG formats are supported: