Img to Base64

Base64 encoding converts binary image data into a text string using 64 ASCII characters. This allows images to be embedded directly in HTML, CSS, or JSON without separate file requests. The encoded string is roughly 33% larger than the original binary data.

In HTML, use the data URI as the src attribute of an img tag: <img src="data:image/png;base64,..." />. In CSS, use it as a background-image: background-image: url(data:image/png;base64,...). This eliminates the need for a separate HTTP request.

Base64 encoding represents 3 bytes of binary data using 4 ASCII characters, resulting in approximately a 33% size increase. This trade-off is acceptable for small images like icons and logos where reducing HTTP requests is more beneficial than saving bandwidth.

Use Base64 for small images (under 10KB) like icons, logos, and simple graphics where eliminating HTTP requests improves performance. Avoid it for large images as the increased HTML/CSS file size can slow down page rendering.

All modern browsers support data URIs including Chrome, Firefox, Safari, Edge, and Opera. Internet Explorer 8+ supports them with a 32KB size limit. There are no practical size limits in modern browsers.