Base64 Image Converter

What is Base64 encoding?

Base64 is a binary-to-text encoding scheme that converts binary data into a string using 64 printable ASCII characters (A–Z, a–z, 0–9, +, /). For images, Base64 encoding lets you embed image data directly inside HTML, CSS, JSON, or XML as a data URL — no separate file or HTTP request required.

How to use a Base64 image in HTML and CSS

• HTML img: <img src="data:image/png;base64,iVBORw..." />
• CSS background: background-image: url('data:image/png;base64,iVBORw...')
• JSON payload: Include the raw Base64 string (without data: prefix) when the API accepts base64-encoded image data.
• SVG in CSS: SVGs can be URL-encoded instead of Base64 for slightly smaller size.

Base64 size trade-off

Base64 encoding increases file size by approximately 33%. A 100 KB PNG becomes ~133 KB as Base64. This is acceptable for small images (icons, logos under 10 KB) but significantly degrades performance for larger images. For production websites, always serve large images as regular files from a CDN and reserve Base64 for tiny inline assets.