Base64 Image Encoder / Decoder
Turn an image into a data URL, or decode a data URL to an image.
Input & settings
Result
How to use it
- 1Pick a direction
Turn an image into a data URL, or paste a data URL to get the image back.
- 2Add your file or text
Drop an image in, or paste the data URL you already have.
- 3Copy or save
Copy the data URL for your CSS or HTML, or download the decoded image.
Good to know
PNG, JPEG, WebP and GIF
Up to 5 MB per image. SVG is excluded, because SVG can carry scripts.
About a third larger
Base64 always costs roughly 33% more bytes than the original file.
Best for small images
Icons, logos and tiny textures inline well. Large photos bloat your HTML or CSS and cannot be cached separately.
Stays in your browser
Images and text are processed locally and never uploaded.
Common uses
- Embedding an icon directly in CSS
- Inlining a logo in an HTML email template
- Pasting a small image into a JSON payload
- Recovering an image from a data URL in a log
- Avoiding an extra request for a tiny asset
Questions
What is a data URL?
A data URL carries the file itself inside the link, starting with data:image/png;base64, followed by the encoded bytes. The browser decodes it instead of fetching a separate file.
When should I inline an image?
When it is small and always needed. Inline images cannot be cached on their own and make the file that holds them bigger for every visitor.
Why is SVG not supported?
SVG files can contain scripts, so they are excluded rather than decoded and previewed here.
Does encoding reduce quality?
No. Base64 is a lossless representation of the same bytes; only the size changes.
How it works
Supports PNG, JPEG, WebP and GIF up to 5 MB. SVG is excluded. Base64 increases file size by about one third. Images and text stay in your browser.