Imagen → Base64 / Data URL — PNG / JPG / WebP

💡 Cómo usar Data URLs

• Imágenes pequeñas (1–2 KB) reducen el número de peticiones HTTP.

• La codificación Base64 añade ~33% de tamaño.

• Para SVG, considera incrustar como XML plano.

🔗 Herramientas relacionadas

・Base64
・Formatos

📖 Dónde se suele tropezar

Convierte una imagen a Base64 y la exporta como data URL, como background-image de CSS, como etiqueta img de HTML o como Markdown. Todo se ejecuta en el navegador y el archivo nunca se sube. Un data URL elimina una petición HTTP, pero eso no acelera nada necesariamente: los datos crecen alrededor de un 33 por ciento y la caché del navegador deja de aplicar. Sopesar esas dos cosas es la única decisión real al usar esta herramienta.

Caso	Qué ocurre	Qué hacer
Incrustarlo hizo la página más lenta, no más rápida	Una imagen convertida en data URL no se puede cachear por su cuenta, porque ahora forma parte del CSS o del HTML que la contiene. En CSS el efecto es mayor: las hojas de estilo bloquean el renderizado, así que los bytes de la imagen se traducen directamente en retraso hasta el primer pintado. Veinte imágenes de 10KB se convierten en un único recurso de 266KB que bloquea el renderizado, en lugar de veinte que podrían haberse cargado en paralelo. Y como cambiar una sola imagen invalida la caché de toda la hoja, cada usuario se la vuelve a descargar entera en cada actualización.	Un data URL sólo compensa con iconos pequeños de unos pocos kilobytes: como orientación, uno o dos kilobytes y algo que apenas cambie —una marca de verificación, una flecha, un indicador de carga, el mobiliario menudo de una interfaz—. Cualquier cosa mayor debería cargarse como un `<img>` normal, donde las ventajas de caché e imágenes adaptativas (`srcset`) superan con creces una petición ahorrada. Y la premisa misma ha cambiado: desde HTTP/2, el coste de una petición extra ha caído mucho: menos peticiones es más rápido es una regla de la era HTTP/1.1 y ya no se cumple sin más. La prueba es comparar cada cuánto cambia la imagen con cada cuánto se sirve la hoja de estilos.
Codificar también un SVG en Base64	El SVG es texto, así que codificarlo en Base64 es una mala jugada. Base64 convierte tres bytes en cuatro caracteres, así que siempre añade alrededor de un 33 por ciento, y como el resultado se parece a datos aleatorios, gzip y Brotli apenas le hacen mella. El SVG original está lleno de marcado repetido y comprimiría cerca de un 70 por ciento tal cual, pero Base64 destruye esa propiedad por completo. Optimizar un SVG y después codificarlo en Base64 anula con frecuencia justo lo que la optimización había ahorrado.	Si vas a incrustar un SVG, codifícalo en porcentajes y no en Base64: `data:image/svg+xml,%3Csvg...`. Sólo hay que escapar `#`, `%` y `"`, y casi todo lo demás puede quedarse tal cual, así que sale más pequeño que Base64 y sigue comprimiendo. Mejor aún: un SVG no tiene por qué ser un data URL; escríbelo en línea. Poner el `<svg>` directamente en el HTML te permite recolorearlo desde CSS, animarlo, y ocupa menos que el data URL. Y si usas varios iconos, combínalos en un sprite SVG en vez de incrustar cada uno, lo que gana en peticiones y en bytes totales.
La CSP o el destino bloquean el data URL	Con una política de seguridad de contenido como `img-src 'self'`, las imágenes con esquema `data:` se rechazan y no aparece nada: hay un error en la consola, pero visualmente sólo falta una imagen, así que la causa pasa desapercibida. Lo mismo ocurre en el destino: Gmail no muestra imágenes en data URL dentro del correo HTML, lo que aflora como verse bien en tu vista previa local y faltar en la bandeja de entrada. La expectativa de que incrustar garantiza que se vea es la que más fácilmente se traiciona.	Si usas CSP, permite `data:` de forma explícita: `img-src 'self' data:`, pero no lo metas en `default-src`. Permitir `data:` también para scripts y estilos amplía la superficie de ataque de XSS; restringirlo a las imágenes es la granularidad correcta. Para el correo HTML, no uses data URL: referencia imágenes externas por URL absoluta, y ten en cuenta que la mayoría de los clientes bloquean las imágenes externas por defecto de todos modos, así que importa más que el mensaje se lea sin ellas. Y en cualquier caso, no hay forma de asegurarse salvo entregándolo de verdad y abriéndolo en el entorno real: una vista previa local no te dice nada de esto.

Base64 no es ni siquiera ofuscación. Un data:image/png;base64,... metido en una hoja de estilos se puede descodificar y ver al instante en las herramientas de desarrollo del navegador: incrustar una captura confidencial o una ilustración inédita razonando que queda oculta dentro del CSS es sencillamente un error. Hay además una advertencia propia de esta herramienta: aquí se codifican en Base64 los bytes del archivo tal cual, de modo que el EXIF sobrevive intacto. A diferencia de las herramientas de imagen que pasan por un lienzo, las coordenadas GPS, la fecha de captura y el modelo de cámara quedan todos dentro del data URL que generas. Antes de publicar como data URL una foto hecha con el móvil, quítale el EXIF: el conversor de formato y la herramienta de redimensionado pasan por un lienzo y lo eliminan por el camino. La intuición de que incrustar oculta el contenido falla en ambos frentes.

📖 Cómo usar

1

Soltar o hacer clic para seleccionar imagen

Arrastra y suelta una imagen o haz clic para seleccionar. Se soportan PNG, JPG, WebP, SVG y más.
2

Seleccionar formato de salida

Elige Data URL, Base64 puro, CSS background-image, HTML img o Markdown.
3

Copiar y usar

Haz clic en Copiar para guardar el texto codificado y pegarlo en tu código.

❓ Preguntas frecuentes

¿Soporta pegar desde el portapapeles?

Sí. Copia una imagen al portapapeles y presiona Ctrl+V / Cmd+V en la página para cargarla.

¿Cómo afecta Base64 al tamaño del archivo?

La codificación Base64 aumenta el tamaño un 33%. Incrustar imágenes grandes puede afectar el rendimiento.

¿Cuándo es apropiado usar una Data URL?

Son ideales para iconos pequenos (1–2 KB) para reducir solicitudes HTTP. No son adecuadas para imágenes grandes.

🐛 ¿Encontró un problema con esta herramienta?

Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.

🖼️ Imagen → Base64 / Data URL

Vista previa

💡 Cómo usar Data URLs

🔗 Herramientas relacionadas

📖 Dónde se suele tropezar

📖 Cómo usar

❓ Preguntas frecuentes

¡Gracias por tu reporte!