If you've seen a long string starting with data:image/jpeg;base64,/9j/4AAQ... in HTML or CSS code, that's a Base64-encoded image. Here's what it is and when to use it.
What is Base64?
Base64 is an encoding scheme that converts binary data (like an image file) into a text string. This lets you embed images directly in code without needing a separate image file or URL.
When to use Base64 images
- Email templates: Some email clients block external images — Base64 embeds the image directly in the HTML
- CSS backgrounds: Embed small icons or patterns directly in your stylesheet
- Single-file HTML pages: Create a truly self-contained HTML document with all images embedded
- JSON APIs: Pass image data as a text field in a JSON payload
- Small icons: Base64 saves an HTTP request for tiny images
When NOT to use Base64
Base64 increases file size by ~33%. For large images, this means larger HTML files, slower parsing, and no browser caching benefit. For any image over ~10KB, a standard URL reference is almost always better.
How to convert an image to Base64
Go to ImageZen4u Image to Base64. Drop your image. Click Convert — the full data URL appears instantly. Click Copy and paste it into your HTML, CSS, or JSON.