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 to TypeScriptGenerate TypeScript interfaces and types from any sample JSON. Handles nested objects, arrays, optional fields, and mixed types. Paste JSON, copy the interface.
- CSV to JSON ConverterConvert CSV to a JSON array of objects. Uses the first row as keys, handles quoted values, and detects common delimiters automatically.
- CSV to XML ConverterConvert CSV rows into XML elements with column headers as tag names. Useful for Excel exports, legacy systems, and ETL pipelines.
- CSV to YAML ConverterConvert CSV to YAML for use in config files, Ansible playbooks, and Kubernetes ConfigMaps. Uses the header row as YAML keys.