Base64 Image Decoder and Viewer | Convert Base64 to Images
Decode and preview base64-encoded image strings instantly. Supports JPEG, PNG, GIF and other common formats with error handling for invalid inputs.
Base64 Image Decoder and Viewer
Paste a base64-encoded image string and decode it to view the image.
Image Preview
No image to display. Paste a base64 string to see it decoded automatically.
Supports JPEG, PNG, GIF and other common image formats.
Instructions
1. Paste a base64-encoded image string in the text area above.
2. The image will be decoded automatically as you type, or click the 'Decode Image' button.
3. The decoded image will appear in the preview area below.
Note: The string should start with 'data:image/' for best results, but the tool will attempt to decode strings without this prefix as well.
Documentation
Base64 Image Decoder and Viewer
Introduction
Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It's commonly used to embed image data directly within HTML, CSS, JavaScript, JSON, and other text-based formats where binary data cannot be directly included. This tool allows you to decode base64-encoded image strings and view the resulting images directly in your browser.
Base64 encoding increases the data size by approximately 33% compared to the original binary, but it enables images to be included directly in text-based documents without requiring separate file downloads. This can be particularly useful for small images like icons, logos, or simple graphics where the convenience of embedding outweighs the size increase.
Our Base64 Image Decoder tool provides a simple interface where you can paste a base64-encoded image string and instantly see the decoded image. It supports all common image formats including JPEG, PNG, GIF, WebP, and SVG, and can handle both data URL format (with the data:image/... prefix) and raw base64 strings.
Technical Details
Base64 Encoding Format
Base64 encoding converts binary data into a set of 64 ASCII characters (A-Z, a-z, 0-9, +, and /), with = used for padding. For images on the web, base64 data is typically formatted as a data URL with the following structure:
1data:[<media type>][;base64],<data>
2For example, a base64-encoded PNG image might look like:
1data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
2The components of this format are:
data:- The URL schemeimage/png- The MIME type of the data;base64- The encoding method,- A delimiter between the header and the data- The actual base64-encoded data
Decoding Process
When decoding a base64 image string, the following steps occur:
- The string is parsed to identify if it contains a data URL prefix
- If a prefix exists, the MIME type is extracted to determine the image format
- The base64 data portion is isolated and decoded into binary data
- The binary data is converted into a Blob or an object URL that can be displayed as an image
If the input doesn't include a data URL prefix, the decoder attempts to treat it as raw base64 data and infers the image type from the decoded binary header or defaults to PNG.
Supported Image Formats
This tool supports all common web image formats:
| Format | MIME Type | Typical Use Cases |
|---|---|---|
| JPEG | image/jpeg | Photos, complex images with many colors |
| PNG | image/png | Images requiring transparency, screenshots, graphics |
| GIF | image/gif | Simple animations, limited color images |
| WebP | image/webp | Modern format with better compression than JPEG/PNG |
| SVG | image/svg+xml | Vector graphics, scalable icons and illustrations |
Use Cases
Base64-encoded images have several practical applications in web development and beyond:
-
Embedding images in HTML/CSS/JS: Reduces HTTP requests by including images directly in your code, which can improve page load times for small images.
-
Email templates: Ensures images display properly in email clients that block external images by default.
-
Single-file applications: Creates self-contained HTML applications where all resources are embedded within a single file.
-
API responses: Includes image data directly in JSON responses without requiring separate image endpoints.
-
Data URIs in CSS: Embeds small icons and background images directly in CSS files.
-
Canvas manipulations: Facilitates saving and transferring canvas image data.
-
Offline applications: Stores images as text strings in localStorage or IndexedDB.
Performance Considerations
While base64 encoding offers convenience, it comes with trade-offs:
- Increased file size: Base64 encoding increases data size by approximately 33%.
- No browser caching: Embedded images can't be cached separately like external image files.
- Parsing overhead: Browsers must decode the base64 string before rendering.
- Maintenance challenges: Embedded images are harder to update than referenced files.
For optimal performance, base64 encoding is generally recommended only for small images (under 10KB). Larger images are usually better served as separate files that can be properly cached and optimized.
Alternatives
Several alternatives to base64 encoding exist for different use cases:
-
SVG inline embedding: For vector graphics, inline SVG often provides better performance and flexibility than base64-encoded SVG.
-
WebP and modern image formats: These provide better compression than base64-encoded JPEG/PNG.
-
Image sprites: Combining multiple small images into a single file and using CSS positioning.
-
CDNs (Content Delivery Networks): For production sites, serving optimized images from a CDN is often more efficient.
-
Data compression: For transferring large amounts of binary data, specialized compression algorithms like gzip or Brotli are more efficient than base64.
Code Examples
Here are examples of working with base64-encoded images in various programming languages:
1// Convert an image to base64 in JavaScript (browser)
2function imageToBase64(imgElement) {
3 const canvas = document.createElement('canvas');
4 canvas.width = imgElement.width;
5 canvas.height = imgElement.height;
6
7 const ctx = canvas.getContext('2d');
8 ctx.drawImage(imgElement, 0, 0);
9
10 // Get as data URL (base64 string)
11 return canvas.toDataURL('image/png');
12}
13
14// Display a base64 image
15function displayBase64Image(base64String) {
16 const img = new Image();
17
18 // Handle strings without data URL prefix
19 if (!base64String.startsWith('data:')) {
20 base64String = `data:image/png;base64,${base64String}`;
21 }
22
23 img.src = base64String;
24 document.body.appendChild(img);
25}
261import base64
2from PIL import Image
3from io import BytesIO
4
5# Convert an image file to base64
6def image_to_base64(image_path):
7 with open(image_path, "rb") as image_file:
8 encoded_string = base64.b64encode(image_file.read())
9 return encoded_string.decode('utf-8')
10
11# Convert base64 to image and save
12def base64_to_image(base64_string, output_path):
13 # Remove data URL prefix if present
14 if ',' in base64_string:
15 base64_string = base64_string.split(',')[1]
16
17 image_data = base64.b64decode(base64_string)
18 image = Image.open(BytesIO(image_data))
19 image.save(output_path)
20
21# Example usage
22base64_str = image_to_base64("input.jpg")
23print(f"data:image/jpeg;base64,{base64_str[:30]}...") # Print start of string
24
25base64_to_image(base64_str, "output.jpg")
261<?php
2// Convert an image file to base64 in PHP
3function imageToBase64($path) {
4 $type = pathinfo($path, PATHINFO_EXTENSION);
5 $data = file_get_contents($path);
6 return 'data:image/' . $type . ';base64,' . base64_encode($data);
7}
8
9// Convert base64 to image and save
10function base64ToImage($base64String, $outputPath) {
11 // Extract the base64 encoded binary data
12 $imageData = explode(',', $base64String);
13 $imageData = isset($imageData[1]) ? $imageData[1] : $imageData[0];
14
15 // Decode and save
16 $data = base64_decode($imageData);
17 file_put_contents($outputPath, $data);
18}
19
20// Example usage
21$base64Image = imageToBase64('input.jpg');
22echo substr($base64Image, 0, 50) . "...\n"; // Print start of string
23
24base64ToImage($base64Image, 'output.jpg');
25?>
261import java.io.File;
2import java.io.FileOutputStream;
3import java.io.IOException;
4import java.nio.file.Files;
5import java.util.Base64;
6
7public class Base64ImageUtil {
8
9 // Convert an image file to base64
10 public static String imageToBase64(String imagePath) throws IOException {
11 File file = new File(imagePath);
12 byte[] fileContent = Files.readAllBytes(file.toPath());
13 String extension = imagePath.substring(imagePath.lastIndexOf(".") + 1);
14 String base64String = Base64.getEncoder().encodeToString(fileContent);
15
16 return "data:image/" + extension + ";base64," + base64String;
17 }
18
19 // Convert base64 to image and save
20 public static void base64ToImage(String base64String, String outputPath) throws IOException {
21 // Remove data URL prefix if present
22 if (base64String.contains(",")) {
23 base64String = base64String.split(",")[1];
24 }
25
26 byte[] decodedBytes = Base64.getDecoder().decode(base64String);
27
28 try (FileOutputStream fos = new FileOutputStream(outputPath)) {
29 fos.write(decodedBytes);
30 }
31 }
32
33 public static void main(String[] args) throws IOException {
34 String base64Image = imageToBase64("input.jpg");
35 System.out.println(base64Image.substring(0, 50) + "..."); // Print start of string
36
37 base64ToImage(base64Image, "output.jpg");
38 }
39}
401using System;
2using System.IO;
3using System.Text.RegularExpressions;
4
5class Base64ImageConverter
6{
7 // Convert an image file to base64
8 public static string ImageToBase64(string imagePath)
9 {
10 byte[] imageBytes = File.ReadAllBytes(imagePath);
11 string base64String = Convert.ToBase64String(imageBytes);
12
13 string extension = Path.GetExtension(imagePath).TrimStart('.').ToLower();
14 return $"data:image/{extension};base64,{base64String}";
15 }
16
17 // Convert base64 to image and save
18 public static void Base64ToImage(string base64String, string outputPath)
19 {
20 // Remove data URL prefix if present
21 if (base64String.Contains(","))
22 {
23 base64String = base64String.Split(',')[1];
24 }
25
26 byte[] imageBytes = Convert.FromBase64String(base64String);
27 File.WriteAllBytes(outputPath, imageBytes);
28 }
29
30 static void Main()
31 {
32 string base64Image = ImageToBase64("input.jpg");
33 Console.WriteLine(base64Image.Substring(0, 50) + "..."); // Print start of string
34
35 Base64ToImage(base64Image, "output.jpg");
36 }
37}
381require 'base64'
2
3# Convert an image file to base64
4def image_to_base64(image_path)
5 extension = File.extname(image_path).delete('.')
6 base64_data = Base64.strict_encode64(File.read(image_path))
7 "data:image/#{extension};base64,#{base64_data}"
8end
9
10# Convert base64 to image and save
11def base64_to_image(base64_string, output_path)
12 # Remove data URL prefix if present
13 if base64_string.include?(',')
14 base64_string = base64_string.split(',')[1]
15 end
16
17 File.open(output_path, 'wb') do |file|
18 file.write(Base64.decode64(base64_string))
19 end
20end
21
22# Example usage
23base64_image = image_to_base64('input.jpg')
24puts base64_image[0, 50] + '...' # Print start of string
25
26base64_to_image(base64_image, 'output.jpg')
271' Excel VBA function to encode a file to base64
2Function FileToBase64(filePath As String) As String
3 Dim fileNum As Integer
4 Dim fileData() As Byte
5 Dim objXML As Object
6 Dim objNode As Object
7
8 fileNum = FreeFile
9 Open filePath For Binary Access Read As fileNum
10 ReDim fileData(LOF(fileNum) - 1)
11 Get fileNum, , fileData
12 Close fileNum
13
14 Set objXML = CreateObject("MSXML2.DOMDocument")
15 Set objNode = objXML.createElement("b64")
16
17 objNode.DataType = "bin.base64"
18 objNode.nodeTypedValue = fileData
19
20 FileToBase64 = objNode.Text
21
22 Set objNode = Nothing
23 Set objXML = Nothing
24End Function
25
26' Usage in Excel:
27' =FileToBase64("C:\path\to\image.jpg")
28HTML Implementation
Here's how to embed a base64 image directly in HTML:
1<!-- Embedding a base64 image directly in HTML -->
2<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 encoded image">
3
4<!-- Using CSS with a base64 background image -->
5<style>
6.base64-bg {
7 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
8 width: 100px;
9 height: 100px;
10}
11</style>
12<div class="base64-bg"></div>
13History
Base64 encoding has its roots in the development of electronic mail systems in the 1970s. It was designed to solve the problem of transmitting binary data through systems that were designed to handle only ASCII text.
The encoding scheme was formalized in 1987 with the publication of RFC 989, which defined the Privacy Enhanced Mail (PEM) standard. This was later updated in RFC 1421 and other related standards. The term "base64" itself comes from the fact that the encoding uses 64 different ASCII characters to represent binary data.
In the context of web development, base64 encoding for images gained popularity with the advent of data URIs, which were first proposed in RFC 2397 in 1998. This allowed binary data to be included directly in HTML, CSS, and other web documents.
The use of base64-encoded images in web development became more widespread in the mid-2000s as developers sought ways to reduce HTTP requests and improve page load times. The technique was particularly embraced during the rise of mobile web development, where minimizing requests was crucial for performance on slower mobile connections.
Today, base64 encoding remains an important tool in web development, though its use has become more targeted as best practices have evolved. Modern approaches tend to use base64 encoding selectively for small, critical images while leveraging more efficient delivery methods like HTTP/2 for larger assets.
References
Feedback
Click the feedback toast to start giving feedback about this tool
Related Tools
Discover more tools that might be useful for your workflow