Image to Base64 Converter
Upload an image to generate a Base64 data URL that can be embedded directly in HTML <img> tags or CSS background-image. Decode Base64 strings back to downloadable images.
Image to Base64
Convert images to data URLs for HTML/CSS embedding
Click or drag image here
Base64 encoding converts binary image data to an ASCII text string using base-64 digit set. Data URL format: data:image/ext;base64,<encoded-string>. The embedded image renders directly in browser without a separate file request.
How Base64 Image Embedding Works
Base64 encoding converts binary image data to an ASCII text representation that can be embedded directly in HTML and CSS:
**Data URL format**: `data:[<mediatype>][;base64],<data>`
Example for a JPG image: `data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wCEAAkGBxISEhUQDxMTEhIWFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFR/2wCEBAQGBgkGBoYHBwcKDw0NDg0NDg0NDg0NDg0NDg0NDg0NDg0NDg0NDg0NDg0NDg0NDg0NDg0NDg0NDg0/ w/ Arial Black, sans-serif 0 0 0 0`
**Embedding in HTML**: `<img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wCEAAkGBxI..." alt="Description">`
**Embedding in CSS**: `background-image: url('data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wCEAAkGBxI...');`
**Benefits**: - No separate HTTP request for the image file (reduces load time for small images) - Image is included directly in HTML/CSS source (useful for emails, inline styles) - Useful for small icons, logos, and decorative images (< 30 KB recommended)
**Limitations**: - Increases HTML/CSS file size (Base64 is ~33% larger than raw binary) - Not suitable for large images (can kilobytes the page source) - Some email clients strip Base64 data URLs - Browser support is universal, but some older systems may have issues
- 100% private - images never uploaded to server
- Instant data URL generation
- Copy-to-clipboard ready
- Decode back to image file
Worked Example
Example: Embedding a 20 KB logo image in HTML:
Original logo.jpg file: 20 KB (needs separate HTTP request)
Base64 data URL: `data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/...(lengthy string)...=`
HTML usage: ```html <img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/..." alt="CalculatorPlus Logo" width="100"> ```
Result: The logo loads instantly with the page (no extra request), at the cost of ~26 KB added to the HTML source (20 KB × 4/3 Base64 overhead).
**Rule of thumb**: Use Base64 for images under 30 KB. For larger images, use separate file requests via <img src="filename.jpg"> to avoid bloating the HTML/CSS source.
Supported Formats
- JPG/JPEG: Works, data URL starts with `data:image/jpeg;base64,` - PNG: Works, starts with `data:image/png;base64,` - GIF: Works, starts with `data:image/gif;base64,` - SVG: Works (vector data, starts with `data:image/svg+xml;base64,`) - WebP: Supported in modern browsers - BMP: Supported but uncommon for web embedding - TIFF: Limited support, may not render correctly in all browsers
Related Calculators
Image Resizer
Resize images by specifying width and height, maintain aspect ratio.
Open calculator →Image Compressor
Compress images to reduce file size with quality slider, before/after comparison.
Open calculator →Format Converter
Convert between JPG, PNG, WebP, and SVG image formats.
Open calculator →Pixel Art Resizer
Resize pixel art while preserving sharp edges using nearest-neighbor scaling.
Open calculator →Frequently Asked Questions
Is Base64 encoding safe for sensitive images?
Base64 is not encryption - it's just an encoding format. The image data is fully visible once decoded. For sensitive images, use actual encryption and separate file delivery, not Base64 embedding.
What's the maximum image size for Base64 embedding?
Practical limit is ~50 KB (≈400 Base64 characters). Larger sizes start bloating the HTML/CSS source significantly. For images over 50 KB, use separate file requests via <img src="..."></p>
Does Base64 increase page load time?
For small images (< 30 KB), Base64 can reduce load time by eliminating an HTTP request. For larger images, the increased HTML/CSS size can slow page parsing. The crossover point is typically around 30-50 KB.
Looking for a different calculator?
CalculatorPlus has free tools across finance, construction, math, health and more — each one showing the formula and a worked example.