Image & design · Practical guide
Convert an image to Base64 for HTML, CSS and APIs
Prepare a small image, encode its exact file bytes, and choose the output that matches where you will use it.
1. Prepare a suitably small asset when needed
Base64 usually adds about one third to the file size, so resize or compress large images before encoding when visual changes are acceptable. Skip this step when the receiving system must get the exact original file bytes.
Open Image resizer ↗2. Encode the original file bytes
Choose, drop or paste a PNG, JPEG, WebP, GIF or AVIF. The converter reads the file directly and does not draw it to a canvas, recompress it or remove metadata. Review the filename, MIME type, dimensions and output size before copying.
Open Image to Base64 ↗3. Choose Base64 or a complete Data URL
Use Base64 only when an API field already supplies the MIME type. Use a full data: URL for a small inline HTML image or CSS url() value. Base64 is encoding, not encryption, so do not use it to hide confidential images.
Open Image to Base64 ↗