🔗 Image to Base64
Data URI, CSS, and HTML snippets
⚠️ Data URIs suit very small icons. Inlining anything past 5–10KB usually backfires: it cannot be cached separately, so it is re-sent with every page load.
🔒 Everything runs inside your browser — your files are never uploaded to our servers and we never see them. Close the tab and nothing is left behind.
Step-by-step
- Pick an image Small icons suit this best — logos, icons, simple background patterns. A photograph produces a string so long it is barely usable.
- Leave "re-encode smaller first" on Base64 inflates data by about 33% (every 3 bytes become 4 characters). Shrinking to the size you actually display and compressing first is therefore almost always worth it. The defaults — 256px wide, WebP — are ample for an icon.
- Choose the output form Data URI gives you the raw string to use however you like. HTML img hands you a complete tag with width and height. CSS background gives you a rule ready for a stylesheet.
- Press start The full string appears below along with its length. That length is the point — it is exactly how much bigger your HTML or CSS file becomes.
-
Copy it, or download the .txt
The Copy button puts it on the clipboard. For long strings the downloaded
.txtis far easier to work with than selecting it all in a browser.
When you would use this
Inlining tiny icons to save a request
For an icon of a few hundred bytes, the HTTP request can cost more than the image itself. A data URI removes that round trip. Since HTTP/2 the benefit is much smaller than it used to be, so do not overdo it.
Writing HTML email
Many mail clients block external images until the recipient clicks "show images". Inlined images are not blocked — though Gmail's support for data URIs is limited, so always test before sending.
Single-file pages and reports
When you have to hand over an HTML file that opens and works with no other files alongside it, every image has to be inlined. Offline documents, generated reports, and pages sent as email attachments all fall into this category.
Quick tests and demos
Need an image in a CodePen, JSFiddle, or a throwaway test page without dealing with hosting? Pasting a data URI is the fastest route.
What Base64 is
Images are binary data, while HTML, CSS, and JSON can only hold text. Base64 is an encoding that turns arbitrary binary into plain text, representing the original bytes with 64 safe printable characters (A–Z, a–z, 0–9, +, /).
The price is a size increase of about 33%: every 3 bytes must be written as 4 characters. That is not implementation waste — it is the mathematical floor of the encoding.
When inlining is worth it
A simple test: inline only when the image is small enough that the HTTP request costs more than the image does. In practice that means icons under about 5KB.
Past that, the downsides start to outweigh the benefit, and the main one is caching. A separate image file is downloaded once and served from cache on every subsequent page. An inlined image is part of the HTML or CSS file and is re-sent in full every time that file loads. A site inlining 500KB of images ships an extra 665KB of text on every single page view.
What changed with HTTP/2
Data URIs became popular when browsers strictly limited simultaneous connections per domain, usually to six. Cutting the number of requests was a genuine optimisation. HTTP/2 multiplexes many requests over one connection, which shrinks that benefit dramatically.
The sensible modern use is narrow: inline only the tiny icons that appear on every page and rarely change. Leave everything else as separate files so caching can do its job.
Frequently asked questions
Why is the string larger than the original file?
data:image/webp;base64, prefix. That is exactly why shrinking first is recommended: a 100KB image becomes 133KB of text.When should I not use a data URI?
Does it affect page performance?
Can I use the string directly in <img src>?
src, in CSS url(), and on canvas. The "HTML img" form also gives you width and height attributes, which are worth keeping: they let the browser reserve the space and stop the page jumping around as things load.What you might need next
Image work rarely ends in one step. These pair up with Image to Base64 most often:
- 🎯 Compress to Size — Say 2MB and it lands under 2MB
- ⚡ PNG to WebP — Typically 30%+ smaller files
- 🌈 Extract Colours — Pull the key colours with HEX and CSS
Want to share the result? Upload turns images, photos, or videos into a short link with optional password, expiry, and view limits. Or head back to all 12 tools.
More tools
Compress Image
Shrink file size while keeping quality
Compress to Size
Say 2MB and it lands under 2MB
HEIC to JPG
iPhone photos into a format everything reads
View & Remove EXIF
See what your photo reveals, then strip it
ID Photo Sizes
Passport and ID sizes, print sheet included
Resize Image
By width, percentage, or exact size
Upscale Image
Enlarge up to 4× the original size
Crop Image
Drag to select the area to keep
Rotate Image
Batch rotate and flip
Add Watermark
Text watermark with position & opacity
Blur & Redact
Hide faces, plates, and personal data
Convert to JPG
PNG, GIF, and WebP to JPG
JPG to PNG
Convert to lossless PNG or WebP
PNG to WebP
Typically 30%+ smaller files
Split into Grid
Cut into a 3×3 Instagram grid
Merge Images
Join several images into one long strip
Favicon Generator
Every size plus a real .ico file
Extract Colours
Pull the key colours with HEX and CSS
SVG to PNG
Vector to raster at any size you want
Video Frame Grab
Grab any frame as a cover image
Video to GIF
Turn a clip into an animated GIF
Remove Background
For white and green-screen product shots
Image to Text (OCR)
Pull the text out of a screenshot
Images to PDF
Merge multiple images into one PDF
PDF to Images
Every page as a JPG or PNG