Tengo una confesión que hará que los ingenieros de rendimiento se estremezcan. En una versión anterior de un panel de WordPress para WP Adminify, codificé cada ícono en base64 y los incorporé directamente al CSS porque estaba cansado de administrar hojas de sprites. Funcionó. Los íconos aparecieron instantáneamente, sin solicitudes adicionales, sin flash de imagen faltante. Luego, la hoja de estilo pasó por un megabyte y la página se sintió más lenta en la segunda carga, porque ninguna de esas imágenes incrustadas se podía almacenar en caché por sí sola. Ese proyecto es donde aprendí que "imagen a base64" es una técnica genuinamente útil que también es fácil de usar en exceso.
Esta guía cubre ambas mitades de esa lección. Mostraré cómo convertir una imagen a base64 con el Convertidor de imagen a Base64 en Toolz.dev, cómo decodificar base64 nuevamente en una imagen, qué es realmente un URI de datos y las compensaciones honestas para alinear los activos que se benefician y dejar los que no.
TL;Dr: La conversión de una imagen a base64 convierte su contenido binario en una cadena de texto, generalmente envuelta en un URI de datos como
data:image/png;base64,iVBORw0KG.... Esa cadena se integra directamente en HTML, CSS, SVG o JSON sin solicitud de archivo separada. El convertidor Toolz.dev codifica y decodifica en ambas direcciones, se ejecuta completamente en su navegador, por lo que nunca se carga ninguna imagen, y le brinda la base 64 sin formato, un URI de datos listo, un<img>etiqueta y un fragmento de CSS. Base64 infla el tamaño en aproximadamente un tercio, por lo que en línea activos pequeños como íconos, no fotografías grandes.
¿qué es exactamente una imagen base64?
Base64 es un esquema de codificación, no de compresión ni de cifrado. El esquema está definido por RFC 4648, y el data: URI que lo envuelve RFC 2397. Representa datos binarios arbitrarios utilizando 64 caracteres ASCII imprimibles: las letras de la A a la Z y de la a a la z, los dígitos del 0 al 9, más + y /, con = utilizado para relleno. El esquema se define en RFC 4648, el mismo estándar que gobierna la base64 que ve en los archivos adjuntos de correo electrónico y las cargas útiles JSON.
La razón por la que existe es que gran parte de Internet y la plomería #39;s se crearon para texto, no para bytes sin procesar. Los datos binarios pueden contener valores de bytes que un canal orientado al texto alterará. Base64 evita eso tomando tres bytes de entrada, dividiendo esos 24 bits en cuatro grupos de seis y asignando cada grupo a uno de los 64 caracteres. Tres bytes dentro, cuatro caracteres fuera. Esa proporción de tres a cuatro es exactamente la razón por la que la salida codificada es aproximadamente un 33 por ciento mayor que la fuente, un número que vale la pena memorizar porque decide si la inserción es una buena idea.
Un "imagenbase64" es simplemente un archivo de imagen que se ha ejecutado a través de esa codificación. Por sí solo, la cadena es solo texto. Lo que lo hace renderizable es envolverlo en un URI de datos.
¿Qué es un URI de datos y por qué lo representa el navegador?
Un URI de datos es una URL que lleva su carga útil en línea en lugar de apuntar a un recurso remoto. Su forma, definida en RFC 2397, es data:[<media-type>][;base64],<data>. Para un PNG que parece data:image/png;base64,iVBORw0KGgo....
La pieza importante es el tipo de medio, image/png en ese ejemplo. Le dice al navegador cómo interpretar los bytes que siguen. Debido a que el URI de datos anuncia su propio tipo MIME, un navegador puede tratar data:image/png;base64,... como imagen, en el instante en que analiza un atributo que espera una URL, ya sea que sea la src de un <img> o el url() en un CSS background-image. No ocurre ningún viaje de ida y vuelta a la red, porque no hay nada que recuperar. La imagen ya está ahí, escrita en el marcado.
Esa es toda la magia y el costo total en una oración. La imagen ya está ahí, por lo que se representa instantáneamente y también por qué no se puede almacenar en caché por separado ni compartir entre páginas como lo hace un archivo vinculado.
¿cómo convierto una imagen a base64 en Toolz.dev?
los Convertidor de imagen a Base64 tiene dos direcciones y la codificación es la predeterminada.
Elija "Imagen a Base64" dirección, luego cargue o suelte su imagen. La herramienta lee el archivo localmente usando la API de archivos del navegador y, debido a que esa lectura ocurre en su navegador, la imagen nunca viaja a un servidor. Una vez cargado, obtienes una vista previa más cuatro salidas, cada una con su propio botón de copia.
La base64 sin formato es la cadena básica, útil cuando ya tienes tu propio contenedor. El URI de datos está completo data:... hilo listo para pegar en un src investigaciones operacionales url(). HTML <img> la etiqueta es un elemento completo que puedes colocar en una plantilla. El CSS background-image la declaración está lista para una hoja de estilo. Junto a aquellos que ves el tamaño de byte decodificado y el recuento de caracteres base64, para que puedas juzgar el peso antes de comprometerte. Si el número parece alarmante, esa es la herramienta que hace su trabajo: una foto de 200 KB que se convierte en una cadena de 270 KB en tu HTML es exactamente el momento de reconsiderarlo.
¿cómo decodigo base64 nuevamente en una imagen?
Cambie a "Base64 a Image" dirección y pegue una cadena base64 sin formato o un URI de datos completo. El convertidor es tolerante con la entrada: elimina los espacios en blanco y, si pega uno completo data:image/png;base64,... cadena lee el tipo MIME directamente del prefijo. Si pega base64 desnudo sin prefijo, asume PNG, que es el valor predeterminado seguro para la mayoría de las capturas de pantalla y los activos exportados.
Primero valida la cadena. Si lo que pegó no es plausible base64, lo que significa que contiene caracteres fuera del alfabeto RFC 4648, la herramienta le indica que no muestra una imagen rota. Cuando la entrada se comprueba, obtienes una vista previa en vivo y un botón de descarga que reconstruye el archivo binario original y lo guarda con la extensión correcta. Esta dirección es realmente útil cuando encuentra un URI de datos enterrado en una hoja de estilo o una respuesta API y desea ver qué es realmente, o extraerlo nuevamente a un archivo real.
Aquí todo está del lado del cliente, que es la misma promesa que se ejecuta en el resto de la caja de herramientas, desde el orientado al texto Convertidor Base64 al Codificador de URL. Si desea conocer el razonamiento más amplio detrás de mantener este tipo de trabajo en el navegador, el guía de codificación Base64 profundiza en la codificación misma.
¿cuándo debo alinear una imagen como base64 y cuándo no?
Esta es la decisión que existe la herramienta para informar, así que aquí está la tabla que realmente uso.
| colocación | ¿en línea como base64? | porque |
|---|---|---|
| Pequeño ícono o logotipo utilizado en todo el sitio | A menudo sí | Elimina una solicitud, aparece instantáneamente, los gastos generales son pequeños |
| Fondo pequeño SVG o 1px | sí | La sobrecarga del 33 por ciento es insignificante en unos pocos cientos de bytes |
| Exportación HTML de un solo archivo o correo electrónico | sí | El expediente debe ser autónomo, no se permiten activos externos |
| Gran foto o pancarta de héroe | prohibido | La sobrecarga es grande y la imagen no se puede almacenar en caché por separado |
| Imagen reutilizada en muchas páginas | prohibido | Un archivo vinculado se almacena en caché una vez y se comparte; inlining lo duplica en todas partes |
| Imagen de contenido que cambia con frecuencia | prohibido | Los editores no pueden intercambiar un blob base64 tan fácilmente como un archivo |
El patrón detrás de la tabla es simple. Inlining intercambia una solicitud de bytes de red en su documento. Esa operación gana cuando el activo es pequeño y la solicitud guardada importa, que es el caso clásico de los íconos encima de la página. Pierde cuando el activo es grande o compartido, porque paga el impuesto del 33 por ciento, pierde el almacenamiento en caché independiente e hincha el archivo que el navegador debe analizar antes de poder pintar algo.
Para "no" filas, el mejor movimiento suele ser optimizar el archivo y servirlo normalmente. Ahí es donde se encuentra una herramienta comprimir imagen o el Convertidor de formato se gana su mantenimiento, reduciendo el activo para que la versión vinculada sea lo más ligera posible. Escribí más sobre todo ese flujo de trabajo en el Kit de herramientas para desarrolladores web guía.
¿base64 mantiene mi imagen privada?
Sí y no, y la distinción importa. Base64 es una codificación, por lo que cualquiera que tenga la cadena puede decodificarla nuevamente a la imagen original exacta. Proporciona cero secreto. No trate un URI de datos como una forma de ocultar nada, porque "Base64 a Image" La dirección de esta misma herramienta lo invierte en un solo pegado.
Lo que es privado es la conversión misma. En Toolz.dev, la imagen se lee y codifica completamente en su navegador con la API de archivos y no se carga nada. Entonces, la obra de arte, la captura de pantalla y el logotipo del cliente que está codificando nunca salen de su máquina durante el proceso. Esa es una garantía diferente a la codificación que oculta el contenido, y trato de ser preciso al respecto porque "private" se tira libremente. La privacidad está en el procesamiento local, cubierta más ampliamente en el privacidad de datos guía, no en base64 como esquema.
Algunos consejos prácticos al enviar esto
Prefiera SVG para los íconos cuando pueda y alinee el marcado SVG directamente en lugar de codificarlo con base64. SVG ya es texto, por lo que envolverlo en base64 solo agrega el impuesto del 33 por ciento por nada. Base64 brilla para formatos rasterizados como PNG y JPEG que son genuinamente binarios.
Mire el tamaño total del documento, no solo la imagen única. Un icono con incrustaciones es invisible. Cuarenta de ellos, el error que cometí en ese panel de WordPress, convierte una hoja de estilo sencilla en un monstruo. Si estás alineando más de un puñado, esa es una señal para dar un paso atrás y considerar un sprite vinculado o una fuente de ícono.
Mantenga honesto el tipo MIME. Si exporta un JPEG pero etiqueta su URI de datos como image/png, algunos navegadores se las arreglan y otros no. El conversor detecta el tipo real del archivo para que la salida sea correcta, pero si ensambla manualmente un URI de datos en otro lugar, haga coincidir el tipo de medio con los bytes reales.
Y cuando heredes una base de código llena de URI de datos misteriosos, recuerda la dirección de decodificación. Pasando uno al "Base64 a Image" La descarga lateral y de impacto es la forma más rápida de ver qué hoja de estilo se envía realmente.
¿cómo funciona realmente la codificación base64, paso a paso?
Ayuda ver la mecánica una vez, porque toda la historia del 33 por ciento de sobrecarga se desprende de ella de forma natural. Base64 funciona en grupos de tres bytes a la vez. Tres bytes son 24 bits. El codificador divide esos 24 bits en cuatro fragmentos de seis bits cada uno. Seis bits pueden representar 64 valores, de 0 a 63, y cada uno de esos valores se asigna a un carácter en el alfabeto base64: de la A a la Z de 0 a 25, de la a a la z de 26 a 51, los dígitos del 0 al 9 de 52 a 61, entonces + para 62 y / para 63.
Entonces, tres bytes de entrada siempre se convierten en cuatro caracteres de salida. Esa es la fuente del aumento de tamaño. Cuatro caracteres transportan la información de tres bytes, una proporción de 4 a 3, lo que es lo mismo que decir que la salida es un tercio mayor que la entrada. No hay forma de evitarlo, porque se integra en cómo funciona el esquema.
El relleno maneja los restos. Si sus datos no son un múltiplo limpio de tres bytes, el codificador rellena el grupo final para que aún produzca una cantidad completa de caracteres y agregue uno o dos = signos para registrar cuánto relleno agregó. Es por eso que las cadenas base64 suelen terminar en = investigaciones operacionales ==. Un solo rezago = significa que el último grupo tenía dos bytes; un doble == significa que tenía uno. El convertidor Toolz.dev maneja el relleno automáticamente en ambas direcciones y, al decodificarlo, acepta felizmente cadenas con o sin seguimiento =, porque algunos sistemas lo eliminan.
Puedes ver esto con un pequeño ejemplo. Los tres bytes ASCII para las letras "Hombre" codifique los cuatro caracteres "TWFu" un ejemplo famoso sacado directamente de la literatura de codificación. Coloque esos mismos tres caracteres en un URI de datos como texto y podrá ver el viaje de ida y vuelta, o ejecute una imagen real a través de la herramienta y observe que el recuento de caracteres en la salida es siempre aproximadamente cuatro tercios del recuento de bytes que se muestra al lado.
Comprender esto también explica por qué base64 no se adapta bien a imágenes grandes y se adapta bien a las pequeñas. La sobrecarga es un porcentaje fijo, por lo que en un icono de 300 bytes te cuesta 100 bytes, a nadie le importa. En una foto de dos megabytes te cuesta dos tercios de un megabyte de texto puro hinchado en tu documento, y ese documento debe descargarse y analizarse antes de que la página pueda renderizarse. Las matemáticas no cambian con el tamaño, pero las consecuencias sí.
Preguntas frecuentes
¿cómo convierto una imagen a Base64?
Elija la imagen en la dirección Base64, luego cargue o suelte su imagen. La herramienta lee el archivo localmente, lo codifica y devuelve el Base64 sin formato más un URI de datos listo para usar, una etiqueta img y un fragmento CSS que puede copiar.
¿qué es un URI de datos?
Un URI de datos es una cadena que incorpora un archivo en línea en lugar de vincularlo, en el formulario datos:[tipo mime];base64,[datos]. Para un PNG parece datos:image/png;base64,iVBORw0KGgo... Los navegadores lo representan como una imagen dondequiera que se espere una URL, por lo que no se necesita una solicitud por separado.
¿puedo convertir Base64 nuevamente a una imagen?
Sí. Cambie a Base64 a la dirección Imagen y pegue una cadena Base64 sin formato o un URI de datos completo. La herramienta lo decodifica, muestra una vista previa y le permite descargar el archivo de imagen reconstruido.
¿Qué formatos de imagen son compatibles?
Se admiten PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO y AVIF. El tipo MIME correcto se detecta desde el archivo para que el URI de datos resultante se represente correctamente.
¿por qué la cadena Base64 es más grande que mi imagen?
Base64 representa tres bytes de datos binarios con cuatro caracteres de texto, por lo que la salida codificada es aproximadamente un 33 por ciento mayor que la fuente. Esa sobrecarga es la razón por la que Base64 se adapta más a íconos y logotipos pequeños que a fotografías grandes.
¿Es seguro convertir imágenes aquí?
Sí. Cada imagen se lee y codifica completamente en su navegador mediante la API de archivos. No se carga ningún archivo, cadena o resultado en un servidor, por lo que las imágenes privadas permanecen en su dispositivo.
¿debo alinear imágenes como Base64 en producción?
La inserción funciona bien para activos pequeños y de uso frecuente, como íconos, porque elimina una solicitud HTTP y evita un destello de imagen faltante. Para imágenes grandes, suele ser mejor mantener archivos separados para que el navegador pueda almacenarlos en caché de forma independiente.
¿El convertidor funciona fuera de línea y en dispositivos móviles?
Sí. Debido a que todo el procesamiento es del lado del cliente, funciona después de que la página se ha cargado incluso sin una conexión, y la interfaz responde a los navegadores móviles y de escritorio modernos.
