When to use Base64 images
Use Base64 for tiny icons, placeholders, single-file demos, offline documents, snippets, and small assets that must travel inside HTML, CSS, JSON, or XML.
Image to Base64 Converter
Image & Output
Drag & drop an image here
or click to upload / paste from clipboard
Local files stay in-browser. URL conversion uses your browser to fetch the remote image and may be blocked by CORS.
Formats & limits
- Accepted: PNG, JPG/JPEG, GIF, WebP, SVG, ICO, BMP, and any image type your browser can decode.
- Recommended: keep embedded assets under 100 KB when possible; large Base64 strings slow pages and editors.
- Animated GIF/WebP remains animated when encoded exactly; canvas optimization may flatten animation, so GIF and WebP optimization are skipped.
- HEIC/AVIF preview and conversion depend on browser support.
- Local files and clipboard images convert client-side without upload.
No file loaded.
Preview & Details
Filename
—
MIME type
—
Image size
—
Original bytes
—
Encoded source bytes
—
Base64 characters
—
Data URI characters
—
Estimated encoded byte size
—
Percent increase
—
Optimization
—
Tip: You can also press Ctrl/Cmd + V to paste an image from your clipboard.
Advertisement
How to convert an image to Base64
- Choose a local image file, paste an image from the clipboard, or enter an image URL.
- Select the output format: raw Base64, Data URI, HTML img, CSS, JSON, XML, Markdown, JavaScript, favicon link, hyperlink, or iframe.
- Review the preview, dimensions, original bytes, Base64 characters, Data URI characters, and size increase.
- Copy the active output or download it as a text file.
- Paste the result into HTML, CSS, JSON, XML, Markdown, or JavaScript.
Practical Base64 Image Guidance
When not to use them
A normal image URL is usually better for large photos, frequently reused assets, cacheable files, responsive images, and content that should load progressively.
Why large strings hurt performance
Base64 adds roughly 33 percent before prefixes or markup. Large inline strings bloat HTML/CSS, delay parsing, reduce cache reuse, and can make editors sluggish.
Base64 is not security
Base64 is reversible text encoding. It does not encrypt, hide, or protect an image from users who can view the page source or network response.
Data URI vs raw Base64
Raw Base64 is only the encoded bytes. A Data URI adds the MIME type and prefix, such as data:image/png;base64,, so browsers know how to display it.
SVG may be better as text
Small SVGs can be shorter and easier to edit as URL-encoded data:image/svg+xml text instead of Base64, especially for simple icons.
Why pasted images may not display
Check that the Data URI prefix is present, the MIME type matches the image, line breaks were not inserted in an unsafe place, and the receiving app allows Data URIs.
Image to Base64 FAQ
Are my uploaded images private?
Local file uploads and clipboard images are converted in your browser and are not uploaded to Starlight Tools. URL conversion fetches the remote image through your browser, so the remote host sees that request and browser CORS rules may block it.
Which image formats are supported?
The tool is built for PNG, JPG/JPEG, GIF, WebP, SVG, ICO, and BMP. HEIC and AVIF may work only in browsers that can decode those formats.
What is the maximum file size?
There is no upload limit for local files because conversion happens in your browser, but Base64 becomes large quickly. For reliable copy/paste and page performance, keep embedded assets under about 100 KB when possible and avoid multi-megabyte outputs.
Can I convert PNG, JPG, SVG, WebP, ICO, and BMP files?
Yes. Use the file picker, drag and drop, paste, or a URL that your browser is allowed to fetch. SVG, ICO, and BMP support depends on browser decoding for preview and optional optimization.
Do Base64 images work in email clients?
Some email clients support Data URI images, but support is inconsistent. Many production email templates still use hosted images or CID attachments for better reliability.
Does Gmail support Base64 images?
Gmail commonly strips or refuses inline Data URI images in message bodies, so Base64 images are usually not reliable for Gmail campaigns or signatures.
Should I wrap Base64 lines?
This tool's wrap control is visual only, so it makes very long strings easier to inspect without changing the copied value. If another editor inserts real line breaks, remove them before pasting into attributes, JSON strings, CSS declarations, or code.
Are there Data URI length limits?
Modern browsers handle long Data URIs better than older ones, but very large inline images can still hit browser, editor, CMS, or email-client limits. Use external image files for large assets.
Why can copying a very large output fail?
Browsers and operating systems can reject huge clipboard writes or make the page slow while selecting the text. Download the output as a text file when the string is very large.
Can I decode Base64 back to an image?
Yes. A Base64 image can be decoded back into binary image bytes as long as the Base64 string is complete and uses the correct MIME type when displayed.
Does Base64 compress or encrypt images?
No. Base64 is an encoding, not compression or encryption. It usually makes image data about 33 percent larger before any Data URI prefix, line wrapping, or surrounding markup.