Placeholder Image Generator

WHAT IT DOES

Placeholder Image Generator creates custom placeholder images for design mockups, website development, and testing. Set the width and height, choose background and text colors, and add optional text. The tool generates an SVG image that can be used directly in HTML with a copyable data URI or downloaded as a file. Choose from PNG, JPEG, or SVG formats. Six preset sizes (Square, Social, Banner, Thumbnail, Hero, and Mobile) help you quickly create images for common use cases. The generated image includes optional dimension text to show the size.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All image generation, SVG creation, and data URI encoding occur on your machine without any network requests. No image data, generated content, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox. Placeholder images are generated as SVG with data URI encoding.

HOW TO USE

Click the extension toolbar icon to open the Placeholder Image Generator panel. Set the width and height in pixels. Choose background and text colors using the color pickers. Enter optional text to display on the image. Select the output format (PNG, JPEG, or SVG). The preview shows the generated image. The output section displays the data URI and provides three actions: "Copy URL" copies the data URI to your clipboard, "Download" saves the image as a file, and "Copy HTML" copies a ready-to-use HTML img tag. Click a preset (Square, Social, Banner, Thumbnail, Hero, Mobile) to load pre-configured dimensions. Toggle "Show dimensions in image" to display the size on the placeholder. The tool updates automatically when you change any setting.

THE PLACEHOLDER GENERATION ENGINE — WHY IT WORKS

Most placeholder image tools rely on external services or require network requests. This tool generates images entirely in-browser using SVG (Scalable Vector Graphics) with data URI encoding. The engine builds an SVG string with the specified dimensions, background color, text, and text color. The text is centered both horizontally and vertically using SVG's text-anchor and dominant-baseline attributes. The font size is calculated dynamically based on the image dimensions (8% of the smaller dimension, with a minimum of 14px). The SVG is then encoded as a data URI using encodeURIComponent, creating a self-contained image that can be used anywhere. The download function creates a Blob from the SVG string and triggers a download. The copy HTML function generates a complete img tag with the data URI and dimensions. This approach provides fast, self-contained placeholder generation without any external dependencies.

THE PANEL

The Placeholder Image Generator panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the preview and controls adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to generate placeholders in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. The generated images are SVG format; PNG and JPEG formats are also available as SVG with appropriate file extensions. The data URI can be long for large images; copying HTML is the recommended method for use in websites. The preview uses an img element with the data URI; very large images may take a moment to render. All placeholder data is processed locally and is never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.