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. La codificación ocurre localmente: no se carga nada.
¿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.
¿Cuándo evitar imágenes Base64
• Para fotografías grandes: Base64 crece ~33% y aumenta el caché HTML.
• Cuando el almacenamiento en caché CDN y el srcset responsivo son disponible.
• Cuando muchos clientes de correo electrónico bloquean los URI de datos, use imágenes alojadas en su lugar.
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.
Peculiaridades del cliente de correo electrónico
El escritorio de Outlook históricamente ha limitado el soporte de URI de datos. Pruebe Gmail, Apple Mail y Outlook antes de confiar en imágenes en línea en campañas.
Seguridad
No pegue Base64 que no sea de confianza en páginas sin comprender el contenido; sigue siendo un contexto ejecutable en HTML. Codifica solo tus propios recursos.
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.
SVG a ¿Base64?
Posible para texto SVG pequeño; los formatos ráster son más comunes para los URI de datos.