How Do You Use Base64 Images in CSS?
Use the url() function with a data URI as the value. The data URI contains the MIME type and the Base64-encoded image data: background-image: url('data:image/png;base64,...');. The Base64 string replaces an external file URL. This eliminates an HTTP request for the image, embedding it directly in the CSS file.
.icon-notification {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAH0lEQVQ4T2NkoBAwUqifYdQAhtEwYBgNA4bRMGAYDQMAcKAEEUQMKqcAAAAASUVORK5CYII=');
background-size: 16px 16px;
background-repeat: no-repeat;
width: 16px;
height: 16px;
display: inline-block;
}The browser decodes the Base64 string and renders the image as if it were loaded from an external file. No additional HTTP request is made. The Base64 Embed Code Generator produces CSS-ready code with the data URI already formatted. For encoding an image file to Base64, use the Base64 Image Encoder.
What CSS Properties Support Base64 Data URIs?
Any CSS property that accepts the url() function supports Base64 data URIs. The browser treats data URIs identically to external URLs in all CSS contexts. The table below lists the CSS properties where Base64 data URIs are commonly used.
| CSS Property | Data URI Support | Common Use |
|---|---|---|
background-image | Yes | Icons, patterns, gradients |
list-style-image | Yes | Custom bullet points |
cursor | Yes | Custom cursors |
border-image | Yes | Decorative borders |
content (::before/::after) | Yes | Pseudo-element images |
@font-face src | Yes | Inline web fonts |
The background-image property is the most frequent use case for Base64 in CSS. Small UI icons, loading spinners, and repeating patterns are common candidates. The content property on ::before and ::after pseudo-elements accepts data URIs wrapped in url(), enabling icon insertion without additional HTML markup.
How Do You Embed Base64 Fonts in CSS?
Use the @font-face rule with a data URI in the src property. The MIME type for WOFF2 fonts is font/woff2. Embedding fonts as Base64 eliminates the separate font file request and avoids FOIT (Flash of Invisible Text) caused by slow font loading.
@font-face {
font-family: 'CustomIcons';
src: url('data:font/woff2;base64,d09GMgABAAAAA...') format('woff2');
font-weight: normal;
font-style: normal;
font-display: block;
}Font files are typically 20-100 KB, which produces 27-133 KB of Base64 text. This is larger than the recommended 10 KB limit for Base64 in CSS. Embed fonts as Base64 only when reducing HTTP requests is a priority and the font file is small (under 30 KB). For larger font files, serve them as external WOFF2 files with appropriate cache headers. For more about MIME types used in data URIs, see the Base64 MIME Types Reference.
What Are the Performance Implications of Base64 in CSS?
CSS files are render-blocking resources. The browser cannot render any content until all CSS files in the <head> finish downloading and parsing. Large Base64 strings increase CSS file size, directly delaying first paint. A 10 KB icon becomes approximately 13.3 KB as Base64 text after the 33% encoding overhead.
Benefits of Base64 in CSS:
- Eliminates HTTP requests for each embedded asset
- No CORS issues since the data is inline
- Works offline once the CSS file is cached
- Simplifies deployment by reducing file count
Drawbacks of Base64 in CSS:
- No separate caching; images re-download with every CSS change
- Increases CSS parse time proportional to file size
- Blocks rendering until the full CSS file loads
- 33% size overhead compared to binary files
For a detailed analysis of when Base64 encoding outperforms external files, see Base64 vs Binary. Use the Base64 Size Calculator to determine the encoded size of an asset before embedding.
What Is the Recommended Size Limit for Base64 in CSS?
Keep individual Base64 assets under 10 KB (before encoding) for optimal performance. After Base64 encoding, a 10 KB file becomes approximately 13.3 KB of text. Total Base64 data across an entire CSS file should stay under 50 KB to avoid significant render-blocking delays.
For multiple small icons, consider these approaches based on count and size:
- 1-5 icons under 5 KB each: Base64 data URIs in CSS
- 6-20 icons: CSS sprite sheet as a single external file
- 20+ icons: SVG icon font or SVG sprite with
<use>references
Images that exceed 10 KB should be served as external files with browser caching headers. The HTTP/2 protocol reduces the cost of multiple small requests through multiplexing, which diminishes the benefit of inlining assets. On HTTP/2 connections, external files with caching are often faster than Base64 embedding for any file over 2-3 KB.
How Do You Generate Base64 CSS Code?
Upload an image to the Base64 Embed Code Generator to receive CSS-ready code with the data URI already formatted. The tool outputs a complete CSS rule including background-image, background-size, and dimension properties. Alternatively, use the Base64 Image Encoder to get the raw Base64 string, then construct the CSS rule manually.
/* Generated CSS for a 24x24 icon */
.icon-star {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PC9zdmc+');
background-size: 24px 24px;
background-repeat: no-repeat;
width: 24px;
height: 24px;
}
For SVG images, the SVG to Base64 Converter handles the encoding and outputs the correct image/svg+xml MIME type. To understand the full data URI syntax used in these CSS rules, see the Data URI Guide. For more about how Base64 encoding works at the byte level, read What is Base64.
Frequently Asked Questions
Does Base64 in CSS affect page load speed?
Small images under 5 KB improve load speed by eliminating HTTP requests. Each saved request avoids 50-200 ms of round-trip latency. Large images hurt load speed because CSS files are render-blocking. A 100 KB Base64 string in a CSS file delays first paint by the time required to download and parse that extra data before any content renders on screen.
Can I use SVG Base64 in CSS background-image?
Yes. Use the MIME type image/svg+xml with the data URI format: background-image: url('data:image/svg+xml;base64,...');. SVG files encode well as Base64. For simple SVGs, percent-encoded (unencoded) SVG in data URIs without the ;base64 flag can produce smaller strings since SVG is text-based XML. The SVG to Base64 Converter handles the encoding automatically.
Is Base64 CSS cached by browsers?
Base64 data embedded in a CSS file is cached as part of that CSS file, not independently. When the browser caches style.css, all Base64 strings inside it are cached together. If the CSS file changes for any reason, the entire file including all Base64 data must be re-downloaded. External image files can be cached independently with their own cache headers and expiration times.
How do I convert an image to Base64 for CSS?
Use the Base64 Image Encoder to upload an image file and receive the Base64 string. Then wrap it in the CSS url() function with the data URI prefix: url('data:image/png;base64,...'). The Embed Code Generator produces CSS-ready code with the data URI already formatted for direct use in stylesheets.
Should I use Base64 or CSS sprites?
Use Base64 for 1-5 small images (under 5 KB each) where eliminating individual HTTP requests is the priority. Use CSS sprites when you have many small images (10+) that can be combined into a single file. Sprites require one HTTP request for all images and allow independent caching. Base64 avoids the complexity of managing background-position values that sprites require for each icon.