Convert images to Base64 encoded strings for embedding in CSS, HTML, or JavaScript. Multiple output formats available.
Convert images to Base64-encoded strings for embedding directly in HTML, CSS, or JSON. Upload a file, get the encoded string, and paste it wherever you need an inline image without a separate file request.
Initializing in your browser…
Convert images between PNG, JPG, WebP, AVIF, BMP formats. Features quality control, transparency support, and batch conversion for efficient workflow.
Resize and scale images with smart aspect ratio control. Supports custom dimensions, percentage scaling, social media presets, and batch resizing while maintaining image quality.
Crop and trim images with precision visual selection. Features aspect ratio presets (1:1, 16:9, 4:3), free-form cropping, grid overlays, and pixel-perfect adjustments for professional results.
You want to inline a tiny icon in CSS to remove one HTTP request.
Input
icon.png (480 bytes)
Data URI
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…");The bytes are Base64-encoded into a data URI you can paste directly into CSS or HTML, trading a network round-trip for ~33% size growth. The tool warns when a file is large enough that inlining would hurt more than help.
Convert images to Base64-encoded strings for embedding directly in HTML, CSS, or JSON. Upload a file, get the encoded string, and paste it wherever you need an inline image without a separate file request.
Upload a tiny PNG icon, pick the CSS Background format, and the tool emits background-image: url('data:image/png;base64,...') ready to paste into a stylesheet - eliminating one HTTP request for the icon.
For a 4000px JPEG, set Max Width to 800 and Quality to 0.8 before uploading. The tool canvas-resizes to 800px wide (height scaled to keep aspect ratio), re-encodes as JPEG, and the Base64 Size readout shows the much smaller resulting string.
Image to Base64 reads your file with the browser's FileReader.readAsDataURL, which produces a full data URI of the form data:image/png;base64,AAAA... directly in your tab - nothing is uploaded. From that single read it derives five copy-ready output forms you pick with the format buttons: Data URL (the complete data:image/...;base64,... string), Base64 Only (the raw payload, obtained by splitting the data URI on the comma and keeping the part after it, with no MIME prefix), CSS Background (background-image: url('...')), HTML Image (<img src="..." alt="Image" />), and Markdown (). Switching formats re-wraps the same encoded data instantly without re-reading the file. The output panel shows the exact character count of the string, and you can copy it to the clipboard or download it as a .txt file named after the source image.
An optional resize path lets you shrink large images before encoding so the resulting string stays manageable. The Max Width field defaults to 0 (no resize) with a step of 100; when you set a width smaller than the image's natural width, the tool draws the image into an HTML canvas scaled by maxWidth / origWidth (height scaled proportionally to preserve aspect ratio) and re-exports it via canvas.toDataURL using the original MIME type and the Quality value. Quality ranges from 0.1 to 1.0 with a default of 0.92 and a 0.05 step, but it only affects lossy re-encodes (JPEG/WebP); for PNG the quality argument is ignored by the canvas spec. If Max Width is 0 or the image is already narrower than the limit, the original FileReader data URI is used untouched so no recompression occurs.
The information panel computes real numbers from the decoded image: pixel Dimensions (width x height from an off-screen Image element), the Original Size in B/KB/MB, the detected Type (the MIME subtype uppercased, e.g. PNG/JPEG/WEBP), and the Base64 Size measured as output.length. That last figure makes the encoding's roughly +33% overhead visible - Base64 represents three bytes as four ASCII characters - which is the core tradeoff: inlining removes one HTTP request (handy for tiny icons, email templates, or sandboxes that block external file references) but the inlined bytes are not separately browser-cacheable and bloat the HTML or CSS that does get re-downloaded, so it is best reserved for small assets. Input accepts image/* (PNG, JPG, GIF, WebP, and others); non-image files are rejected with a toast, and the preview sits on a checkerboard background so transparency is obvious.
It eliminates a separate HTTP request, useful for small icons, email templates, or environments where external file references are not practical.
Yes, by about 33%. It is best used for small images (under 10KB) where the HTTP request overhead would be proportionally large.
Images are decoded, edited, and exported entirely inside this browser tab. No originals, exports, or metadata are uploaded.