How do I convert an image to Base64 online?
Drag and drop an image (or click to upload) and instantly get its Base64-encoded data URI string. You can copy it as a CSS background-image, HTML img src, or raw Base64. You can also decode a Base64 string back to a viewable image. Everything runs in your browser — your images never leave your device.
[16×16 PNG favicon] Size: 1.2 KB
data:image/png;base64, iVBORw0KGgoAAAANSUhEU... Length: 1,608 characters (+34%)
Image to Base64 Converter
Convert images to Base64 data URIs or decode Base64 strings back to images. All processing happens in your browser.
Drop an image here or click to browse
PNG, JPG, GIF, SVG, WebP, ICO, BMP — max 10 MB
About Image to Base64 Conversion
Base64 encoding converts binary image data into an ASCII text string. This is useful for embedding images directly in HTML, CSS, or JSON without separate file requests.
Data URI format: data:image/png;base64,iVBORw0KGgo... — ready to use in <img src="..." /> tags or CSS url(...).
Size overhead: Base64 increases data size by approximately 33%. For small images (icons, logos under ~5 KB), the trade-off of eliminating an HTTP request is usually worth it. For larger images, serving the file directly is more efficient.
Supported formats: PNG, JPEG, GIF, SVG, WebP, ICO, and BMP. All processing runs entirely in your browser — your images are never uploaded to any server.
Tips & Best Practices
Inline images under 4KB, external files above
Base64 encoding increases size by 33%, but eliminates an HTTP request. For tiny icons and sprites under 4KB, the round-trip savings outweigh the size increase. Above 4KB, a separate file with caching headers is more efficient. Most bundlers (Webpack, Vite) have this threshold configurable via asset size limits.
Base64 images bypass browser image caching
When you inline a Base64 image in CSS or HTML, the browser cannot cache it separately. Every page load re-downloads the encoded data as part of the document. For images used across multiple pages (logos, icons), serve them as files with Cache-Control headers for maximum performance.
Validate image MIME types before encoding
A file with a .png extension might actually be a script or executable. Always verify the file's magic bytes (file signature) match the expected format before accepting user uploads. For Base64-encoded images in data URIs, browsers enforce the MIME type — but your server-side code should too.
Use data URIs for placeholder images and loading states
A 1x1 transparent PNG as Base64 is just 68 characters. Use it as a placeholder src while lazy-loading full images: src="data:image/png;base64,iVBOR..." data-src="real-image.jpg". This prevents layout shift (CLS) without any HTTP request for the placeholder.
Frequently Asked Questions
How do I embed a Base64 image in HTML or CSS?
What is the maximum recommended size for Base64 images?
Which image format should I convert to Base64?
Related Convert Tools
SVG to JSX Converter
Convert SVG to JSX or a React/TypeScript component — camelCase attributes, style objects, forwardRef, memo, props spread
OpenAPI to TypeScript
Convert OpenAPI 3.x and Swagger 2.0 specs to TypeScript interfaces and types with $ref resolution, allOf/oneOf/anyOf, enums, and API operation types
JSON to Zod Converter
Convert JSON or JSON Schema to Zod validation schemas with $ref resolution, allOf/oneOf/anyOf, enum, format constraints, and required/optional fields
GraphQL to TypeScript
Convert GraphQL SDL schemas to TypeScript interfaces, types, enums, unions, and operations