GluePuddingTool

Base64 Image Preview and Converter

Preview a Base64 string as an image, or turn an uploaded image into Base64, with image dimensions and data length shown alongside the result.

FreeOnline Tool
Loading…

How to Use

  1. "Base64 to image" tab: paste a Base64 string (with or without the data:image/ prefix) and click "Preview image" to see the picture it represents
  2. The preview area shows the image dimensions and the data length, and you can click "Download image" to save it
  3. "Image to Base64" tab: click or drag to upload an image (PNG, JPG, GIF, WebP and SVG are supported)
  4. Choose whether to include the data URI header, then click "Copy" to copy the Base64 output

Features

  • Base64 to image preview: paste a Base64 string to render the image, with or without a data:image/ prefix
  • Image to Base64: upload a picture and the Base64 encoding is generated automatically for common image formats
  • Image details: dimensions, data length and file size are displayed automatically
  • Drag and drop: upload either by clicking or by dragging a file onto the page
  • Download and copy: the previewed image can be downloaded and the Base64 output copied with one click

Use Cases

Debugging Base64 image data
When you hit Base64-encoded image data while developing, preview it quickly to confirm the content is what you expect.
Converting an image to Base64
Turn a local image into a Base64 string so it can be embedded directly in HTML, CSS or source code.
Inspecting image details
See the image dimensions and Base64 data length at the same time as the preview.
Verifying a data round trip
Check that an image survives Base64 encoding and decoding intact.

FAQ

Does the Base64 string need the data:image/ prefix?
No, the tool handles both. A bare Base64 string and a complete string with the data:image/ prefix both preview correctly.
Which image formats can I upload?
Common formats including PNG, JPG, GIF, WebP and SVG.
Does Base64 encoding make the image bigger?
Yes. Base64 increases the data size by roughly 33 percent, but it makes the image easy to carry and embed in text-only contexts.
Does the copied Base64 include the data:image/ prefix?
That is your choice. The "Include data URI header" checkbox controls whether the prefix is part of the copied output.