Si ha pasado algún tiempo trabajando con el desarrollo web moderno, probablemente se haya encontrado con una cadena caótica y aparentemente interminable de caracteres que comienza con data:image/png;base64, seguido de puro galimatías. Esta es una imagen codificada en Base64.
¿Qué es exactamente la codificación Base64?
En esencia, Base64 es un esquema de codificación de binario a texto. Toma datos binarios (como una imagen, un archivo de audio o un documento compilado) y los traduce a un formato de cadena ASCII. El nombre "Base64" proviene del hecho de que utiliza un alfabeto de 64 caracteres (A-Z, a-z, 0-9, + y /) para representar los datos.
Esta conversión es increíblemente útil porque muchos protocolos de Internet (como HTTP, HTML y CSS) están diseñados específicamente para manejar texto sin formato de forma segura. Al convertir datos binarios en texto, garantizamos que los datos se puedan transmitir a través de estos protocolos sin corromperse.
Codifique sus archivos al instante
¿Necesita codificar una imagen o decodificar una cadena Base64 nuevamente en texto? Utilice nuestra herramienta gratuita del lado del cliente.
Codificador/decodificador Base64 abierto¿Cuándo debería incrustar imágenes con Base64?
Incrustar cadenas Base64 directamente en su HTML (`<img src="data:image...">`) o su CSS (`background-image: url("data:image...")`) en lugar de usar una URL estándar puede tener beneficios significativos, pero solo en casos de uso muy específicos:
- Microiconos y controles giratorios: si tiene elementos pequeños de la interfaz de usuario (como un control giratorio de carga de 1 KB o una marca de verificación), codificarlos como Base64 elimina la necesidad de que el navegador realice una solicitud HTTP separada para recuperar el archivo de imagen. Esto acelera la representación de la interfaz de usuario crítica.
- Correos electrónicos HTML: Muchos clientes de correo electrónico bloquean la carga de imágenes externas por razones de privacidad. Incrustar el logotipo directamente en HTML a través de Base64 puede evitar estos bloqueos y garantizar que su correo electrónico se vea perfecto.
- Aplicaciones web de un solo archivo: si está creando una herramienta que debe distribuirse como un único archivo `.html` que funciona completamente sin conexión, incrustar todos los recursos a través de Base64 es la única forma de empaquetarlo correctamente.
¿Cuándo debería EVITAR Base64?
El mayor inconveniente de la codificación Base64 es que aumenta el tamaño del archivo del recurso en aproximadamente un 33 %. Una imagen de 1 MB se convertirá en una cadena de texto de 1,33 MB.
Además, los navegadores no pueden almacenar en caché una cadena Base64 de forma independiente. Si incrusta una cadena Base64 masiva dentro de su archivo CSS, el navegador debe descargar ese archivo CSS masivo en cada carga de página, y el análisis de cadenas de texto enormes bloquea el hilo principal, lo que provoca un retraso severo (tiempo deficiente para interactuar).
La regla de oro: Nunca codifique en Base64 fotografías grandes o imágenes destacadas. Codifique únicamente pequeños iconos SVG o archivos rasterizados microscópicos cuando la sobrecarga de una solicitud HTTP sea peor que la penalización del 33% en el tamaño del archivo.