Convertidor de Imagen a Base64 - Codifica Imágenes como Data URIs

Porque Base64 es una codificación, no un compresor. Representa 3 bytes binarios usando 4 caracteres ASCII imprimibles, así que la salida siempre es aproximadamente un 33% más larga que la entrada, más unos pocos bytes para el prefijo data:. Ese crecimiento es inherente al formato y no hay ningún ajuste que lo evite. Si necesitas un archivo más pequeño, comprime la imagen antes de codificarla — el paso de codificación solo puede añadir tamaño.

Insértala cuando el recurso sea pequeño y siempre necesario: iconos, espaciadores de 1x1, texturas de fondo diminutas, aproximadamente por debajo de 10 KB. Por debajo de eso, ahorrar una petición HTTP suele compensar la penalización del 33% de tamaño. No insertes fotos, imágenes principales, ni nada por encima de unos 100 KB. Un data URI grande no se puede almacenar en caché de forma independiente, tiene que volver a descargarse con cada revisión de la página o la hoja de estilos, y bloquea el analizador hasta que se ha leído por completo.

A menudo no. Gmail elimina directamente los data URI de las etiquetas img, y los clientes de escritorio de Outlook nunca los han admitido de forma fiable. Apple Mail y algunos clientes de webmail sí los renderizan. El enfoque fiable para el correo sigue siendo una URL de imagen alojada, o un adjunto CID referenciado con cid: en el src. Prueba en los clientes que realmente usan tus destinatarios antes de depender de datos insertados.

Sí, y no tiene pérdida — los bytes decodificados son idénticos al archivo original, incluyendo los datos EXIF y de perfil de color. Pega un data URI completo en la barra de direcciones de un navegador y la imagen se renderiza. En código, atob() en JavaScript o base64 -d en la línea de comandos lo hará. Ten en cuenta que la salida en bruto de esta página omite el prefijo data:, así que vuelve a añadirlo si el destino espera un URI completo.

No. SVG ya es texto, así que Base64 añade un 33% para nada. En su lugar, pega el marcado directamente en tu HTML, lo que además permite que CSS estilice las formas y que JavaScript las alcance. Para fondos CSS, usa un SVG codificado como URL en url() en vez de uno en Base64 — se mantiene más pequeño y comprime mejor con gzip. Base64 para SVG solo tiene sentido donde se requiere un URI estricto y la codificación por porcentaje no es una opción.

No hay ningún límite en la especificación de HTML o CSS, y los navegadores modernos manejan data URI de varios megabytes en atributos src. Los límites prácticos están en otro sitio: las barras de direcciones normalmente cortan alrededor de 2 MB o menos, algunas configuraciones de servidor y CDN limitan el tamaño de cabeceras y peticiones, y las cadenas muy largas ralentizan notablemente el análisis. Esta herramienta no impone ningún límite propio, pero avisa por encima de 100 KB porque ahí es donde insertarlo deja de merecer la pena.

No. El archivo se lee con la API FileReader del navegador, que opera sobre el identificador de archivo local, y la cadena resultante permanece en la memoria de la página. Nada se envía por la red y no hay ningún componente en el servidor, así que la herramienta sigue funcionando sin conexión una vez cargada la página. Las copias al portapapeles pasan por el portapapeles estándar del navegador, no por nosotros.

Todos, para imágenes — los data URI en el src de img y en url() de CSS funcionan desde IE8 y hoy se admiten universalmente. El portapapeles es la pieza más nueva: navigator.clipboard requiere un contexto seguro, así que en HTTP simple o en navegadores antiguos esta página recurre a seleccionar el textarea y usar document.execCommand('copy'). Si ambas vías fallan, verás un mensaje pidiéndote que selecciones y copies el texto tú mismo.