Placeholder Image URL Builder

What this tool does

The Placeholder Image URL Builder creates image URLs for two well-known placeholder services so you can drop temporary images into mockups and prototypes. Pick placehold.co for a solid-colour block — choose width, height, background and text colours, optional custom text and an output format (PNG, JPG, SVG, WebP or GIF). Pick Lorem Picsum for a real photograph — choose width, height, an optional seed, a grayscale toggle and a blur amount. The tool shows the finished URL with a copy button and a live preview of the image.

The URL is built in your browser. The preview is the one deliberate exception: your browser loads that image straight from the placeholder service so you can see what the URL produces.

Why it matters for SEO

Placeholder images are a design-stage convenience, and using them well keeps your eventual SEO clean. During layout work, a correctly sized placeholder lets you reserve the exact width and height an image will occupy, which prevents layout shift — the jump that happens when a real image loads late. Cumulative Layout Shift is a Core Web Vitals metric Google uses, so getting dimensions right early carries through to a better score later.

Just as important is knowing when to remove them. A placeholder URL on a live page is an uncontrolled third-party request that slows the page and contributes nothing to relevance. Real images, by contrast, can rank in image search and support the page through descriptive file names and alt text. Treat this tool as scaffolding: build with it, then replace every placeholder before launch.

How to use it

1. Choose a service with the segmented control — placehold.co for solid blocks, Lorem Picsum for real photos.
2. Set the width and height in pixels — match the slot the image will fill in your design.
3. For placehold.co, set the background and text colours as hex values, add custom text if you want, and pick a format. For Lorem Picsum, optionally add a seed for a repeatable photo, toggle grayscale, and set a blur level.
4. Copy the generated URL and check the live preview. Use Retry preview if a transient network issue stops the image loading.

SEO best practices

Use placeholders only while building, and size them to the real image’s intended dimensions so your layout is stable from the first draft. When you swap in production images, give each a descriptive, hyphenated file name and meaningful alt text, compress them, and serve modern formats like WebP or AVIF. Self-host production images rather than hot-linking any third party, set explicit width and height attributes to lock in space, and lazy-load images below the fold. A placeholder that survives to production is a missed optimisation and an avoidable dependency.

Common mistakes to avoid

The biggest mistake is shipping placeholder URLs to a live site — it leaves you dependent on an external service, adds latency, and offers zero SEO value. Another is using random Lorem Picsum images without a seed, so mockups and screenshots change every reload. Avoid requesting placeholders far larger than they display, which wastes bandwidth. Do not forget alt text when you replace placeholders with real images, and do not assume a placeholder service has any uptime guarantee — it can rate-limit or go down without warning.

Privacy & your data

The URL is assembled entirely in your browser from the options you select; none of those settings are sent to us or stored. The deliberate exception is the live preview: to show you the actual result, your browser requests the image directly from the third-party service you chose — placehold.co or picsum.photos — exactly as a visitor’s browser would. That request goes to the service, not to this site, and it is subject to that service’s own policies. If you only need the URL, copy it and ignore the preview; nothing else about your session leaves your device.