¿Qué es una imagen Base64?

Una imagen Base64 es una forma de representar datos binarios de imagen como texto plano mediante el esquema de codificación Base64. En lugar de hacer referencia a un archivo externo, la imagen completa se incrusta directamente como una string de caracteres ASCII. Esto se utiliza habitualmente en HTML y CSS a través de URIs de datos (data:image/png;base64,...), lo que permite incluir imágenes en línea sin necesidad de solicitudes HTTP adicionales. La codificación Base64 aumenta el tamaño de los datos aproximadamente un 33%, pero elimina la necesidad de alojamiento de archivos adicional o de múltiples viajes de red.

Descripción de la herramienta

Esta herramienta genera imágenes aleatorias con patrones y dimensiones personalizables, y luego devuelve el resultado como una string codificada en Base64. Elige entre cinco patrones visuales — ruido, rectángulos, círculos, degradados o líneas —, ajusta el ancho y el alto hasta 2048×2048 píxeles y selecciona un formato de salida (PNG, JPEG o WebP). La imagen se genera íntegramente en el navegador mediante la Canvas API, sin subidas a servidores ni dependencias externas.

Ejemplos

Ruido aleatorio a 256×256 produce un patrón estático colorido en el que cada píxel tiene un valor RGB asignado aleatoriamente, similar a la estática de televisión pero en color completo.

Círculos aleatorios a 512×512 dibuja entre 10 y 40 círculos semitransparentes de distintos tamaños y colores sobre un fondo aleatorio, creando una composición abstracta similar a burbujas.

Degradado aleatorio a 800×400 combina entre 2 y 6 colores aleatorios a lo largo de un degradado lineal con ángulo aleatorio, produciendo transiciones de color suaves adecuadas para fondos.

Características

  • Cinco tipos de patrones distintos: ruido, rectángulos, círculos, degradado y líneas
  • Dimensiones configurables desde 1×1 hasta 2048×2048 píxeles
  • Tres formatos de salida: PNG, JPEG y WebP
  • Salida Base64 instantánea con copia y descarga en un solo clic
  • Se ejecuta íntegramente en el navegador — ningún dato abandona tu dispositivo

Opciones explicadas

  • Ancho / Alto: Define las dimensiones de la imagen en píxeles (1–2048). Los cambios se aplican con retardo para que la imagen se regenere de forma fluida mientras ajustas los controles deslizantes.
  • Patrón: Selecciona el tipo de patrón visual aleatorio que deseas generar. Cada patrón produce un estilo artístico único mediante formas, colores y transparencias aleatorias.
  • Formato de imagen: Elige entre PNG (sin pérdida, mayor tamaño), JPEG (con pérdida, menor tamaño) o WebP (moderno y eficiente). Esto afecta tanto a la imagen descargable como a la salida Base64.

Casos de uso

  • Incrustar imágenes de marcador de posición o decorativas directamente en HTML o CSS sin necesidad de alojar archivos por separado
  • Generar imágenes de prueba para flujos de trabajo de desarrollo y QA que requieran contenido visual variado
  • Crear arte procedural único o fondos abstractos para maquetas de diseño