Image to Base64: Inline Images in HTML & CSS

What Is Base64 Image Encoding?

Base64 encoding converts binary image data into a text string that can be embedded directly in HTML or CSS. Instead of referencing an external image file via a URL, the entire image data is included inline as a data URI.

A regular image reference: <img src="logo.png" alt="Logo">

The same image as a Base64 data URI: <img src="data:image/png;base64,iVBORw0KGgoAAAA..." alt="Logo">

The Base64 string represents the full image data encoded in ASCII characters. The browser decodes the string back to binary and renders the image exactly as it would from an external file. No separate HTTP request is needed to fetch the image — it is already present in the HTML or CSS source.

The encoding process increases the data size by approximately 33% (every 3 bytes of binary data become 4 characters of Base64 text). A 10KB PNG becomes roughly 13.3KB of Base64 text. This trade-off — larger payload but fewer requests — is the central consideration when deciding whether to use Base64 encoding.

When to Use Base64 Images

Base64 encoding is beneficial in specific scenarios:

Small icons and decorative images: Tiny images (under 2-4KB) benefit most from inlining. The overhead of an HTTP request (DNS lookup, TCP handshake, request/response headers) can exceed the transfer time for the image itself. Inlining eliminates this overhead entirely. Icons, bullet points, small logos, and UI sprites are good candidates.

Email HTML: Many email clients block external image loading by default, showing broken image placeholders until the user explicitly allows images. Base64-encoded images display immediately because they are part of the email body, not external resources. This is particularly useful for logos, icons, and layout elements in email templates.

Single-file distribution: When you need to distribute a complete web page as a single HTML file — for documentation, reports, or offline viewing — Base64 images eliminate external dependencies. The HTML file is self-contained and can be opened anywhere without an internet connection or accompanying asset files.

CSS backgrounds: Small background patterns, gradients represented as images, and hover state icons can be embedded directly in CSS: background-image: url(data:image/svg+xml;base64,...); This bundles the images with the stylesheet, ensuring they load as soon as the CSS loads.

Avoiding CORS issues: When working with images from different origins in canvas elements, external images may trigger CORS restrictions. Base64-encoded images bypass this because there is no cross-origin request.

When Not to Use Base64

Base64 encoding is the wrong choice for:

Large images: A 100KB photograph becomes 133KB in Base64. The browser cannot cache Base64 images separately from the HTML document. If the same image appears on multiple pages, it is re-downloaded with every page load. An external file would be cached after the first load.

Frequently changing content: If your page content changes often but images stay the same, Base64 images force the entire HTML document to be re-downloaded even when only the text changed. External images would remain cached.

Multiple occurrences: If the same image appears several times on a page, each occurrence duplicates the full Base64 string. An external file reference is just a URL repeated — the actual image data is loaded once.

Performance-critical pages: Base64 images increase the initial HTML payload size. The browser cannot begin rendering Base64 images until the entire HTML document is parsed, whereas external images can begin loading as soon as their <img> tag is encountered. For above-the-fold content, this can delay the Largest Contentful Paint (LCP) metric.

Base64 in CSS

Embedding images in CSS is a common use case for Base64. Small background images, icons referenced in pseudo-elements, and decorative patterns can be inlined directly in the stylesheet:

.icon-check::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url(data:image/svg+xml;base64,PHN2Zy...);
background-size: contain;
}

For SVG images in CSS, you have two encoding options: Base64 and URL-encoded UTF-8. URL encoding is often smaller because SVG is text-based:

background-image: url("data:image/svg+xml,%3Csvg xmlns='...'%3E...%3C/svg%3E");

This encodes the SVG's special characters (angle brackets, quotes) but keeps the rest as readable text, which compresses better with Gzip than Base64 does.

Size Optimization Tips

Minimize the Base64 overhead with these techniques:

• Optimize the image first. Compress the original image as much as possible before encoding. Every byte saved in the original saves 1.33 bytes in the Base64 output.
• Use SVG when possible. SVG images are text-based and compress well. A simple icon as SVG might be 500 bytes; the same icon as PNG might be 2KB. The SVG produces a much smaller Base64 string.
• Set a size threshold. As a rule of thumb, inline images under 4KB and use external files for anything larger. Adjust this threshold based on your specific performance measurements.
• Use build tools for automation. Webpack's url-loader and Vite's asset handling can automatically inline images below a size threshold and use external files for larger ones. This optimizes automatically without manual encoding.
• Consider WebP format. WebP images are typically 25-35% smaller than PNG. Converting to WebP before Base64 encoding reduces the inline data size.

Convert Images to Base64 Online

Our Image to Base64 converter encodes any image file (PNG, JPEG, GIF, SVG, WebP) into a Base64 data URI ready to paste into HTML or CSS. Upload your image and get the complete data URI string including the MIME type prefix.

The tool displays the original file size, the Base64 string size, and the size increase percentage so you can make an informed decision about whether inlining is worthwhile for your specific image. Copy the data URI with one click.