How to Convert an Image to Base64 for CSS and HTML
Base64 encoding converts an image file into a text string that can be embedded directly in CSS or HTML — no separate file request needed. This technique eliminates an HTTP request for each embedded image, which can improve performance for small icons, logos, and UI elements.
- Convert images to Base64 data URIs for inline embedding in CSS backgrounds, HTML img tags, and email templates.
- Covers data uri syntax.
- When to Use Base64 Images.
- When to Avoid Base64.
- Covers converting with the tool.
Data URI Syntax
A Base64-encoded image uses the data URI format:
background-image: url(data:image/png;base64,iVBORw0KGgo...);
or in HTML:
The format is: data:[media-type];base64,[encoded-data]. The Image to Base64 tool generates the complete data URI — upload any image and copy the output directly into your CSS or HTML.
When to Use Base64 Images
Small icons and UI elements under 2-4KB — the overhead of a separate HTTP request exceeds the Base64 size increase. Email templates where external image hosting is unreliable. Single-file HTML documents that need to be self-contained. CSS sprites for tiny repeated patterns (dots, noise textures). Inline SVGs can be Base64-encoded but are often better included as raw SVG markup.
When to Avoid Base64
Images larger than 4-5KB — the 33% size increase outweighs the saved HTTP request. The Base64 string can't be cached independently from the stylesheet. Hero images, photographs, and any large raster image should always be served as separate files. With HTTP/2 and HTTP/3 multiplexing, the HTTP request overhead for separate files is minimal anyway.
background-size animation or @property registered custom properties instead.Converting with the Tool
Upload any image (PNG, JPG, WebP, SVG, GIF) to the Image to Base64 tool. It returns the Base64 string, the complete data URI for CSS, and the complete tag for HTML. File size before and after encoding is shown so you can decide if Base64 is worth it for that particular image.