Skip to main content
Toollyz

Search tools

Search for a command to run...

Lorem Ipsum Image Generator

Generate placeholder images at any width × height (OG, square, story, hero, thumbnail, avatar presets included). Four render modes: solid, two-stop gradient, diagonal stripes, dot grid. Adjustable foreground/background colours, label override, font size, noise grain. Exports at devicePixelRatio for retina-sharp output. PNG or JPG. 100% offline.

What is the Lorem Ipsum Image Generator?

Lorem Ipsum Image Generator produces the labelled placeholder rectangles you put in mockups, wireframes, dev environments and Storybook examples — but generated locally so you never depend on a third-party service like placeholder.com being online. Render modes: Solid (single flat colour), Gradient (two-stop linear gradient with the second colour pulled from the accent picker), Diagonal Stripes (procedural stripe overlay on the base — useful for 'work-in-progress' assets), and Dots (regular grid of small dots). Eight size presets cover the formats you actually use day-to-day — Open Graph (1200×630), Square (1080×1080), Story (1080×1920), Twitter (1600×900), Hero (1920×1080), Thumbnail (400×300), Avatar (256×256), Favicon (512×512) — or set any custom width × height. The label is the dimensions by default but you can override with any text (e.g. 'Logo goes here'); font size is a % of the shorter dimension so it scales correctly at any aspect ratio. Optional noise overlay adds film-grain texture. Output renders at `window.devicePixelRatio` so the export is sharp on Retina displays. Download as PNG (transparent-supporting) or JPG (smaller, lossy).

How to use it

  1. Pick a size preset or punch in custom width × height.
  2. Pick a render mode — Solid for flat, Gradient for vibrancy, Stripes/Dots for decoration.
  3. Set Background and Accent colours (Accent = gradient stop 2, or stripe/dot colour).
  4. Optionally override the auto label with custom text.
  5. Tweak font size % and noise % to taste.
  6. Click Copy PNG (clipboard) or Download PNG/JPG.

Benefits

  • Eight size presets: OG, Square, Story, Twitter, Hero, Thumbnail, Avatar, Favicon.
  • Custom width × height up to 4,096 px.
  • Four render modes: Solid, Gradient, Diagonal Stripes, Dots.
  • Configurable background, accent (gradient stop 2 / pattern colour), and foreground (label).
  • Custom label text — override the default WIDTHxHEIGHT.
  • Font size as % of shorter dimension — scales correctly at any aspect ratio.
  • Optional noise grain (0-100%) for film-style texture.
  • Renders at devicePixelRatio for retina-sharp exports.
  • Copy PNG to clipboard (where supported) or download PNG / JPG.
  • Runs 100% in your browser — no server, no third-party CDN dependency.

Frequently asked questions

How is this different from placeholder.com or via.placeholder.com?

Those are hosted services — they require internet, and they go down. This generator runs entirely in your browser. The labelled image is identical visually but the asset is yours to download once, then host yourself (or embed as a data URL).

Why use devicePixelRatio?

Retina screens have 2× or 3× pixel density. Rendering at 1× and letting the browser scale results in blurry text. We multiply the canvas dimensions by devicePixelRatio (capped at 2 to avoid huge files) and `ctx.scale` so the on-screen image looks sharp and the export is high-res.

What's the max width/height?

4,096 px each. Beyond that browsers start hitting canvas memory limits. For larger assets, generate at smaller scales and upscale separately.

Can I generate multiple sizes at once?

Not in one click — change the size and re-export. Most mockups need only a handful so this hasn't been a friction point.

What's the difference between PNG and JPG?

PNG is lossless and supports transparency — pick it when the placeholder has crisp edges or you want it transparent. JPG is lossy but ~5× smaller — pick it for photo-style placeholders where the size matters more than the per-pixel quality.

Why does the label have a subtle shadow?

Drop shadow at ~25% of the font size makes the label readable across any background colour. Without it, light text on light backgrounds (or dark on dark) becomes invisible at low font sizes.

Can I add multiple labels?

Not currently — one label per image. For multi-region wireframes use the export PNG as a base in a real design tool.

What if I want a transparent background?

Set background to white-ish and export as PNG — the canvas API doesn't expose alpha-channel background directly. For a true alpha background, set Solid mode and pick a colour with low opacity, then export PNG.

Does the noise overlay take long on big images?

It's O(width × height) — a 1920×1080 image processes in ~50ms on modern hardware. The browser may briefly freeze on very large images; reduce size or noise % if it bothers you.

Are my settings saved between visits?

Yes — all dimensions, mode, colours, label, font size, noise — persist in localStorage under `toollyz:placeholder-image`.

Is anything uploaded?

No. Rendering and export run entirely in your browser.

Related tools

See all image tools