Related Tools
Images to PDFCombine images into one PDF
Image CompressorCompress PNG · JPEG · WebP
Image to SVGVectorize PNG, JPG & WebP
Image to TextOCR — extract text from images
Base64 Encoder/DecoderEncode & decode instantly
Favicon GeneratorAll sizes + ICO + WebManifest
QR Code GeneratorCustom styles & logo
Animated SVG IconsPure SVG icon libraryImage to Base64 Converter Online — PNG, JPEG, SVG, WebP, GIF
What's included
Features
About this tool
Convert Any Image to a Base64 Data URI — Get HTML, CSS, and Raw String Outputs Instantly
You need a small icon embedded in your CSS without an extra HTTP request, or you're building an HTML email and external images keep getting blocked by email clients. Drag the image here and copy the ready-to-use output — Data URI, HTML <img> tag, CSS background-image, or raw Base64 string — in one click. Everything runs entirely in your browser — no image data is ever uploaded to any server, making it safe for proprietary, confidential, or sensitive images.
Base64 encodes binary image data as ASCII text so it can be embedded anywhere text is accepted — in HTML attributes, CSS url(), JSON, or JavaScript string literals. The output is a Data URI like data:image/png;base64,iVBORw0KGgo... that browsers render without a network request. Six output formats cover every web development use case: Data URI for direct embedding in any URL context, HTML img tag for ready-to-paste markup, CSS background-image for stylesheet use, CSS content for pseudo-element icons, Raw Base64 for manual or programmatic use, and SVG URL-encoded — which is smaller and more GZIP-friendly than Base64 for SVG files because the SVG markup remains as readable text.
Optional format conversion via the Canvas API lets you re-encode to JPEG, PNG, or WebP before generating the Base64. This is especially useful when you have a large PNG and want to shrink it to WebP first — dramatically reducing the Base64 string length before inlining. A quality slider (10–100%) controls lossy compression for JPEG and WebP output. The metadata panel shows original file size, Base64 string size, and the overhead percentage so you can make an informed decision about whether inlining makes sense for your specific image. Base64 always adds approximately 33% overhead — for images under 5 KB the trade-off is usually worthwhile; for larger images, an external file with HTTP caching is generally more efficient.
Step by step
How to Use
- 1Upload your imageDrag an image file onto the drop zone on the left, or click it to open a file picker. You can also press Ctrl+V anywhere on the page to paste a screenshot or copied image directly from your clipboard. Supported formats include PNG, JPEG, WebP, GIF, SVG, BMP, and ICO.
- 2Review the metadata panelOnce uploaded, the panel below the image preview shows your image dimensions, MIME type, original file size, the resulting Base64 string size, and the overhead percentage. Base64 always adds approximately 33% to the original file size — use this panel to decide whether inlining the image is worth the trade-off.
- 3Optionally convert the format firstClick the JPEG, PNG, or WebP tab in the "Convert to" section to re-encode the image to a different format before generating the Base64. For JPEG and WebP, a quality slider (10–100%) controls the compression level — lower quality produces a smaller Base64 string. This is useful for shrinking a large PNG to a smaller WebP before inlining it.
- 4Copy your preferred output formatThe right panel shows six ready-to-use outputs: Data URI (for img src and CSS url()), HTML img tag (ready-to-paste markup), CSS background-image, CSS content (for pseudo-elements), Raw Base64 (the bare string only), and SVG URL-encoded (for SVG files only — smaller and more GZIP-friendly than Base64). Click any row to copy it — a green checkmark confirms the copy.
- 5Use the output in your projectPaste the Data URI directly into an HTML img src attribute, a CSS background-image url() property, or a JSON payload. For SVG images, prefer the SVG URL-encoded row over Base64 — it produces a smaller, human-readable, and more GZIP-compressible data URI that works in all modern browsers.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Base64 encodes binary image data as ASCII text so it can be embedded safely in HTML, CSS, or JSON. The output is a Data URI like data:image/png;base64,... that browsers render without an HTTP request. Best for small images under 5–10 KB.
A Data URI embeds file content inline using the scheme: data:[mediatype];base64,[data]. Use it anywhere a URL is accepted — img src, CSS url(), link href. The browser decodes and renders it locally without a network request.
Base64 encodes 3 bytes as 4 ASCII characters — inherently a 33% size increase. A 10 KB PNG becomes ~13.3 KB as Base64. Use Base64 only for small images; for large ones, external files with caching are more efficient.
Use Base64 for: icons under 5 KB, email HTML images, critical above-the-fold assets. Use external files for: large photos, images reused across pages (they benefit from browser caching), and anything over ~10 KB.
SVG is XML text — URL-encoding it keeps it readable and GZIP-compressible: url("data:image/svg+xml,<svg...>"). This is smaller and more efficient than Base64 for SVGs. Use this for CSS icon systems and design tokens.
Yes — use the Convert to tabs to switch between JPEG, PNG, or WebP. JPEG and WebP support a quality slider (10–100%). JPEG conversion fills transparency with white since JPEG has no alpha channel.
No. Everything runs 100% in your browser using the FileReader and Canvas APIs. No image data is ever uploaded. Safe for confidential or proprietary images.
Copy the CSS background-image row: .icon { background-image: url("data:image/png;base64,..."); }. For SVG icons, use the SVG URL-encoded row instead — it produces smaller, more GZIP-friendly output.