Image to Base64 Converter

About the Image to Base64 Converter

Turn one image or a whole folder of icons into data URIs you can paste straight into HTML, CSS, Markdown or JSON — no separate image file, no extra request. Each result comes with ready-made snippets: an <img> tag with width, height and alt text, a CSS background-image rule with a class name from the file name, a Markdown image, a JSON object and the plain Base64 string.

Base64 makes every file about 33% larger (4 characters for every 3 bytes), so the tool helps you keep that small: Optimise first re-encodes photos and graphics as WebP, JPG or PNG at the quality and size you choose — and by default keeps the original when re-encoding would not make it smaller. SVG files get a URL-encoded data URI instead of Base64 — SVG is text, so escaping just the characters that need it is shorter — after comments and white space are removed. Everything happens in your browser; the images never leave your device.

Common uses

• Embedding icons and small graphics in a CSS file or a single-file HTML page.
• Putting a logo into an HTML email signature or template without hosting it.
• Sending an image inside a JSON API request, or storing a test fixture in code.
• Turning an SVG icon from a design tool into a compact CSS background.
• Including small images in Markdown notes or documentation that must stay one file.

When inlining images is a good idea

Data URIs save a network request, which helps for small, unique images that are needed right away: icons in a stylesheet, a logo in an HTML email template or a single-file report, a placeholder, an image inside a JSON API payload or a test fixture.

For anything larger than a few kilobytes, a separate file is usually better: the browser can cache it on its own and download it in parallel, while a data URI is downloaded again with every copy of the page or stylesheet that contains it, and a big one holds up the rest of that file. As a rule of thumb, inline icons and small graphics, and link photos. The tool flags data URIs over about 100 KB.

Base64 or URL-encoded SVG?

A data URI (RFC 2397) looks like data:<media type>[;base64],<data>. With ;base64 the data is Base64 (RFC 4648), which can hold any file but adds a third. Without it, the data is the file itself with unsafe characters percent-encoded — ideal for SVG, whose text is mostly letters, digits and spaces that need no escaping.

For SVG this tool escapes <, >, #, %, &, non-ASCII characters and (only when the file also contains single quotes) double quotes, writes the escapes in lower case (which tends to compress better with gzip) and leaves spaces, =, :, /, , and ; alone, which every browser accepts. The Markdown snippet also escapes spaces and parentheses, because they would end a Markdown link.

What “Optimise first” does

• WebP (default) is usually the smallest for both photos and graphics, and is supported by all current browsers.
• JPG suits photos and works in every program; transparent areas become white.
• PNG keeps graphics lossless; MySmartCoPilot’s PNG encoder picks the smallest colour type for the image.
• Longest side shrinks large images (never enlarges small ones) in high-quality steps.

With Use the original when it is already smaller, a file that grows when re-encoded (common for tiny, already-optimised PNGs) is kept as it was, minus its metadata. HEIC, AVIF, TIFF and JPEG XL photos are always re-encoded: their EXIF and GPS data cannot be removed any other way, and most browsers cannot show HEIC, TIFF or JPEG XL. SVG files always stay vector, and animated GIF, PNG and WebP files are encoded as they are, because re-encoding through a canvas keeps only the first frame.

Limitations

• Files up to 25 MB and 100 images at a time. Result boxes show at most 300,000 characters; Copy and Download always use the full text.
• Re-encoding keeps only the first frame of an animation, so animated images are always encoded as they are.
• HEIC, TIFF and JPEG XL data URIs only display in Safari; choose Optimise first to convert them.
• Email client support for data-URI images varies — caniemail.com lists clients that block them or only partly support them — and some Markdown renderers block them, so test where your snippet will be shown.
• An SVG used as an image cannot load other files (linked images, web fonts, external stylesheets) and never runs scripts; the tool warns when a file relies on them.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.