What is a Base64 image?

A Base64 image is a way of representing binary image data as plain text using the Base64 encoding scheme. Instead of referencing an external file, the entire image is embedded directly as a string of ASCII characters. This is commonly used in HTML and CSS via data URIs (data:image/png;base64,...), allowing images to be included inline without separate HTTP requests. Base64 encoding increases the data size by roughly 33%, but eliminates the need for additional file hosting or network round-trips.

Tool description

This tool generates random images with customizable patterns and dimensions, then outputs the result as a Base64-encoded string. Choose from five visual patterns — noise, rectangles, circles, gradients, or lines — adjust the width and height up to 2048×2048 pixels, and select an output format (PNG, JPEG, or WebP). The image is generated entirely in the browser using the Canvas API, with no server uploads or external dependencies.

Examples

Random Noise at 256×256 produces a colorful static pattern where every pixel has a randomly assigned RGB value — similar to TV static but in full color.

Random Circles at 512×512 draws 10–40 semi-transparent circles of varying sizes and colors over a random background, creating an abstract bubble-like composition.

Random Gradient at 800×400 blends 2–6 random colors along a randomly angled linear gradient, producing smooth color transitions suitable for backgrounds.

Features

  • Five distinct pattern types: noise, rectangles, circles, gradient, and lines
  • Configurable dimensions from 1×1 up to 2048×2048 pixels
  • Three output formats: PNG, JPEG, and WebP
  • Instant Base64 output with one-click copy and download
  • Runs entirely in the browser — no data leaves your device

Options explained

  • Width / Height: Set the image dimensions in pixels (1–2048). Changes are debounced so the image regenerates smoothly as you adjust the sliders.
  • Pattern: Select the type of random visual pattern to generate. Each pattern produces a unique artistic style using randomized shapes, colors, and transparency.
  • Image Format: Choose between PNG (lossless, larger), JPEG (lossy, smaller), or WebP (modern, efficient). This affects both the downloadable image and the Base64 output.

Use cases

  • Embedding placeholder or decorative images directly in HTML or CSS without hosting separate files
  • Generating test images for development and QA workflows that require varied visual content
  • Creating unique procedural art or abstract backgrounds for design mockups