Image to Base64
Convert images to Base64 data URLs for embedding in HTML/CSS
Maximum file size: 5MB. Supported formats: PNG, JPG, GIF, SVG, WebP
1. What is Base64 Image Encoding?
Base64 encoding converts image files into text strings that can be embedded directly in HTML or CSS. This eliminates separate HTTP requests for images but increases file size by approximately 33%.
2. How does it work?
Base64 encoding converts binary image data into ASCII text by grouping binary data into 6-bit chunks and mapping each chunk to a character from a 64-character set (A-Z, a-z, 0-9, +, /). This encoding allows binary data to be safely transmitted in text-based formats like HTML, CSS, or JSON. The encoded string starts with a data URL prefix (e.g., 'data:image/png;base64,') followed by the Base64-encoded image data.
When to Use Base64 Images
- Small icons and logos: Reduce HTTP requests for tiny images
- Email templates: Embed images when hosting is not available
- Data URIs in CSS: Background images and sprites
- Offline applications: Self-contained HTML files
3. Examples
HTML Usage
<img src="data:image/png;base64,iVBORw0KG..." alt="Image" />CSS Usage
background-image: url("data:image/png;base64,iVBORw0KG...");