Base64 encoding converts binary image files into a text string that can be embedded directly in HTML, CSS, JSON, or any text-based file. This eliminates the need for a separate image file and HTTP request — useful for small images, icons, and email templates.
What Is Base64 Image Encoding?
Base64 encoding converts the binary data of an image (JPG, PNG, GIF, SVG) into an ASCII text string using 64 characters. The resulting string can be placed directly in HTML using a data URL: src="data:image/png;base64,iVBORw0KGgo...". The browser decodes this string back into an image without any file request.
When to Use Base64 Images
- Email HTML templates — email clients block external images by default; Base64 embeds avoid this
- Small icons and logos — embedding eliminates the HTTP request overhead
- Offline web apps — images work without a network connection
- CSS backgrounds for small images
- Single-page applications where you want to bundle all assets
How to Convert Image to Base64 Online
Visit imgresizr.com and upload your image. Open the Convert tool and select Base64 as the output. Copy the resulting Base64 string. Use it in your HTML as: <img src="data:image/png;base64,[your-string-here]"> or in CSS as: background-image: url("data:image/png;base64,[your-string-here]").
Base64 Limitations
- Base64 encoding increases file size by ~33% — use only for small images
- Large Base64 strings make HTML files heavy and difficult to cache
- Not suitable for images above 10–20KB — use regular file references instead
- Cannot be lazy-loaded like regular image files
Convert any image to Base64 encoding for free at imgresizr.com — instant copy-paste ready for your code.