Codificación
Data URI / Imagen Base64
Codificación de una imagen en Data URI (data:image/…;base64,…) para insertarla en CSS/HTML, y decodificación de un Data URI o Base64 sin procesar de vuelta a un archivo — todo directamente en el navegador.
La vista previa de la imagen aparecerá aquí.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Artículo sobre esta herramienta: Data URI: cuándo incrustar imágenes directamente en el código
Preguntas frecuentes
¿Cuándo conviene usar un Data URI en vez de un archivo aparte?
Es útil para imágenes pequeñas (iconos, texturas) que quieres incluir directamente en CSS o HTML sin una petición HTTP extra. No sustituye a los archivos normales para imágenes grandes, porque aumenta el tamaño de la página y no se cachea como un archivo independiente.
¿Hay un límite de tamaño para los Data URI?
Sí, aunque el estándar no fija un límite estricto, en la práctica navegadores y clientes de correo imponen límites de tamaño (algunos correos truncan Data URI muy largos), por lo que se recomienda reservarlos para imágenes pequeñas.
¿Se sube mi imagen a un servidor para generar el Data URI?
No, la lectura del archivo y la codificación a Base64 ocurren completamente en tu navegador; la imagen nunca se envía a ningún servidor.
¿Se puede usar un Data URI para SVG sin Base64?
Sí. SVG es texto (XML), así que en vez de Base64 basta con percent-encoding de los caracteres especiales: data:image/svg+xml,%3Csvg...%3E. Este enfoque es más compacto y sigue siendo editable directamente en un archivo CSS.
¿Se puede insertar un Data URI en un atributo href o en background-image?
Sí, el Data URI funciona en cualquier lugar donde se espere una referencia a un recurso: en src, href, background-image en CSS e incluso en @import. La sintaxis y los límites de tamaño son los mismos que para la etiqueta img.