Codificador de imagen a Base64
Convierte cualquier imagen en una URL de datos Base64 al instante: copia y pega para CSS, HTML o código. Sin necesidad de subir archivos.
Cuándo usar imágenes codificadas en Base64
CSS y estilos
- Incrustar iconos pequeños en CSS como URL de datos de imagen de fondo.
- Imágenes de carga o marcadores de posición en las hojas de estilo
- Agregue logotipos a plantillas de correo electrónico solo con CSS sin necesidad de alojamiento externo.
- Incrustar imágenes de elementos de la interfaz de usuario en las hojas de estilo de la biblioteca de componentes.
HTML y correo electrónico
- Insertar imágenes en línea en HTML<img src> como URL de datos
- Incluya los logotipos de la empresa en plantillas de correo electrónico HTML independientes.
- Crea documentos HTML de un solo archivo con imágenes incrustadas.
- Inserta imágenes de firma en las firmas HTML de Gmail y Outlook.
API y código
- Codificar imágenes para cargas útiles de API JSON que esperan entrada base64
- Preparar imágenes para solicitudes de API de IA/ML (OpenAI Vision, Claude, Gemini)
- Convierta imágenes para almacenarlas en campos de base de datos codificados en base64.
- Codificar imágenes para el lienzo drawImage a partir de una URL de datos en JavaScript
Cómo convertir una imagen a Base64: 3 pasos
- 1
Sube tu imagen
Arrastra cualquier imagen JPG, PNG, WebP, SVG o GIF al codificador. Tu archivo se leerá localmente; no se subirá nada.
- 2
Copiar la salida Base64
La herramienta muestra por separado tanto la URL completa de los datos (data:image/…;base64,…) como la cadena base64 sin procesar. Haz clic en Copiar para copia cualquiera de los dos formatos al portapapeles.
- 3
Úsalo en tu código
Pegue la URL de los datos en HTML<img src> , imagen de fondo CSS, o utilice la cadena base64 sin procesar para cargas útiles de API y datos JSON.
Codificador de imágenes a Base64 gratuito en línea — Sin necesidad de subir archivos a un servidor.
La codificación Base64 convierte los datos binarios de una imagen en una cadena de caracteres ASCII que se puede insertar directamente en código, CSS, HTML o cargas útiles de API sin necesidad de una URL externa. El codificador Base64 de PicsSizer lee el archivo de imagen mediante la API FileReader del navegador y genera tanto la URL completa de los datos como la cadena Base64 sin procesar, sin necesidad de subirla a un servidor. La cadena codificada está lista para pegarse en CSS background-image, HTML<img src> , cuerpos de API JSON, o cualquier otro lugar que espere una URL de datos o una imagen base64.
¿Cuándo usar imágenes Base64 en línea frente a URL externas?
La codificación Base64 es la más adecuada para recursos pequeños y estáticos: iconos, ilustraciones SVG, logotipos de correo electrónico e imágenes de marcador de posición. La representación Base64 es aproximadamente un 33 % mayor que el código fuente binario, por lo que las imágenes grandes incrustadas como URL de datos aumentan significativamente el tamaño del archivo HTML o CSS. Para imágenes de más de 10 KB, el alojamiento externo con una CDN es casi siempre más rápido y eficiente. Para imágenes de menos de 5 KB, especialmente iconos, logotipos y SVG decorativos, la incrustación Base64 elimina por completo una solicitud HTTP, lo que puede mejorar el rendimiento de los recursos críticos visibles en la parte superior de la página. Las API de IA/ML (OpenAI, Anthropic, Google) que aceptan entradas de imágenes utilizan Base64 en sus cuerpos de solicitud JSON, lo que hace que la codificación Base64 sea esencial para las integraciones de modelos de visión.
Consejos para usar imágenes codificadas en Base64 en código
Para la imagen de fondo CSS: envuelva la URL de datos en url() — `background-image: url('data:image/png;base64,…')`. Para HTML: pegue directamente como atributo src — `<img src="data:image/jpeg;base64,…"> Para correos electrónicos HTML: la mayoría de los clientes de correo electrónico admiten URL de datos para imágenes pequeñas; pruebe en Gmail, Outlook y Apple Mail antes de implementar. Para cargas útiles de API JSON: utilice la cadena base64 sin procesar (sin el prefijo data:…;base64) si la API especifica un campo mediaType o mimeType independiente. La herramienta genera ambos formatos: URL de datos completa y base64 sin procesar, para que pueda copia la versión que requiera su integración.
Herramientas de desarrollo relacionadas
Más herramientas para desarrolladores que trabajan con imágenes en el código.
Base64 a imagen
Decodifica una cadena base64 o una URL de datos para convertirla en una imagen descargable.
Convertidor de imágenes
Convierta entre JPG, PNG, WebP, SVG y más de 20 formatos antes de la codificación.
Visor de metadatos de imágenes
Inspeccione los metadatos EXIF, IPTC y XMP incrustados en los archivos de imagen.
Compresor de imágenes
Reduzca el tamaño del archivo de imagen antes de la codificación base64 para minimizar la longitud de la cadena.
Imagen a Base64 — Preguntas frecuentes
Preguntas frecuentes sobre la conversión de imágenes a URL de datos base64