From 4cef4fc07710da61f51d5ebcdb70f8d3639e7d72 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 13 Jan 2026 15:33:31 +0000 Subject: [PATCH 1/3] feat: add Base64 to Image Converter utility - Create new utility page at /utilities/base64-to-image - Add SEO component for the new utility - Add cross-references between Base64 to Image and Image to Base64 utilities - Update tools-list.ts and README.md with the new tool Co-Authored-By: petar@jam.dev --- README.md | 1 + components/seo/Base64ToImageSEO.tsx | 123 +++++++++++++++++++++ components/seo/ImageToBase64SEO.tsx | 16 +++ components/utils/tools-list.ts | 6 + pages/utilities/base64-to-image.tsx | 166 ++++++++++++++++++++++++++++ pages/utilities/image-to-base64.tsx | 13 +++ 6 files changed, 325 insertions(+) create mode 100644 components/seo/Base64ToImageSEO.tsx create mode 100644 pages/utilities/base64-to-image.tsx 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..458852e --- /dev/null +++ b/components/seo/Base64ToImageSEO.tsx @@ -0,0 +1,123 @@ +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 (
@@ -11,6 +13,20 @@ export default function ImageToBase64SEO() {

+
+

Related Tool

+

+ 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..3255e6a --- /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 ( +
    + +
    + + +
    + +
    + +
    + +
    + +