Base64 Encoder / Decoder

Base64 encodes binary data (images, fonts, files) as ASCII text using 64 characters (A-Z, a-z, 0-9, +, /). It's used to embed images directly in CSS or HTML as data URIs, eliminating extra HTTP requests at the cost of ~33% larger file size.

Use Base64 for small images under 5KB — icons, tiny logos, simple SVGs. The encoding overhead (~33%) is offset by saving an HTTP request. For larger images, a regular file is more efficient since Base64 bloats CSS/HTML and can't be cached independently.

Use it as a data URI: background-image: url('data:image/png;base64,iVBOR...'). This tool converts your image file to the complete data URI you can paste directly into CSS. SVGs can also be URL-encoded instead of Base64 for smaller output.

Base64 images increase CSS/HTML file size by ~33% and can't be cached separately. They block rendering since they're inline. For critical above-the-fold icons (<2KB), the tradeoff is worth it. For anything else, use regular image files with proper caching headers.