feat: add Base64 to Image Converter utility

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)

components/seo/Base64ToImageSEO.tsx

@@ -0,0 +1,122 @@
+import Link from "next/link";
+
+export default function Base64ToImageSEO() {
+  return (
+    <div className="content-wrapper">
+      <section>
+        <h2>Convert Base64 to Image</h2>
+        <p>
+          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.
+        </p>
+      </section>
+
+      <section>
+        <h2>How to Use:</h2>
+        <ul>
+          <li>
+            <b>Paste your Base64 string:</b> <br /> 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,...).
+          </li>
+          <li>
+            <b>View the preview:</b> <br /> The decoded image will automatically
+            appear below the input field.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Related Tools</h2>
+        <p>
+          Need to convert an image to Base64 instead? Use our{" "}
+          <Link
+            href="/utilities/image-to-base64"
+            className="text-primary underline hover:no-underline"
+          >
+            Image to Base64 Converter
+          </Link>{" "}
+          to encode images into Base64 format. For encoding and decoding text
+          strings, check out our{" "}
+          <Link
+            href="/utilities/base-64-encoder"
+            className="text-primary underline hover:no-underline"
+          >
+            Base64 Encoder/Decoder
+          </Link>
+          .
+        </p>
+      </section>
+
+      <section>
+        <h2>Base64 Image Decoding Use Cases</h2>
+        <ul>
+          <li>
+            <b>Debugging API responses:</b> <br /> Quickly verify that
+            Base64-encoded images in API responses are correct.
+          </li>
+          <li>
+            <b>Email template development:</b> <br /> Preview embedded images in
+            email templates that use Base64 encoding.
+          </li>
+          <li>
+            <b>Data URI validation:</b> <br /> Verify that data URIs are
+            properly formatted and contain valid image data.
+          </li>
+          <li>
+            <b>Database content inspection:</b> <br /> View images stored as
+            Base64 strings in databases.
+          </li>
+        </ul>
+      </section>
+
+      <section>
+        <h2>Understanding Base64 Image Encoding</h2>
+        <p>
+          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.
+        </p>
+        <p>
+          A Base64-encoded image typically appears as a data URI in the format:
+          <code className="block mt-2 p-2 bg-muted rounded text-sm">
+            data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
+          </code>
+        </p>
+        <p>
+          This tool accepts both the full data URI format and raw Base64 strings
+          without the prefix.
+        </p>
+      </section>
+
+      <section>
+        <h2>FAQs</h2>
+        <ul>
+          <li>
+            <b>What image formats are supported?</b> <br /> This tool supports
+            all common image formats including PNG, JPEG, GIF, WebP, and SVG
+            when properly Base64-encoded.
+          </li>
+          <li>
+            <b>Do I need to include the data URI prefix?</b> <br /> No, you can
+            paste either a raw Base64 string or a complete data URI. The tool
+            will handle both formats.
+          </li>
+          <li>
+            <b>Is my data secure?</b> <br /> Yes, all processing happens locally
+            in your browser. Your data is never sent to any server.
+          </li>
+          <li>
+            <b>Why is my image not displaying?</b> <br /> 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, +, /, =).
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}

components/seo/ImageToBase64SEO.tsx

@@ -1,3 +1,5 @@
+import Link from "next/link";
+
 export default function ImageToBase64SEO() {
   return (
     <div className="content-wrapper">
@@ -11,6 +13,20 @@ export default function ImageToBase64SEO() {
         </p>
       </section>
 
+      <section>
+        <h2>Related Tool</h2>
+        <p>
+          Have a Base64 string and want to preview the image? Use our{" "}
+          <Link
+            href="/utilities/base64-to-image"
+            className="text-primary underline hover:no-underline"
+          >
+            Base64 to Image Converter
+          </Link>{" "}
+          to instantly decode and view Base64-encoded images.
+        </p>
+      </section>
+
       <section>
         <h2>How to Use:</h2>
         <ul>

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:

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<string | null>(null);
+  const [status, setStatus] = useState<Status>("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<HTMLTextAreaElement>) => {
+      const value = event.currentTarget.value;
+      setInput(value);
+      processBase64(value);
+    },
+    [processBase64]
+  );
+
+  const handleImageError = useCallback(() => {
+    setStatus("error");
+    setImageSrc(null);
+  }, []);
+
+  return (
+    <main>
+      <Meta
+        title="Base64 to Image Converter | Free, Open Source & Ad-free"
+        description="Convert Base64 strings to images instantly with Jam's free online tool. Just paste your Base64-encoded image data and see the preview. Fast, free, and developer-friendly."
+      />
+      <Header />
+      <CMDK />
+
+      <section className="container max-w-2xl mb-12">
+        <PageHeader
+          title="Base64 to Image Converter"
+          description="Fast, free, open source, ad-free tools."
+        />
+      </section>
+
+      <section className="container max-w-2xl mb-6">
+        <Card className="flex flex-col p-6 hover:shadow-none shadow-none rounded-xl">
+          <div>
+            <Label>Base64 String</Label>
+            <Textarea
+              rows={6}
+              placeholder="Paste Base64-encoded image data here (with or without data URI prefix)"
+              onChange={handleChange}
+              value={input}
+              aria-label="Base64 input"
+            />
+          </div>
+
+          {status !== "idle" && (
+            <div className="mt-6 flex text-red-600 text-sm" role="alert">
+              {getStatusMessage(status)}
+            </div>
+          )}
+
+          <div className="w-full">
+            {imageSrc && (
+              <div className="mt-6 border rounded p-4 overflow-auto">
+                <Label>Image Preview</Label>
+                <img
+                  src={imageSrc}
+                  alt="Decoded Base64 Image"
+                  className="w-full h-auto mt-2"
+                  onError={handleImageError}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="mt-6 text-sm text-muted-foreground">
+            <p>
+              Looking to convert an image to Base64?{" "}
+              <Link
+                href="/utilities/image-to-base64"
+                className="text-primary underline hover:no-underline"
+              >
+                Use our Image to Base64 Converter
+              </Link>
+            </p>
+          </div>
+        </Card>
+      </section>
+
+      <GitHubContribution username="devin-ai-integration" />
+      <CallToActionGrid />
+
+      <section className="container max-w-2xl">
+        <Base64ToImageSEO />
+      </section>
+    </main>
+  );
+}

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}
             </Button>
+
+            <div className="mt-6 text-sm text-muted-foreground">
+              <p>
+                Have a Base64 string and want to see the image?{" "}
+                <Link
+                  href="/utilities/base64-to-image"
+                  className="text-primary underline hover:no-underline"
+                >
+                  Use our Base64 to Image Converter
+                </Link>
+              </p>
+            </div>
           </div>
         </Card>
       </section>