Convert PNG to Base64 online or in C#

Encode Images online

About URI Scheme

Data URI is a method of embedding images and other files in web pages as a string of text based on Base64 encoding. Data URI scheme allows you to include any binary data in HTML, CSS, JSON, or SVG documents. For example, you can embed images in a web page as if they were loaded from an external resource, but instead of specifying the URL of the file, you insert the Base64 encoded contents of the image. The data URI scheme was defined in RFC 2397, and as of 2022, it is fully supported by most major browsers. The main advantage of data URI use is a speed-up of page loading because the browser does not need to make an additional web request to retrieve the file since the image is already embedded in the HTML document.

The syntax of data URI is the following: data:[<mime type>][;charset=<charset>][;base64],<encoded data>.

Because the size of Base64-encoded data increases by 33%, it is recommended to use data URI only for small images. Large Base64 images produce a lot of code in the HTML, which results in a loss of performance benefits. If you need to convert PNG to Base64 and use encoded string to embed into a text file, please learn all pros and cons first.

How to convert PNG to Base64 in C#

In order to convert PNG to Base64 string, we use Aspose.SVG for .NET API, which is a feature-rich, powerful, easy-to-use document manipulation API for the C# platform. We consider the example of PNG to Base64 encoding and embedding Base64 string as data URI into an SVG document. These operations can be done with a few lines of code:

    // 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 PNG 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");

Steps to Convert PNG to Base64 in C#

1. Open PNG image to convert. Use the ReadAllBytes(path) method to open PNG and read the contents of the file into a byte array.
2. Initialize a new instance of the SVGDocument class.
3. Use the CreateElementNS(namespaceURI, qualifiedName) method of the SVGDocument class to create an image instance. The namespaceURI sets the reference to W3C SVG specification. The qualifiedName must contain the string tag name of the image element.
4. Convert PNG to Base64. Call The ToBase64String(bytes) method to convert an array of 8-bit integers to its equivalent string representation encoded in base64 digits.
5. Add the image element into the SVG document using AppendChild(node) method.
6. Call the Save(path) method to save the SVG document.

Pros and Cons of Data URI

The data URI gives us a wise way to embed images on a web page. URI schemes can be used in many ways. But in any case, there are pros and cons.

Pros:

• Speeding ​​up page loading. The browser doesn’t need to make an additional web request to retrieve the file because the image is already embedded in the HTML document.
• Performance improvement. The browser requires less CPU time.
• Web pages become independent of external files, making them easy to share even offline.

Cons:

• The size of Base64 encoded data is 1/3 larger than the binary image.
• The encoded images are not cached by the browser and will be downloaded each time such a page is visited.
• Encoded images are difficult to edit because the Base64 string needs to be decoded first.
• A Base64 image will never be indexed by Google because it doesn’t appear in image search results.
  
  

Online Base64 Encoders

Aspose.SVG offers free online applications for encodind and decoding binary data:

• Base64 Encoders are a set of tools that allow you to encode binary data in various output formats: Plain Base64, JSON, XML, URI, or CSS.
• Image Base64 Decoder converts a data URI containing a Base64 string to an image by pasting a URI string in the input control.

Our browser-based applications work from all platforms, including Windows, Linux, Mac OS, Android and iOS. No registration, plugin or software installation required for you. Start using our online Base64 encoding/decoding tools safely, secure, and easy way!

Base64 Encoding Usage Examples

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

<body>
    <div>
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..." alt="Red circle">
    </div>
</body>

.class {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...');
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/png">iVBORw0KGgoAAAANSUhEUgAAACAAAAAg...</image>
</root>

{
  "image": {
    "mime": "image/png",
    "data": "iVBORw0KGgoAAAANSUhEUgAAACAAAAAg..."
  }
}

FAQ

Get Started with Aspose.SVG for .NET API