Image to Base64 Converter Free Online
Free online image to Base64 converter. Get Base64 string or data URL for use in HTML and CSS.
Drop image here or click to upload
Supports JPG, PNG, WebP
Base64 image encoding is a technique that converts binary image data into a text string, allowing images to be embedded directly in HTML, CSS, JavaScript, JSON, and other text-based formats. Instead of referencing an image file with a URL, a Base64-encoded image is entirely self-contained in the code as a data URI. This free converter generates Base64 data URIs from any image file instantly in your browser, ready to use in your web development, mobile app, or data transfer workflows.
How to Convert an Image to Base64
Upload your image file
Click the upload area or drag and drop your image. The converter accepts PNG, JPG, JPEG, WebP, GIF, SVG, and BMP formats. After upload, the file name, dimensions, and original file size are shown.
Copy the Base64 data URI
The Base64 encoded string appears immediately in the output area as a complete data URI in the format: data:[mediatype];base64,[encoded data]. This complete data URI is what you embed in your code. The output shows the encoded length and the approximate size increase compared to the original file.
Use the data URI in your code
Copy the complete data URI and paste it wherever you need the image in your code. In HTML, use it as the src attribute of an img tag: <img src="data:image/png;base64,...">. In CSS, use it as a background-image value: background-image: url('data:image/png;base64,...'). In JSON or JavaScript, include it as a string value.
What Is a Base64 Data URI?
Base64 is an encoding scheme that converts arbitrary binary data (like image files) into a string of ASCII characters. The encoded string uses only 64 characters (A-Z, a-z, 0-9, +, /) and the = padding character, making it safe to embed in any text-based format including HTML, CSS, JSON, XML, and email.
A data URI is a URL scheme that includes the file data inline rather than referencing an external resource. The format is: data:[MIME type];base64,[Base64 encoded data]. For example, a small PNG image becomes: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...
When a browser encounters a data URI in an img src or CSS background-image, it decodes the Base64 string back to binary and uses it as the image - no network request needed.
When to Use Base64 Images (and When Not To)
Best use cases for Base64 images:
Small icons, logos, and UI elements (under 5-10KB) benefit from Base64 embedding because the overhead of an HTTP request to load a separate file is larger than the overhead of the Base64 encoding. For tiny images, Base64 eliminates a round trip to the server and can improve page load performance.
Email HTML templates often use Base64 images because email clients may block external image loading by default. Embedding images directly in the email HTML as Base64 ensures they display even when external resources are blocked.
Single-file HTML applications and reports that must be self-contained (everything in one .html file) use Base64 images to avoid any dependencies on external files or servers.
API responses where image data needs to be transmitted as part of a JSON payload use Base64 to include binary image data in the JSON string.
When NOT to use Base64 images:
Large images (over 10-20KB) should NOT use Base64. The 33% size increase from Base64 encoding, combined with the image data being included in the HTML/CSS file, means the browser cannot cache the image separately from the page. A separately referenced image file can be cached by the browser across page visits; a Base64 image in the HTML is re-downloaded with every page load.
Images used on multiple pages should be separate files so the browser caches them once. Base64 images in the CSS or HTML are duplicated across every page that includes them.
Base64 Performance Impact - The Real Cost
Base64 encoding affects performance in several ways, and understanding these tradeoffs helps you make informed decisions about when to use it:
Encoding size penalty: Base64 increases data size by exactly 33.33%. A 3KB icon becomes 4KB when Base64-encoded. A 10KB logo becomes 13.3KB. For tiny images, this overhead is negligible. For images over 20KB, the penalty becomes significant, especially on mobile connections.
HTTP request elimination: Each external image file requires an HTTP request - DNS lookup, TCP handshake, and file transfer. Even for a 1KB image, the request overhead can be 200-500ms on slow connections. Embedding as Base64 eliminates this request entirely, which can improve initial page load by hundreds of milliseconds for pages with many small icons.
Caching implications: External image files are cached by the browser - once loaded, they are reused on subsequent page visits with no network transfer. Base64 images embedded in HTML or CSS are part of the HTML/CSS file, so they are cached together with that file. If the same Base64 image appears in the CSS file used across the site, it is cached once. But if the same image is inlined as Base64 in the HTML of 10 different pages, the browser downloads it 10 times (once per page). This is why CSS-inlined Base64 (for images used site-wide) is more efficient than HTML-inlined Base64.
Decoding overhead: The browser must decode the Base64 string back to binary data to render the image. For small images, this decoding is instant (microseconds). For large images (hundreds of KB), decoding can take tens of milliseconds. This overhead is usually negligible compared to the time saved by eliminating an HTTP request, but it exists.
Rendering performance: Once decoded, Base64 images render identically to external images - there is no difference in quality or rendering speed. The only cost is the initial decoding step.
Best practice for maximum performance: Inline small, frequently-used icons in your main CSS file as Base64 so they are cached once and load with zero HTTP requests. Keep images over 10-15KB as separate files with proper cache headers.
Code Integration Patterns and Examples
Here are detailed examples of how to integrate Base64 images in various code contexts:
HTML img tag: Use the complete data URI in the src attribute. The browser treats it identically to an external URL.
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..."
alt="Red dot"
width="20"
height="20" />
CSS background-image: Embed in a CSS rule to eliminate an external file request. Particularly useful for small icons, bullets, or UI elements that appear on every page.
.icon-star {
background-image: url('data:image/svg+xml;base64,PHN2ZyB...');
background-size: contain;
width: 24px;
height: 24px;
}
React component: Store Base64 data URIs in JavaScript constants or import them from a module for reuse across components.
const logoDataUri = "data:image/png;base64,iVBORw0KGgo...";
function Header() {
return <img src={logoDataUri} alt="Logo" />;
}
JSON API payload: When an API must return image data as part of a JSON response, Base64 is the standard encoding method because JSON cannot contain raw binary data.
{
"user": {
"name": "Alice",
"avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRg...",
"thumbnail": "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
}
}
The client-side code can directly use the avatar value in an img src or CSS background-image without any additional decoding.
Email HTML: Email clients often block external images by default for security and privacy. Embedding images as Base64 data URIs ensures they display immediately when the email is opened.
<!DOCTYPE html>
<html>
<body>
<img src="data:image/png;base64,iVBORw0KGgoAAAA..."
alt="Company Logo" />
<p>Email content here</p>
</body>
</html>
Keep email images small (under 10-15KB each) and use sparingly - excessive Base64 images bloat the email HTML and can trigger spam filters.
Real-World Use Case Examples
Use Case 1: Embedding social icons in an email signature - An HTML email signature with Twitter, LinkedIn, and GitHub icons can embed the small icon images (each 1-2KB) as Base64 data URIs. This ensures the icons always display in the recipient's email client, even if external images are blocked by default. The icons are part of the signature HTML, so they are cached with the email and load instantly.
Use Case 2: Single-file HTML report generator - An application that generates analytics reports as standalone HTML files can embed chart images (generated server-side as PNGs) directly in the HTML as Base64. The resulting .html file is completely self-contained - it can be emailed, saved to disk, or opened in any browser without dependencies on external files or network access. The recipient can open the report offline with all charts and images intact.
Use Case 3: API response with user avatars - A mobile app retrieves a list of users from an API. The API includes user avatars as small Base64-encoded thumbnails (50×50px, 2-3KB each) directly in the JSON payload. The app displays the avatar immediately without making separate image requests for each user. This reduces total HTTP requests from 100+ (1 for the list + 1 per avatar) to just 1 (the list with embedded avatars), significantly improving load time on mobile connections.
Use Case 4: CSS icon library - A design system includes a set of 20 small UI icons (chevrons, checkmarks, close buttons) used across the entire website. Rather than loading 20 separate SVG files, the icons are Base64-encoded and embedded in the main CSS file as background-image rules. Each icon is defined in a class (.icon-check, .icon-close) and loads with zero additional HTTP requests. The CSS file is cached once, and all icons are available instantly on every page.
Use Case 5: Browser extension or bookmarklet - A browser extension that inserts a custom UI element on web pages needs to include icon images. Because the extension runs in a sandboxed environment and cannot easily reference external files, the icons are embedded as Base64 data URIs in the extension's JavaScript or CSS. This makes the extension self-contained and ensures icons always load regardless of network connectivity.
Use Case 6: PDF generation from HTML - A server-side service converts HTML to PDF using a headless browser (Puppeteer, Playwright). The HTML template includes images for logos and graphics. Embedding these as Base64 ensures they are included in the PDF even if the headless browser does not have network access or the external image URLs become unavailable. The generated PDF is self-contained with all images embedded.
When Base64 Hurts Performance - Anti-Patterns to Avoid
Here are common misuses of Base64 that degrade performance rather than improving it:
Anti-pattern 1: Inlining large images in HTML - Embedding a 200KB hero image as Base64 in the page HTML bloats the HTML file to 266KB (33% penalty). The browser must download this bloated HTML before it can start rendering the page. The HTML is not cached separately from the image, so every page load re-downloads the entire 266KB. Solution: keep images over 10-20KB as separate files with proper cache headers.
Anti-pattern 2: Duplicating the same Base64 image across multiple pages - If the same logo appears on 50 pages and is Base64-inlined in each page's HTML, the browser downloads the logo 50 times (once per page load). Solution: inline recurring images in the CSS file (cached once, used everywhere) or use separate image files.
Anti-pattern 3: Embedding Base64 images in dynamically loaded JavaScript - JavaScript bundles that include Base64 image data cannot be code-split effectively. The images are part of the JS bundle, so they must be downloaded and parsed before any rendering happens, blocking initial page load. Solution: load images as separate files or use dynamic imports to code-split image-heavy modules.
Anti-pattern 4: Using Base64 for images that need responsive sizes - A Base64 image is a fixed data string - you cannot use srcset or responsive image techniques to serve different sizes to different devices. If a mobile user loads a page with a desktop-sized Base64 hero image, they download the full large image even though their screen is small. Solution: use separate image files with srcset and sizes attributes for responsive delivery.