Image to Base64
Drag and drop an image to convert it to a Base64 data URI for inline embedding
Image to Base64
Convert images and files to Base64 encoded strings
TL;DR
What is Image to Base64?
Image to Base64 converts an image file into a data URI: a string of the form data:image/png;base64,... that encodes the entire image inline. This allows an image to be embedded directly in HTML, CSS, or JSON without a separate file or HTTP request.
Common use cases
- ‣Email templates: embed small images inline to avoid blocked external image requests in email clients
- ‣CSS backgrounds: encode small icons or textures as data URIs to eliminate HTTP requests
- ‣Offline apps: bundle images into a single HTML file for distribution without a server
- ‣API payloads: send image data as a Base64 string in a JSON body when multipart upload is not available
Frequently asked questions
When should I not use Base64 images?
Avoid Base64 for large images or images loaded frequently across many pages. Base64 increases size by ~33%, cannot be cached by the browser separately from the HTML/CSS that contains it, and increases DOM/CSSOM parse time. Use a regular <img src> URL for images above a few kilobytes.
What image formats are supported?
Any image format the browser can read: PNG, JPEG, WebP, GIF, SVG, AVIF, and others. The MIME type in the data URI (data:image/png;base64,...) is set automatically from the file type.