Utilice este Creador de Imágenes Base64 en línea gratuito para subir rápidamente una imagen y convertirla en una cadena base64. La imagen puede estar en formato jpeg, gif y png.
Base64 es un algoritmo de codificación que permite convertir cualquier carácter en un alfabeto que consiste en letras latinas, dígitos, más y barra. Debido a este algoritmo, incluso caracteres chinos, emojis e imágenes pueden convertirse en una cadena “legible”.
En ciencias de la computación, Base64 es un grupo de esquemas de codificación de binario a texto que representan datos binarios en un formato de cadena ASCII traduciéndolos a una representación radix-64. El término Base64 proviene de una codificación específica de transferencia de contenido MIME. Cada dígito Base64 representa exactamente 6 bits de datos. Por lo tanto, tres bytes de 8 bits (es decir, un total de 24 bits) pueden ser representados por cuatro dígitos Base64 de 6 bits.
Común a todos los esquemas de codificación de binario a texto, Base64 está diseñado para llevar datos almacenados en formatos binarios a través de canales que solo admiten contenido de texto de manera confiable. Base64 es particularmente prevalente en la World Wide Web donde sus usos incluyen la capacidad de incrustar archivos de imagen u otros activos binarios dentro de activos textuales como archivos HTML y CSS. (Wikipedia)
Inicialmente, el algoritmo fue nombrado “codificación imprimible” y solo en junio de 1992, RFC 1341 lo define como “Base64”. Los 64 caracteres representan los 64 valores posicionales para la base que varían entre implementaciones.
La historia del algoritmo Base64 comenzó cuando, en el pasado, los ingenieros discutían cuántos bits deberían tener un byte. Hace algunas décadas, se utilizaban bytes de siete bits, seis bits y tres bits. Pero cuando el byte de ocho bits se aprobó como estándar, muchos sistemas usaban viejos estándares y no soportaban el nuevo. Surgieron algunos problemas. Por ejemplo, un servidor de correo podría descartar el octavo bit al enviar correos electrónicos o solo podrían enviar texto, pero no imágenes, videos, archivos, etc. Así que se desarrolló un nuevo algoritmo para resolver este problema: Base64.
Base64 se utiliza comúnmente para codificar datos binarios como imágenes o archivos de sonido para incrustarlos en HTML, CSS, EML y otros documentos de texto. Además, Base64 se utiliza para codificar datos que pueden no ser compatibles o que podrían dañarse durante la transferencia, almacenamiento o salida. Aquí están algunas de las aplicaciones del algoritmo:
- Adjuntar archivos al enviar correos electrónicos
- Incrustar imágenes en HTML o CSS a través de URI de datos
- Preservar bytes crudos de funciones criptográficas
- Salida de datos binarios como XML o JSON en respuestas de API
- Guardar archivos binarios en una base de datos cuando BLOB no está disponible
¿Cuándo usar el Creador de Imágenes Base64?
Base64 no muestra las imágenes, por lo tanto, las imágenes nunca serán indexadas por Google porque no aparecen en la búsqueda de imágenes.
Puede usar el Creador de Imágenes Base64 para imágenes que no sean tan importantes y que no generen tráfico, por ejemplo, íconos sociales. Íconos pequeños como los de Twitter, Google+, Facebook, etc., son realmente pequeños y no necesitan ser indexados. Estos pequeños íconos nunca generan tráfico.
Es mejor usar la codificación base64 solo para imágenes pequeñas. Si intenta codificar imágenes más grandes con base64, terminará con una gran cantidad de código en su HTML y perderá los beneficios de rendimiento. Muchas páginas web tienen 8 o 12 íconos sociales y no es necesario descargarlos. ¡Así que Base64 es la mejor opción en este caso!
Las URIs de datos y la codificación Base64 van de la mano. Las URLs de datos son un esquema de Identificador Uniforme de Recursos que permite incluir elementos de datos de forma directa en una página web como si se estuvieran referenciando como recursos externos. Las URLs de datos son una forma de Localizadores Uniformes de Recursos, aunque de hecho no localizan nada remotamente. En cambio, los datos del recurso están contenidos dentro de la propia cadena URL como una cadena codificada en base64. Esto ahorra al navegador tener que realizar solicitudes HTTP adicionales para los recursos externos, y por lo tanto puede aumentar la velocidad de carga de la página.
Las URLs de datos reducen el número de solicitudes HTTP que el navegador necesita hacer para mostrar un documento HTML. Minimizar el número de solicitudes del navegador es una parte importante de la optimización de los tiempos de carga de las páginas web. Por lo tanto, las URLs de datos pueden tener efectos beneficiosos sobre el rendimiento.
Las URLs de datos pueden resultar en una descarga más rápida para transferir archivos pequeños.
Las transferencias de datos a través de TCP comienzan lentamente, y cada recurso externo inicia una nueva conexión TCP con el servidor. La velocidad de transferencia puede verse restringida por el overhead de la comunicación TCP.
Menor uso de ancho de banda.
Las URLs de datos utilizan menos ancho de banda siempre que el overhead de codificar los datos como una URL de datos sea menor que el overhead de una solicitud HTTP. Por ejemplo, la codificación base64 requerida para una imagen de 600 bytes sería de 800 bytes, así que si una solicitud HTTP requería más de 200 bytes de overhead, la URI de datos sería más eficiente.
HTTPS más rápido.
Las solicitudes HTTPS tienen mucho más overhead que las solicitudes HTTP ordinarias debido a la encriptación SSL. Si su sitio web se sirve a través de HTTPS, proporcionar recursos a través de URLs de datos puede mejorar significativamente el rendimiento.
¿Cómo luce una URL de datos?
Una URL de datos es una cadena que comienza con data:, seguido del formato de tipo MIME. Por ejemplo, una imagen PNG tiene el tipo MIME image/png que es seguido por una coma y luego por los datos reales.
El texto suele transferirse en texto plano, mientras que los datos binarios suelen codificarse en base64.
Aquí hay un ejemplo de cómo podría lucir una URL de datos:
<img src="data:image/png,ABQCAIAAABtUGDWAA..." />
Así es como luce una URL de datos codificada en base64:
data:image/png;base64:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUh..." />
Puede usar la cadena codificada en base64 en CSS. Puede copiar la cadena y ponerla en su código de esta manera:
.example { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUh...'); }