diff --git a/README.md b/README.md
index 29d8d57..0273187 100644
--- a/README.md
+++ b/README.md
@@ -34,6 +34,7 @@ Here is the list of all utilities:
- [HEX to RGB Converter](https://jam.dev/utilities/hex-to-rgb)
- [Convert .env to netlify.toml](https://jam.dev/utilities/env-to-netlify-toml)
- [Image to Base64 Converter](https://jam.dev/utilities/image-to-base64)
+- [Base64 to Image Converter](https://jam.dev/utilities/base64-to-image)
- [JSON to CSV](https://jam.dev/utilities/json-to-csv)
- [HAR file viewer](https://jam.dev/utilities/har-file-viewer)
- [JSON to YAML](https://jam.dev/utilities/json-to-yaml)
diff --git a/components/seo/Base64ToImageSEO.tsx b/components/seo/Base64ToImageSEO.tsx
new file mode 100644
index 0000000..1dd4fc3
--- /dev/null
+++ b/components/seo/Base64ToImageSEO.tsx
@@ -0,0 +1,122 @@
+import Link from "next/link";
+
+export default function Base64ToImageSEO() {
+ return (
+
+
+
Convert Base64 to Image
+
+ Jam's free Base64 to Image converter lets you instantly preview
+ Base64-encoded image data. Simply paste your Base64 string and see the
+ decoded image. This tool is perfect for developers working with
+ embedded images, debugging API responses, or verifying Base64-encoded
+ image data.
+
+
+
+
+
How to Use:
+
+
+ Paste your Base64 string: Enter the Base64-encoded
+ image data into the text field. You can paste either a raw Base64
+ string or a complete data URI (e.g., data:image/png;base64,...).
+
+
+ View the preview: The decoded image will automatically
+ appear below the input field.
+
+
+
+
+
+
Related Tools
+
+ Need to convert an image to Base64 instead? Use our{" "}
+
+ Image to Base64 Converter
+ {" "}
+ to encode images into Base64 format. For encoding and decoding text
+ strings, check out our{" "}
+
+ Base64 Encoder/Decoder
+
+ .
+
+
+
+
+
Base64 Image Decoding Use Cases
+
+
+ Debugging API responses: Quickly verify that
+ Base64-encoded images in API responses are correct.
+
+
+ Email template development: Preview embedded images in
+ email templates that use Base64 encoding.
+
+
+ Data URI validation: Verify that data URIs are
+ properly formatted and contain valid image data.
+
+
+ Database content inspection: View images stored as
+ Base64 strings in databases.
+
+
+
+
+
+
Understanding Base64 Image Encoding
+
+ Base64 encoding converts binary image data into ASCII text, making it
+ safe to transmit over text-based protocols like HTTP, email, and JSON.
+ This is commonly used for embedding small images directly in HTML,
+ CSS, or JavaScript without requiring separate HTTP requests.
+
+
+ A Base64-encoded image typically appears as a data URI in the format:
+
+ data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
+
+
+
+ This tool accepts both the full data URI format and raw Base64 strings
+ without the prefix.
+
+
+
+
+
FAQs
+
+
+ What image formats are supported? This tool supports
+ all common image formats including PNG, JPEG, GIF, WebP, and SVG
+ when properly Base64-encoded.
+
+
+ Do I need to include the data URI prefix? No, you can
+ paste either a raw Base64 string or a complete data URI. The tool
+ will handle both formats.
+
+
+ Is my data secure? Yes, all processing happens locally
+ in your browser. Your data is never sent to any server.
+
+
+ Why is my image not displaying? Make sure your Base64
+ string is valid and represents actual image data. The string should
+ only contain valid Base64 characters (A-Z, a-z, 0-9, +, /, =).
+
+
+
+
+ );
+}
diff --git a/components/seo/ImageToBase64SEO.tsx b/components/seo/ImageToBase64SEO.tsx
index 66b2e91..05a422e 100644
--- a/components/seo/ImageToBase64SEO.tsx
+++ b/components/seo/ImageToBase64SEO.tsx
@@ -1,3 +1,5 @@
+import Link from "next/link";
+
export default function ImageToBase64SEO() {
return (
+ Have a Base64 string and want to preview the image? Use our{" "}
+
+ Base64 to Image Converter
+ {" "}
+ to instantly decode and view Base64-encoded images.
+
+
+
How to Use:
diff --git a/components/utils/tools-list.ts b/components/utils/tools-list.ts
index 343bccb..aa8ef64 100644
--- a/components/utils/tools-list.ts
+++ b/components/utils/tools-list.ts
@@ -59,6 +59,12 @@ export const tools = [
"Instantly convert images to Base64 strings. Embed images directly in your code. Fast, free, and developer-friendly.",
link: "/utilities/image-to-base64",
},
+ {
+ title: "Base64 to Image Converter",
+ description:
+ "Convert Base64 strings to images instantly. Preview Base64-encoded image data in your browser. Fast, free, and developer-friendly.",
+ link: "/utilities/base64-to-image",
+ },
{
title: "JSON to CSV",
description:
diff --git a/pages/utilities/base64-to-image.tsx b/pages/utilities/base64-to-image.tsx
new file mode 100644
index 0000000..ecec294
--- /dev/null
+++ b/pages/utilities/base64-to-image.tsx
@@ -0,0 +1,166 @@
+import { useCallback, useState } from "react";
+import { Textarea } from "@/components/ds/TextareaComponent";
+import PageHeader from "@/components/PageHeader";
+import { Card } from "@/components/ds/CardComponent";
+import { Label } from "@/components/ds/LabelComponent";
+import Header from "@/components/Header";
+import { CMDK } from "@/components/CMDK";
+import CallToActionGrid from "@/components/CallToActionGrid";
+import Meta from "@/components/Meta";
+import GitHubContribution from "@/components/GitHubContribution";
+import Base64ToImageSEO from "@/components/seo/Base64ToImageSEO";
+import Link from "next/link";
+
+type Status = "idle" | "invalid" | "error";
+
+const getStatusMessage = (status: Status) => {
+ switch (status) {
+ case "invalid":
+ return "Invalid Base64 string. Please provide a valid Base64-encoded image.";
+ case "error":
+ return "Failed to decode image. Please check your input.";
+ default:
+ return null;
+ }
+};
+
+export default function Base64ToImage() {
+ const [input, setInput] = useState("");
+ const [imageSrc, setImageSrc] = useState(null);
+ const [status, setStatus] = useState("idle");
+
+ const processBase64 = useCallback((value: string) => {
+ if (value.trim() === "") {
+ setImageSrc(null);
+ setStatus("idle");
+ return;
+ }
+
+ try {
+ let dataUri = value.trim();
+
+ // If it's already a data URI, use it directly
+ if (dataUri.startsWith("data:image/")) {
+ setImageSrc(dataUri);
+ setStatus("idle");
+ return;
+ }
+
+ // Try to detect if it's a valid base64 string
+ // Remove any whitespace that might have been added
+ const cleanBase64 = dataUri.replace(/\s/g, "");
+
+ // Check if it looks like valid base64
+ if (!/^[A-Za-z0-9+/=]+$/.test(cleanBase64)) {
+ setStatus("invalid");
+ setImageSrc(null);
+ return;
+ }
+
+ // Try to decode to verify it's valid base64
+ try {
+ atob(cleanBase64);
+ } catch {
+ setStatus("invalid");
+ setImageSrc(null);
+ return;
+ }
+
+ // Create a data URI with a generic image type
+ // The browser will handle the actual image type detection
+ dataUri = `data:image/png;base64,${cleanBase64}`;
+ setImageSrc(dataUri);
+ setStatus("idle");
+ } catch (err) {
+ console.error("Failed to process Base64:", err);
+ setStatus("error");
+ setImageSrc(null);
+ }
+ }, []);
+
+ const handleChange = useCallback(
+ (event: React.ChangeEvent) => {
+ const value = event.currentTarget.value;
+ setInput(value);
+ processBase64(value);
+ },
+ [processBase64]
+ );
+
+ const handleImageError = useCallback(() => {
+ setStatus("error");
+ setImageSrc(null);
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {status !== "idle" && (
+
+ {getStatusMessage(status)}
+
+ )}
+
+
+ {imageSrc && (
+
+
+
+
+ )}
+
+
+
+
+ Looking to convert an image to Base64?{" "}
+
+ Use our Image to Base64 Converter
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/pages/utilities/image-to-base64.tsx b/pages/utilities/image-to-base64.tsx
index 3a3273a..feeff1f 100644
--- a/pages/utilities/image-to-base64.tsx
+++ b/pages/utilities/image-to-base64.tsx
@@ -11,6 +11,7 @@ import CallToActionGrid from "@/components/CallToActionGrid";
import Meta from "@/components/Meta";
import { ImageUploadComponent } from "@/components/ds/ImageUploadComponent";
import ImageToBase64SEO from "@/components/seo/ImageToBase64SEO";
+import Link from "next/link";
export default function ImageToBase64() {
const [base64, setBase64] = useState("");
@@ -120,6 +121,18 @@ export default function ImageToBase64() {
>
{buttonCSS}
+
+
+
+ Have a Base64 string and want to see the image?{" "}
+
+ Use our Base64 to Image Converter
+
+