--- title: "Image to Base64 Converter – Data URI, HTML and CSS" description: "Turn an image into Base64 text: a data URI, a ready HTML img tag and a CSS background line, each with a copy button. Optional compression first. Free." url: "https://imagecompressor.si/image-to-base64" lang: "en" --- # Convert an image to Base64 Get a data URI, an HTML tag and a CSS line for your image, ready to paste into code or an email template. ## How it works 1. **Add your images** Drag and drop, paste, or pick files. They upload over an encrypted connection. 2. **Pick a quality or a target size** Use the quality slider, or tell it exactly how many KB or MB you need. 3. **Download** Save each file, or grab them all at once as a ZIP. Base64 writes a file's bytes as plain text, so a small image can live inside an HTML page, a CSS file, a JSON document or an email template instead of being a separate download. Icons, tiny logos and placeholders are the usual candidates: they arrive with the page and need no extra request. Add a picture and four blocks appear: the data URI on its own, an img tag with it as the source, a CSS background-image line, and the bare Base64 for APIs that want only the encoded bytes. Each has a copy button. The panel shows the file's size next to the length of the text, which is about a third larger. The encoding happens in your browser, because it only rewrites bytes as text. If you switch on Compress first, the picture is made smaller on our server before it is encoded, and deleted there straight after. ## When a data URI helps, and when it hurts Inline a picture when it is small and used once: an icon in a button, a logo in an email signature, a loading placeholder. Leave it as a file when it is large or reused on many pages, because the browser cannot cache a data URI apart from the page or stylesheet it sits in, and every copy is downloaded again. For larger pictures a separate, well-compressed file is almost always the better choice. ## Make it small first Base64 makes data about a third larger, so every kilobyte saved before encoding is worth more after it. Switch on Compress first, or for logos and icons start from an SVG, which is often smallest of all and stays sharp at any size. ## Pasting into email templates Many email programs block or strip data URIs in images. For newsletters, a hosted image is more reliable; data URIs suit web pages, apps and documents better. ## Using the snippets The HTML tag goes wherever a normal img would, and the alt attribute is left empty for you to describe the picture. The CSS line goes inside a rule, for example a class for a button icon, together with a background size. The bare Base64 is what upload APIs and JSON fields usually ask for: they add the type themselves. If you build pages with a framework, data URIs also work in its image components and in import statements of most bundlers, which inline small files this way on their own. ## Frequently asked questions ### Is my image uploaded? Only when Compress first is on. Otherwise the text is made in your browser from the file you chose. ### Why is the Base64 bigger than the file? Every three bytes become four characters, so the text is about 33 % larger. ### What is the largest file I can encode? 5 MB. Beyond that a data URI slows a page more than a separate file would. ### Can I turn the text back into a picture? Yes, with the Base64 to image page. ### Which formats work? Any picture: PNG, JPEG, WebP, GIF, SVG, AVIF and the rest. The data URI names the type. ### Does Base64 hide or protect the image? No. It is an encoding, not encryption; anyone can turn the text back into the picture. ### Can I encode an SVG as text instead of Base64? SVG can go into a data URI as escaped text, which is often shorter. This page gives the Base64 form, which works everywhere. ## Related tools - [Convert Base64 to an image](https://imagecompressor.si/base64-to-image): Paste the text, see the picture straight away, and save it as an ordinary file. - [Convert SVG to PNG](https://imagecompressor.si/svg-to-png): A vector drawing as a picture every program accepts. - [Compress a PNG](https://imagecompressor.si/compress-png): Make PNG files smaller while keeping sharp edges and transparency intact.