When should I embed images as Base64?

Base64 embedding is best for small images (icons, logos under 5KB) where eliminating an HTTP request outweighs the size overhead. Base64 encoding increases file size by ~33%, so it is not recommended for large images or images used on multiple pages.

How do I use a Base64 image in CSS?

Use it as: background-image: url("data:image/png;base64,YOUR_BASE64_HERE"). This is especially useful for CSS that is inlined or for email templates where external image URLs are blocked.

How do I use it in an HTML img tag?

Set the src attribute to the full data URI: . The browser renders it just like a regular image URL.

Is my image uploaded to your server?

No. The entire encoding process happens in your browser using the FileReader API. Your image data never leaves your device.

🖼️

Base64 Image Encoder

Convert images to Base64 data URIs for HTML, CSS, and JavaScript. Supports JPEG, PNG, WebP, SVG. Free, no upload to server.

About this tool

Convert any image (JPEG, PNG, WebP, GIF, SVG) to a Base64-encoded data URI for embedding directly in HTML, CSS, or JavaScript — eliminating an extra HTTP request. Everything runs in your browser; your image is never uploaded.

🖼️

Click or drag an image here

PNG, JPG, GIF, SVG, WebP