What is Base64 image encoding?
Base64 is a way to represent binary data — like an image — using only 64 plain text characters. A Base64 image can be placed directly inside HTML, CSS, JSON or JavaScript as a data URI, so the browser does not need to make a separate request to download it.
A data URI looks like this: data:image/png;base64,iVBORw0KGgo…. The first part tells the browser the file type; the rest is the encoded image.
When should you use Base64 images?
- Small icons and logos (under ~5 KB) — saves an HTTP request.
- HTML email templates — some email clients block external images but show embedded ones.
- Single-file HTML documents, reports and offline pages.
- APIs and JSON — sending an image as a text field.
When you should not
Base64 makes data about 33% larger than the original file and the image cannot be cached separately by the browser. For large photos, a normal image file is faster. Compress big images first with reduce image size in KB, or convert them to an efficient format.
Output formats
- Data URI — use it in
src,hreforurl(). - Base64 only — the raw string without the prefix, for APIs and databases.
- CSS background — a ready
background-imagerule. - HTML <img> — a complete tag with width and height for better page layout.