How to Turn an Image into Base64 for HTML and CSS
2026-11-08
Convert an image to a Base64 string (Data URI), paste it into an HTML img tag or a CSS background, and convert Base64 back to a file. Includes size tips.
What Base64 and a Data URI are
Base64 is text that represents the bytes of an image. A Data URI adds the format in front, as in data:image/png;base64,..., so it can be used directly as an image address.
Image to Base64
1. Open the Base64 converter and choose "Image → Base64". Add one image at a time, up to 20MB.
2. Four results appear: "Data URI (for src or the address bar)", "Base64 only", "HTML <img> tag" and "CSS background image".
3. Press "Copy" on the one you need. Only the start is shown on screen, but Copy copies all of it.
Base64 back to an image
Paste a Data URI or Base64 text into "Paste a Base64 string or Data URI" and the image is restored as a preview. Spaces and line breaks are ignored. The first bytes show whether it is JPG, PNG, GIF, WebP, AVIF or BMP, and you can save it with the right extension.
When it suits
Small icons and logos that go straight into HTML or CSS, or where you want to avoid one more file request.
Things to keep in mind
- Base64 is about 33% larger than the original file.
- The browser cannot cache an embedded image separately, and your HTML or CSS grows by that amount. Images over 100KB, or ones used in many places, are better as normal files.
- This tool does not shrink images. If you need a smaller file, compress it with the image compressor first.
- Files over 20MB are not converted.