Last updated
Size Considerations
Base64 encoding increases data size by approximately 33%. Keep this in mind when deciding whether to use Base64:
- Small icons and logos (under 5KB): Base64 is fine, saves an HTTP request
- Medium images (5KB–50KB): Consider whether the size increase is worth it
- Large files (over 50KB): Use direct binary transmission instead
The encoder displays both the original size and the encoded size so you can make an informed decision for each use case.
Examples
Example 1: Encoding Plain Text
Encode any text string to Base64 by pasting it into the input field:
Input: {"userId": 42, "role": "admin"}
Output: eyJ1c2VySWQiOiA0MiwgInJvbGUiOiAiYWRtaW4ifQ==This is useful when you need to pass structured data through a system that only accepts plain text, such as a URL parameter or a custom HTTP header.
Example 2: Creating a Data URL for an Image
Upload a small PNG icon and the encoder produces a complete data URL ready to use in HTML or CSS:
<!-- HTML: embed image without a separate file request -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9
AAAAFUlEQVR42mNk+M9Qz0AEYBxVSF+FABJADveRPNEyAAAAAElFTkSuQmCC" alt="icon" />
/* CSS: embed background image */
.icon {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoA...');
width: 10px;
height: 10px;
}This technique eliminates an HTTP request for small assets. The tool automatically detects the MIME type and formats the data URL correctly.
Example 3: Encoding Credentials for HTTP Basic Auth
HTTP Basic Authentication requires credentials encoded as Base64 in the format username:password:
Input: myapp_service:xK9mP2nQr7vBcDeFgHj
Output: bXlhcHBfc2VydmljZTp4SzltUDJuUXI3dkJjRGVGZ0hq
# Use in curl
curl -H "Authorization: Basic bXlhcHBfc2VydmljZTp4SzltUDJuUXI3dkJjRGVGZ0hq" \
https://api.example.com/endpoint
# Use in JavaScript fetch
fetch('https://api.example.com/endpoint', {
headers: {
'Authorization': 'Basic ' + btoa('myapp_service:xK9mP2nQr7vBcDeFgHj')
}
});