Base64 Encoding Images: When It Helps and When It Hurts Performance

Base64 encoding converts binary data (like images) into ASCII text that can be embedded directly in HTML, CSS, or JSON. Instead of referencing an external file, the image data lives inline in your code: <img src= "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA..." alt= "icon" > This eliminates an HTTP request. But the Base64 representation is 33% larger than the original binary. So when does inlining images help, and when does it hurt? How Base64 encoding works Binary data is a sequence of bytes (8-bit values, range 0-255). Base64 maps every 3 bytes of input to 4 ASCII characters using an alphabet of 64 characters: A-Z, a-z, 0-9, +, and /. 3 bytes (24 bits) → 4 Base64 characters (6 bits each) The 33% size increase (4/3 ratio) is the fundamental trade-off. A 3 KB icon becomes 4 KB in Base64. A 100 KB image becomes 133 KB. When Base64 inlining helps Small icons and SVGs (under 2 KB). The overhead of an HTTP request (DNS lookup, TCP connection, TLS handshake, request/response) often e