Image to Base64
Convert images to Base64 format
Arrastra una imagen aquí o
PNG, JPG, GIF, SVG, WebP (máx. 5MB)
Imagen a Base64
Convierte imágenes a formato Base64 para incrustarlas directamente en HTML o CSS. Útil para pequeños iconos y evitar peticiones HTTP adicionales. Todo el procesamiento ocurre localmente en tu navegador.
Convert Image to Base64 Online - Encode Images for CSS and HTML
What is Base64 and why embed images?
Base64 is an encoding that represents binary data such as an image as ASCII text. A Data URI (data:image/png;base64,...) lets you place the image directly in CSS or HTML with no separate file. The advantages are one fewer HTTP request, an image that loads with the CSS or HTML so there is no flash of unstyled content, and a simpler deployment with fewer files. The drawbacks are a size increase of roughly 33%, no independent caching, and a stylesheet that balloons if the image is large. It suits small icons under about 5 KB, sprites and critical above-the-fold images.
Using Base64 images in CSS, HTML and JavaScript
In CSS: background-image: url(data:image/png;base64,iVBORw0KGgo...). In HTML: <img src="data:image/png;base64,iVBORw0KGgo...">. In JavaScript, assign the same string to an element src. For SVG you can skip Base64 entirely and use data:image/svg+xml with percent encoding, which is more efficient. The MIME type must match the format: image/png, image/jpeg, image/gif, image/svg+xml or image/webp. This tool detects the type and builds the complete Data URI for you.
When to use Base64 and when to avoid it
Use Base64 when the image is under 5 to 10 KB, when it is critical to the first render, when you want to cut HTTP requests on slow connections, or when you need to embed it in HTML email, since many clients block external images. Avoid it when the image is large, when it is reused across many pages and would benefit from file caching, when you need lazy loading, or when the image changes often and would invalidate the whole stylesheet. Build tools such as Webpack and Vite can automate the decision, inlining small images and leaving large ones as files.
If you work with this tool, you will probably also find these useful Base64 Encoder, Gradient Generator, Flexbox Generator, Regex Tester.
Frequently asked questions
Why is the Base64 string larger than the original file?
Base64 encodes every 3 binary bytes as 4 ASCII characters, which grows the payload by about 33%. A 10 KB image becomes roughly 13.3 KB. If your CSS is served with gzip or Brotli, compression narrows that gap considerably, and for small images the saved HTTP request can outweigh the extra bytes.
Can I use Base64 for large images?
Technically yes, but it is a bad idea. A 100 KB image becomes about 133 KB of extra CSS that must be downloaded and parsed before any style renders, and it cannot be cached independently. For large images, use normal files with lazy loading and appropriate HTTP caching.
Does the browser decode Base64 on every load?
The browser decodes it each time it parses the CSS or HTML containing it. That is fast for small images but can hurt on pages carrying many large Base64 payloads. An image that appears repeatedly is more efficient as a separate file, which the browser caches in decoded form.
How do I convert Base64 back into an image?
In JavaScript, build a Blob from the decoded Base64 and create an object URL with createObjectURL(). The full Data URI carries the MIME type, so the conversion already knows the format. This tool can also perform the reverse conversion for you.