What Is Base64?
Base64 is a binary-to-text encoding scheme that converts binary data (like PNG images) into a string of ASCII characters. Every 3 bytes of binary data become 4 characters of Base64 text. This makes it safe to embed binary data in JSON payloads, HTTP requests, and other text-based protocols.
Why AI APIs Use Base64
When you send an image to Claude, GPT-5.6, or Gemini via API, the image travels inside a JSON request body. JSON cannot contain raw binary data. Base64 encoding converts your PNG into a text string that fits cleanly inside a JSON field. The API server decodes it back to binary on receipt.
The 33% Size Overhead
Base64 encoding increases data size by approximately 33%. A 100KB PNG becomes a ~133KB Base64 string. For most API calls, this overhead is negligible. However, for very large images or batch processing, it affects upload time and bandwidth costs.
Implementation in Python
Python's base64 module handles encoding in one line: base64.b64encode(png_bytes).decode('utf-8'). The .decode('utf-8') step converts the bytes object to a string suitable for JSON serialization.
Implementation in JavaScript
In the browser, use canvas.toDataURL('image/png') which returns a data URL with the Base64 string already embedded. In Node.js, use Buffer.from(pngBuffer).toString('base64'). Both produce identical Base64 output.
Base64 Encoding in Python and JavaScript
# Python
import base64
with open("dense_page.png", "rb") as f:
b64_string = base64.b64encode(f.read()).decode("utf-8")
print(f"Original: {len(open('dense_page.png','rb').read())} bytes")
print(f"Base64: {len(b64_string)} characters")
print(f"Overhead: {len(b64_string) / len(open('dense_page.png','rb').read()) * 100 - 100:.1f}%")
# JavaScript (Node.js)
# const fs = require('fs');
# const b64 = fs.readFileSync('dense_page.png').toString('base64');
# console.log(`Base64 length: ${b64.length}`);
Frequently Asked Questions
Conclusion
Visual token encoding is a practical, immediately deployable optimization that works with your existing AI stack. Whether you are a developer building pipelines or a founder managing API budgets, the ~88% input cost reduction compounds into real savings that improve your margins and extend your runway.
Ready to try it? Open PXINK and drop a file to see your savings instantly.