Lorem Image Generator

Mockups need images long before the real photography exists. This placeholder image generator draws a correctly sized dummy image on an HTML5 canvas: set the width and height, choose background and text colors, add a label if you want one, and save the result as a PNG. Nothing is uploaded, and the whole thing runs locally in the browser.

How to Use

1. Enter a width and height in pixels. The fields accept 1 to 2000 per side.
2. Pick a background color and a text color with the two color pickers.
3. Optionally type a label. Leaving it blank prints the dimensions automatically.
4. Click Generate. The canvas redraws instantly, and the line below it shows the pixel size plus any contrast warning.
5. Right-click the image and choose Save Image As to download the PNG.

What Gets Drawn, Pixel by Pixel

The rendering order is simple and worth knowing when a placeholder looks wrong.

1. The canvas is resized to exactly the width and height you entered.
2. The entire canvas is filled with the background color via fillRect.
3. The text color is applied, the origin is set to center/center, and the font is set to Arial, sans-serif at max(min(width, height) / 10, 12) pixels.
4. The label is drawn with fillText at the exact center point.

Because the origin is the center, any label is horizontally and vertically centered without manual measurement. A long label is not wrapped or scaled down, so on a small image it can overflow the edges; keep labels short or increase the dimensions.

The page also recomputes the WCAG relative luminance of both colors and shows the contrast ratio. Ratios under 1.5 trigger a “very low contrast” note and under 3 a “low contrast” note. A comfortable placeholder usually pairs a mid-gray background with a darker gray label, which lands well above 3.

Worked Examples

A 16:9 hero slot. Set 1280 × 720 with a light gray #e5e7eb background and a dark #374151 label. The font becomes max(720 / 10, 12) = 72px, large enough to read as a placeholder from across the room. Leave the label blank and it prints 1280 × 720.

A square avatar. Set 256 × 256 with #cccccc on #666666. The font is max(256 / 10, 12) = 25px. The contrast ratio here is close to 2.6, so the tool flags low contrast — useful feedback if you actually intend to read the label, but harmless for a temporary box.

A thin banner. Set 1200 × 90. The shorter side is 90, so the font would be 9px before the floor raises it to 12px. This is a good reason to type an explicit label like AD 1200×90 rather than rely on the dimension text fitting.

Placeholder Versus Real Asset Workflow

The point of a placeholder is to decide layout before content exists. An image’s aspect ratio and visual weight drive a grid far more than its subject does, so a correctly sized gray box lets you settle spacing, cropping, and responsive breakpoints immediately. When the final art arrives, you swap the file and the layout is already proven.

There is a second, less obvious benefit: clear placeholders prevent accidental shipping. Striking stock photos used as stand-ins attract feedback about the photo instead of the design, and they have a habit of surviving into production. A box that literally prints 1280 × 720 cannot be mistaken for finished work.

Placeholder Size Cheat Sheet

When the final asset does not exist yet, matching the dimensions of the real thing is what makes the mockup useful. These are the sizes worth remembering.

Slot	Dimensions	Notes
Social share / Open Graph	1200 × 630	Roughly 1.91:1; safe area is narrower than full width
Full HD hero	1920 × 1080	16:9; a 1280 × 720 version is a lighter stand-in
Video thumbnail	320 × 180	16:9; also fine for cards
Square avatar	256 × 256	Use at least 2× the CSS display size
App icon source	512 × 512	Downscale to the individual icon sizes
Blog inline image	800 × 450	16:9; keeps text from crowding

Enter the dimensions, leave the label blank, and the image prints its own size so reviewers can see at a glance which slot they are looking at.

Limitations and Use Cases

• Opaque backgrounds only. There is no alpha option; the canvas is always filled.
• No text wrapping or auto-shrink. Long labels overflow small canvases.
• PNG only through the UI. The logic module carries a format field and a quality default, but the interface always renders the canvas, and canvas export via browser save produces PNG.
• Not a design tool. There are no borders, gradients, crosshairs, fonts, or multiple text lines.
• Fixed font family. Text uses Arial with a generic sans-serif fallback.

Where the tool does fit:

• Wireframes and mockups where the final images are undecided
• Frontend work that needs real pixel dimensions to test responsive layout and lazy loading
• Seeding CMS templates and staging sites with visually neutral content
• Documentation that must show a required upload size
• Email templates, where an image with known dimensions reserves the correct space

Related Tools

• Lorem Ipsum Generator — Fill text areas with dummy copy.
• Aspect Ratio Calculator — Work out matching width and height pairs.
• Color Picker — Find background and text colors with hex values.
• Image Compressor — Shrink finished images before publishing.
• Favicon Generator — Create a site icon at the right sizes.