Image to Base64
Convert any image file into a Base64 data URI for embedding directly in CSS or HTML. Supports PNG, JPG, GIF, WebP, and SVG. No upload — processed entirely in your browser.
Drop or click to choose an image
How to use the image to base64
Drop or pick an image. The Base64 data URI appears below — switch the format toggle to wrap it in CSS or HTML.
Formula & explanation
Browser's FileReader.readAsDataURL produces a 'data:<mime>;base64,<encoded>' URI. Useful for inlining small images directly into CSS or HTML, avoiding extra HTTP requests.
Examples
Inlining a 5 KB icon into a CSS file removes one round-trip — but the encoded version is ~33% larger, so use only for small assets.
Frequently asked questions
- Maximum file size?
- Browser memory is the only limit (~tens of MB), but data URIs blow up bundle size, so keep below 10 KB for performance.
- Is the file uploaded?
- No — encoding happens entirely in your browser.
Related developer tools tools
- Base64 Encoder/DecoderEncode text or binary data to Base64 and decode Base64 strings back to text. Supports standard and URL-safe Base64. Useful for data URIs, API tokens, and email attachments.
- CSS MinifierMinify CSS for production by stripping whitespace, comments, and redundant rules. Paste your stylesheet and get the compressed output ready to ship or inline.
- JSON FormatterPretty-print, minify, and validate JSON. Detects syntax errors with line numbers and supports nested structures of any depth.
- JSON DiffCompare two JSON values semantically. Ignores key order; shows added, removed, and changed fields with their JSONPath — great for diffing API responses and config files.
- JSON to XML ConverterConvert JSON objects and arrays to well-formed XML. Maps object keys to elements, array items to repeated elements, with optional root wrapper.
- JSON to YAML ConverterConvert JSON to clean indented YAML for Kubernetes manifests, Docker Compose, CI configs, and Helm charts. Preserves nested structures.