Imagen en Base64
Base64 codifica bytes de imágenes binarias como texto ASCII que puede pegar en HTML img src, CSS url() o cargas útiles JSON. Útil para íconos pequeños, URI de datos en prototipos y API que esperan imágenes en línea.
¿Cómo codificar una imagen en Base64
1. Cargue el archivo de imagen (manténgalo pequeño; menos de ~100 KB es práctico).
2. Copia la cadena Base64 generada o la URL de datos completa.
3. Péguelo en su HTML, CSS o config.
4. Prueba en el entorno de destino: algunos clientes de correo electrónico limitan los URI de datos.
Ejemplos de codificación
Logotipo en línea en correo electrónico HTML
Un logotipo PNG de 2 KB como data:image/png;base64,... evita el bloqueo de imágenes externas en bandejas de entrada corporativas estrictas.
Fondo CSS para prototipo
Pegue una textura Base64 en una demostración de un solo archivo sin alojamiento de activos.
Dispositivo de prueba de API
Incluya un pequeño JPEG Base64 en un cuerpo de solicitud JSON para pruebas de punto final de carga de imágenes.
Cuando las imágenes Base64 ayudan
• Para activos muy pequeños donde una solicitud HTTP cuesta más que el tamaño en línea gastos generales.
• Para prototipos HTML de un solo archivo fuera de línea.
• Cuando el alojamiento externo no está disponible en entornos bloqueados.
Base64 en presupuestos de rendimiento
La inserción elimina los viajes de ida y vuelta pero evita el almacenamiento en caché de la imagen por separado en el navegador. Úsalo para íconos pequeños críticos en la mitad superior de la página con moderación; carga de forma diferida medios grandes normalmente.
Preguntas frecuentes
¿Por qué Base64 es más grande que el archivo?
La codificación utiliza 4 caracteres por cada 3 bytes, aproximadamente un 33% de sobrecarga más el prefijo de URL de datos.
¿Qué es una URL de datos?
Formato: data:image/png;base64,iVBORw0KG... — Tipo MIME más carga útil codificada.
¿Tamaño máximo para correo electrónico?
Mantener un crecimiento total de mensajes por debajo de 10 a 20 KB; muchos clientes se ahogan con imágenes enormes en línea.
¿Decodificar de nuevo a un archivo?
Utilice la herramienta codificadora/decodificadora Base64 para invertir ASCII a binario si es necesario.
¿Se cargan las imágenes?
No, FileReader lee localmente en el navegador.