Runs in your browser · nothing is uploaded

Image to Base64 & SVG to PNG

Convert an image to Base64: encode JPG, PNG, WebP and GIF files as data URLs ready to paste into HTML, CSS or JSON — or convert SVG files to PNG at the width you choose, with scripts and external references stripped first.

FilesOutput width

Processing stays in your browser. Large images can be slow. GIF output uses a white background and limited colors. SVG scripts, styles and external references are removed before rasterization.

How the two conversions work

Image to Base64 data URL

Data URL formatdata:<media type>;base64,<encoded bytes>
Encoded length4 × ceil(file bytes ÷ 3) characters

JPG, PNG, WebP and GIF files are read as-is and encoded, so the result decodes to the identical file — no resizing, recompression or metadata removal. Other formats such as HEIC or BMP are rejected with a message. You can select several files at once; each appears in the result box as its file name followed by its data URL.

SVG to PNG

SVGs containing a DOCTYPE or entity declarations are refused.
Script, style, foreignObject, iframe, object, embed, animate and set elements are removed.
Event-handler attributes, links that don't point inside the file, and url(…) references to outside resources are stripped.
The cleaned SVG is drawn on a canvas at your width, with the height scaled to match, and saved as a PNG download.

SVG scripts, styles and external references are removed before rasterization. Transparent areas stay transparent in the PNG.

Worked example: data URL length

Characters in a PNG data URL, including the 22-character data:image/png;base64, prefix:

File	Bytes	Data URL chars	Larger by
1 KB	1,024	1,390	35.7%
2 KB	2,048	2,754	34.5%
5 KB	5,120	6,850	33.8%
10 KB	10,240	13,678	33.6%
50 KB	51,200	68,290	33.4%
100 KB	102,400	136,558	33.4%

Worked example: SVG to PNG size

SVG	Width set	PNG
24 × 24 icon	512	512 × 512
800 × 600 diagram	1,920	1,920 × 1,440
1200 × 630 banner	600	600 × 315
100 × 1000 tall strip	480	4,800 px tall — refused

PNG heights are capped at 4,096 px, so very tall SVGs need a smaller width. Give the SVG explicit width and height attributes so the browser knows its proportions.

When to use a Base64 image — and when not to

Good uses

Tiny icons and placeholders of a few kilobytes, where a separate request costs more than the extra bytes.
Single-file HTML pages, reports and demos that must work offline or be sent as one file.
Sending an image inside JSON, for example to an API that expects a Base64 field — strip the data:…;base64, prefix if it wants raw Base64.
Test fixtures and code snippets that shouldn't depend on an external file.

Better as a normal file

Photos and anything over a few kilobytes: the text is about a third larger than the file.
Images reused across pages: an inlined image is downloaded again with every page or stylesheet that contains it, instead of being cached once.
Images in CSS for the first screen: a large data URL makes the stylesheet bigger, and the page can't render until the stylesheet has loaded.
Images that change often, since every change also changes the HTML or CSS around them.

To shrink a data URL, compress or resize the image before converting it. WebP files are often much smaller than PNG or JPG at similar quality, so converting first can make the data URL noticeably shorter.

Sources: RFC 4648, "The Base16, Base32, and Base64 Data Encodings"; RFC 2397, "The 'data' URL scheme"; MDN Web Docs, "data: URLs". Checked 15 October 2026.

Frequently asked questions

How do I convert an image to Base64?+

Choose one or more JPG, PNG, WebP or GIF files and press Convert. The result box lists each file name followed by its full data URL, such as data:image/png;base64,iVBOR…. Press Copy result and paste it where you need it.

How much bigger is a Base64 image?+

Base64 writes every 3 bytes as 4 characters, so the text is about 33% larger than the file, plus a short prefix. A 10 KB PNG (10,240 bytes) becomes a 13,678-character data URL. Gzip or Brotli on your server recovers part of that overhead.

How do I use a Base64 image in HTML or CSS?+

Paste the data URL wherever an image URL goes: <img src="data:image/png;base64,…" alt="…"> in HTML, or background-image: url("data:image/png;base64,…") in CSS. Copy only the line that starts with data:, not the file name above it.

Does the converter resize or compress the image?+

No. JPG, PNG, WebP and GIF files are encoded byte for byte, so the data URL decodes to exactly the original file. The width setting only applies to SVG-to-PNG conversion. Compress or resize the image first if the data URL is too long.

How do I convert an SVG to PNG?+

Choose an .svg file, set the output width (16–1,920 px) and press Convert. The height follows the SVG's own proportions — a 24×24 icon at 512 px wide becomes 512 × 512 — and the PNG downloads with the same file name. Heights over 4,096 px are refused.

Why does my PNG look different from the SVG?+

Before drawing, the tool removes <style> blocks, scripts, animations, foreignObject, event handlers and links to anything outside the file, including embedded or external images. An SVG styled with CSS classes can lose its colors; use fill and stroke attributes or inline style attributes instead.

Can I get a Base64 data URL of an SVG?+

Not in this tool: SVG files are always converted to PNG. To inline an SVG, paste its markup straight into HTML, or convert the PNG output to Base64 in a second pass.

When should I inline an image as Base64?+

For small images — icons, tiny logos or placeholders of a few kilobytes — where saving a separate request is worth it, or where only one self-contained file will do, such as an HTML email template or a single-file demo. For larger images, a normal file is better: it's smaller, the browser can cache it, and it doesn't bloat your HTML or CSS.

Can I convert several images at once?+

Yes. Select multiple files together (up to 50 MB in total). Each JPG, PNG, WebP or GIF appears in the result box as its file name followed by its data URL, separated by a blank line, and each SVG downloads as its own PNG.

Does the SVG to PNG conversion keep a transparent background?+

Yes. The PNG is drawn on a transparent canvas, so any area the SVG doesn't paint stays transparent. If you need a solid background, add a full-size rect with a fill color as the first shape in the SVG before converting.

How do I turn a Base64 string back into an image?+

Use the Base64 & Hash Toolkit's decode mode. Paste only the part after base64, — not the data:image/…;base64, prefix — and the decoded bytes download as decoded.bin. Rename the file with the right extension, such as .png or .jpg, to open it.

Are my images uploaded?+

No. Files are read with your browser's FileReader and canvas, and the data URL exists only in the result box on this page. Nothing is sent to a server or saved. The total selection can be up to 50 MB.