EN
PT
ES
Codificador/Decodificador de Imagen en Base64
Convierte imágenes a data URL en base64 y al revés. Suelta un archivo o pega una data URL — todo se queda en tu navegador.
¿Qué es una data URL en base64?
Una data URL empaqueta un archivo pequeño directamente en una cadena con la forma data:<mime>;base64,<payload>. El navegador la trata como cualquier otra URL — puedes meterla en <img src>, en un background-image de CSS o en una firma de correo. El base64 hincha los bytes originales un ~33%, así que sólo compensa para recursos diminutos (iconos, sprites, avatares). Para cualquier cosa más grande te conviene un archivo normal detrás de un CDN.
Cómo usar la herramienta
En el modo Codificar, suelta o elige una imagen y copia el formato que necesites: data URL completa, base64 puro (sin prefijo) o una etiqueta <img> lista. En el modo Decodificar, pega cualquier data URL o cadena base64 y la imagen vuelve a aparecer en la vista previa — muy útil cuando te encuentras una en el CSS ajeno o en un correo HTML exportado y quieres ver qué es. Cambia con el chip de arriba.
Cuándo (y cuándo no) incrustar imágenes
Buenos casos: logos minúsculos e iconos que viajan en el mismo HTML/CSS, gráficos de firma en correos transaccionales, incrustar un recurso en una demo HTML de un solo archivo. Malos casos: imágenes hero, galerías, cualquier cosa reutilizada en varias páginas — el base64 invalida la caché HTTP de ese recurso, impide la descarga en paralelo, hincha el HTML/CSS y empeora el Largest Contentful Paint. Regla práctica: por debajo de ~2 KB codificado suele estar bien; por encima, mejor un archivo normal.
Tipos MIME habituales
El tipo MIME tras data: le dice al navegador cómo decodificar el contenido — equivocarse (servir un JPG como image/png) rompe la imagen sin avisar en algunos navegadores.
| Formato | Tipo MIME | Notas |
|---|---|---|
| PNG | image/png | Lossless, supports transparency. Best for icons and UI. |
| JPG / JPEG | image/jpeg | Lossy. Best for photos. No transparency. |
| WebP | image/webp | Smaller than PNG/JPG; supported by all modern browsers. |
| GIF | image/gif | Animated, 256-colour. Heavier than WebP/MP4 for video. |
| SVG | image/svg+xml | Vector. Prefer URL-encoded over base64 in CSS. |
Preguntas frecuentes
¿La imagen sale de mi navegador?
FileReader directamente a una cadena de data URL en JavaScript. No hay subida, ni paso por servidor, ni llamada de analítica que se lleve la imagen. Puedes arrastrar y soltar con la red desconectada — sigue funcionando.¿Por qué el base64 ocupa tanto más que el archivo?
data:<mime>;base64,.¿Puedo incrustar un SVG sin base64?
data:image/svg+xml;utf8,<svg…>) y quedan mucho más cortos que en base64. La herramienta te da la versión base64 por compatibilidad; en CSS de producción, prefiere la URL-encoded.¿El navegador cachea las imágenes incrustadas?
¿Puedo decodificar cualquier cadena base64?
data:, la herramienta intenta detectar el tipo de imagen por los bytes mágicos (PNG, JPG, GIF, WebP, SVG). Si la detección falla, verás un error de "inválido" y puedes anteponer manualmente un data:image/png;base64,.¿Por qué mi data URL tiene saltos de línea?
<img src>, pero algunos sistemas no. Esta herramienta siempre genera el base64 en una sola línea; si pegas una cadena con saltos en modo decodificar, eliminamos los espacios antes de decodificar.