Encode Image to Base64 in Python
Convert Image to Base64 encoded string. SVG, JPG, JPEG, PNG, BMP, GIF, TIFF, ICO, IFIF, WEBP, and other image formats are supported.
Base64 Encoding
Base64 is an encoding scheme that converts binary data into ASCII text, often used for transferring data over the Internet. When an image is converted to Base64, the result is a string of Latin letters, numbers, and two characters – “+” and “/”. Browsers can interpret this encoded data without issue. In other words, Base64 is a binary-to-text encoding that can be embedded in various formats such as JSON, XML, data URIs, or CSS.
Base64 is widely used to embed images or other binary resources directly into HTML or CSS files. This eliminates the need for additional web requests since the image is already included in the HTML document. However, Base64 is best suited for small images; large Base64-encoded images can bloat the HTML, leading to slower performance. It should also be noted that Google will never index a Base64 image because it doesn’t show up in image searches.
Convert Image to Base64 online
Encode images with Aspose.SVG in real-time! Please load an image from your 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 Python
This article considers how to encode an image file to a Base64 string using Aspose.SVG for Python via .NET API. The following Python example demonstrates how to convert a SVG image to a Base64 string and embed it into an SVG file.
Python code to convert SVG image to Base64
import base64
from aspose.svg import SVGDocument
document_path = "image.svg"
# Open an SVG image
with open(document_path, "rb") as file:
bytes_data = file.read()
# Initialize an SVGDocument object
document = SVGDocument()
# Create an image element
img_element = document.create_element_ns("http://www.w3.org/2000/svg", "image")
# Convert SVG image to Base64 and set the href attribute
encoded_image = f"data:image/svg+xml;charset=utf-8;base64,{base64.b64encode(bytes_data).decode('utf-8')}"
img_element.set_attribute("href", encoded_image)
# Add the image element to the SVG document
document.document_element.append_child(img_element)
# 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/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..." alt="Alt text for the image"/>
</svg>
Embed a Base64 Image in HTML
Why convert an image to Base64? Base64 encoded images can be embedded directly into HTML using the <img> tag by inserting the image data as a data URI. This method reduces the number of HTTP requests a browser needs to load a webpage, improving performance. The following code snippet shows how to embed Base64 images in HTML.
HTML code to embed Base64 Image as data URI
<body>
<div>
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..." alt="Alt text for the image">
</div>
</body>
The data URI consists of two parts separated by a comma. The first part specifies the data URI scheme header for the Base64-encoded image, and the second part defines the Base64-encoded image string itself:
data:image/svg+xml;base64, is the data URI scheme header.PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ...is the encoded Base64 data.
Embed a Base64 Image in CSS Code
Another way to reduce the number of HTTP requests for images is to use the CSS background-image property. This property sets images as the background of an element, and you can specify each image either as a URL or as an image data URI. With a URL, the browser sends an HTTP request to get the external image, but with a Base64 image embedded as a data URI, the image is directly included in the document. This means that the browser does not have to make any additional HTTP requests, which speeds up page load times.
CSS code to embed Base64 Image as data URI
body {
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ...");
}
Embed a Base64 Image in XML
Encoding images to Base64 for embedding in XML simplifies integration and enhances portability by allowing images to be included directly within this format, reducing the need for external file references.
XML code with embedded Base64 SVG image
<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/svg+xml">PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ...</image>
</root>
Embed a Base64 Image in JSON
Converting an image to Base64 and saving it as JSON is useful for embedding into web pages or applications without extra HTTP requests.
JSON code with embedded Base64 image
{
"image": {
"mime": "image/png",
"data": "PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ..."
}
}
Online Base64 Encoders
Online Base64 Encoders convert the content of SVG documents or image files to its equivalent string representation that is encoded with ASCII characters. 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!
Get Started with Python API
If you want to develop scalable vector graphics and their applications, install our flexible, high-speed Aspose.SVG for Python via .NET API. pip is the easiest way to download and install Aspose.SVG for Python via .NET API. To do this, run the following command:
pip install aspose-svg-net
For more details about Python library installation and system requirements, 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: