PNG to Base64 Converter - Free Online Encoder

Drop PNGs here or browse Up to 50 images - JPG, WebP, GIF and SVG work too - or paste with Ctrl+V Exact bytes 6 code formats Nothing uploaded

Your Base64

File-

Code-

Base64 overhead-

Output format

Wrap at 76 charactersMIME line length, for email bodies and PEM-style files OFF

Add width and heightStops the page jumping while it loads ON

Your images

Add

0 images - click one to show its code.

How to Convert a PNG to Base64

Add your PNG. Drop one or more PNG images into the box, browse for them or paste one with Ctrl+V.

Pick the output. Choose a data URI, raw Base64, a CSS rule, an HTML img tag, JSON or Markdown.

Make it smaller (optional). Re-save as WebP or JPG or set a maximum size - the smaller file is only used when it really is smaller.

Copy or download. Copy the code for one image or all of them, or download it as a text, CSS, HTML, JSON or Markdown file.

Want to see it first? Press Try a sample icon - a 64 px icon makes a short, tidy data URI.

Which Output Do You Need?

The same Base64 text, wrapped for where it is going.

Format	Looks like	Use it in
Data URI	data:image/png;base64,iVBOR...	img src, CSS url(), JavaScript
Raw Base64	iVBORw0KGgoAAAANSUhEUg...	APIs, JSON fields, databases
CSS	.img-logo { background-image: url(...) }	Stylesheets, icon sprites
HTML	<img src="data:..." width height alt>	Web pages, email signatures
JSON	{ "name", "type", "dataUri" }	Config files, app assets
Markdown	![alt](data:...)	README files, notes

Base64 Size: The 33% Rule

Base64 writes every 3 bytes as 4 text characters.

So a 9 KB PNG becomes about 12 KB of text. Gzip on your server wins back part of that, but inline images still cannot be cached on their own - change one CSS line and the browser downloads every inlined image again.

Rule of thumb: inline icons and images under about 5-10 KB, link everything bigger. To get under that line, shrink the PNG with Compress PNG or PNG to 8-Bit first.

Tips

Logos and icons as SVG? Convert them with PNG to SVG - vectors are often tiny and stay sharp at any size.

Favicons in HTML: a data URI in <link rel="icon" href="data:..."> works in modern browsers. Make one with PNG to Favicon.

Photos? Pick WebP under Make it smaller first, or convert with PNG to WebP.

Minify the rest: after inlining, run your stylesheet through Minify JS and CSS.

Frequently Asked Questions

Drop your PNG into the box. The Base64 appears right away as a data URI - press Copy and paste it into your HTML, CSS or code.

Need another shape? Pick raw Base64, CSS, HTML <img>, JSON or Markdown.

Raw Base64 is just the encoded text. A data URI adds a header like data:image/png;base64, so browsers know what it is - use it in src="" or CSS url(). APIs and JSON fields usually want the raw text.

Base64 turns every 3 bytes into 4 characters, so the text is about 33% larger than the file. The exact overhead for your image is shown under the code.

Turn on Make it smaller first to re-save as WebP or JPG, or shrink the PNG with Compress PNG before encoding.

For small images - icons, logos, tiny backgrounds and email signatures - where saving an extra request matters. Big photos are better as normal files, because Base64 cannot be cached separately and makes the page heavier.

Some email apps show them, but Gmail and Outlook often block data URIs. For newsletters, a hosted image or a CID attachment is safer. Base64 works well in HTML signatures and internal tools.

Open the Base64 to image tab, paste the text or the whole data URI, and press Decode. The tool reads the bytes, finds the real type (PNG, JPG, GIF, WebP, AVIF, BMP, ICO or SVG) and lets you download the file.

Yes. Any PNG, JPG, GIF, WebP, AVIF, BMP, ICO or SVG file can be encoded, and the MIME type in the data URI is taken from the file itself. For icons, see also ICO to Base64.

No. Encoding and decoding happen in your browser, so your images and text never leave your device.