Imagen a Base64

Codifica imágenes como data URI Base64

Un data URI Base64 convierte una imagen en una cadena de texto plano que puedes pegar directamente en tu HTML o CSS. El navegador la decodifica al vuelo, de modo que la imagen se muestra sin una petición de archivo aparte: útil para iconos diminutos, plantillas de correo y páginas autocontenidas en un solo archivo.

Esta herramienta lee tu archivo en local y genera el data: URI completo, además de fragmentos <img> y CSS background-image listos para copiar con un clic. No se sube nada: la codificación se hace íntegramente en tu navegador.

Cuándo incrustar (y cuándo no)

Incrustar elimina una petición HTTP, lo que puede acelerar imágenes pequeñas y críticas. Pero Base64 es aproximadamente un 33 % más grande que el archivo binario y no se puede almacenar en caché por separado, así que evítalo con fotos grandes o imágenes reutilizadas en muchas páginas. Como regla general, incrusta iconos de pocos kilobytes y mantén las imágenes mayores como archivos normales.

Cómo usar el resultado

El data URI conserva el tipo original del archivo, por ejemplo data:image/png;base64, seguido de los bytes codificados, y la línea de estado muestra cuántos kilobytes de texto ha producido. Usa los tres botones de copia según el destino: el URI simple para un valor src o href, la etiqueta <img> para HTML (añade después un texto alt descriptivo), o la línea CSS para una hoja de estilos.

Advertencias prácticas

• Una cadena Base64 larga hace que tu archivo HTML o CSS pese más y sea más lento de leer, y se descarga de nuevo con cada página que la contiene. Gzip o Brotli recuperan parte del sobrecoste, pero los datos de la imagen ya están comprimidos, así que el ahorro es limitado.
• Si tu sitio usa una Content Security Policy, img-src debe permitir URIs data:.
• Muchos clientes de correo bloquean o eliminan los data URI, así que prueba antes de depender de ellos en boletines.
• Comprime o redimensiona la imagen primero: un origen más pequeño produce una cadena mucho más corta.

Buenos candidatos para incrustar

Iconos pequeños, imágenes de relleno diminutas, indicadores de carga, logotipos sencillos e imágenes en demos HTML de un solo archivo son lo más adecuado. Las fotos, los banners principales y cualquier imagen que aparezca en muchas páginas es mejor servirlas como archivos separados para que el navegador pueda almacenarlas en caché. La codificación ocurre en tu navegador y el texto que copias nunca sale de tu dispositivo hasta que lo pegas tú mismo en algún sitio.