Placeholder Image Generators for Mockups

When you are building a website or app, waiting for final photos, illustrations, or user avatars before starting development is a waste of time. Placeholder images let you build the layout, test responsive behavior, and present mockups to stakeholders without needing real content.

Placeholder services generate images at any dimension you need, on the fly. Request a 400x300 image, and you get one instantly. Need a 1200x800 hero image for a different section? Change the URL parameters and you have it.

This is not just about convenience. Using placeholders during development exposes layout issues early. You discover that your card grid breaks when images have different aspect ratios, or that your hero section looks wrong with a tall image instead of a wide one. These are problems you want to find before final images are ready.

For placeholder text alongside your placeholder images, the Lorem Ipsum Generator creates realistic-looking text blocks at any length you need.

Popular Placeholder Image Services

Picsum (picsum.photos): random photos from Unsplash at any dimension. The best option for realistic-looking mockups. URL format: https://picsum.photos/400/300. Add /seed/keyword for repeatable images.

Placeholder.com: solid color images with optional text overlay showing dimensions. Best for wireframes and technical layouts where you want to see the exact size. URL format: https://via.placeholder.com/400x300.

Placehold.co: modern alternative to Placeholder.com with more customization (background color, text color, format). URL format: https://placehold.co/400x300/EEE/333.

UI Faces (uifaces.co): specifically for user avatars. Returns realistic profile photos. Useful for social features, comment sections, and team pages.

Lorem Picsum: same as Picsum but with additional filters (grayscale, blur). URL format: https://picsum.photos/400/300?grayscale&blur=2.

For development purposes, Picsum gives the most realistic results. For wireframing and design documentation, Placeholder.com's labeled images make dimensions immediately clear.

When transitioning from placeholders to real images, resize your final images to match the placeholder dimensions. The Image Resizer handles this precisely so your layout does not shift when you swap in the real content.

Using Placeholders in Development Frameworks

React / Next.js: `jsx // Using picsum with Next.js Image component `

Add picsum.photos to your next.config.js remote patterns: `js images: { remotePatterns: [ { protocol: 'https', hostname: 'picsum.photos' } ] } `

HTML/CSS prototyping: `html

Card Title

Card description text goes here.

CSS background images: `css .hero { background-image: url('https://picsum.photos/1920/1080'); background-size: cover; height: 60vh; } `

Figma and design tools: paste placeholder URLs directly into image fills. This keeps your design files realistic without hunting for stock photos during the wireframing phase.

Use the seed parameter in Picsum to get the same image every time for a given seed value. This ensures your mockups look consistent across sessions and team members.

Placeholder Best Practices for Design Mockups

Match the final image proportions: if your hero section will use 16:9 images, use 16:9 placeholders. If your avatars will be circular, use square placeholders and apply border-radius. This catches aspect ratio issues before final images arrive.

Use realistic content density: a single placeholder on a page does not test how the layout handles multiple images. Fill all image slots with placeholders at various sizes to see how the page responds.

Test with different image types: not all final images will look the same. Some might be light, some dark, some with people, some with products. Use random Picsum images (no seed) to simulate this variety and ensure your text remains readable over different backgrounds.

Do not leave placeholders in production: this sounds obvious, but it happens regularly. Set up a linting rule or build check that flags external placeholder domains in production code.

Document placeholder dimensions: when handing off to content creators, specify the exact dimensions they need to provide. "We need a 1200x630 image for the Open Graph tag and a 400x400 square for the profile section." The Image Resizer link in your documentation helps them resize their images to the correct dimensions.

For generating placeholder favicons during development, the Favicon Generator creates browser tab icons from text or simple shapes. This keeps your browser tabs organized when working on multiple projects simultaneously.

Building Your Own Placeholder Service

For internal use or custom requirements, building a simple placeholder service takes minimal effort:

Canvas-based approach (Node.js with canvas package): `javascript const { createCanvas } = require('canvas');

function generatePlaceholder(width, height, text) { const canvas = createCanvas(width, height); const ctx = canvas.getContext('2d'); ctx.fillStyle = '#E0E0E0'; ctx.fillRect(0, 0, width, height); ctx.fillStyle = '#888'; ctx.font = '20px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(text || ${width}x${height}, width/2, height/2); return canvas.toBuffer('image/png'); } `

SVG-based approach (no dependencies): `javascript function svgPlaceholder(width, height) { return ``; } `

Advantages of a self-hosted service: - No external dependency (placeholder services can go down) - Custom branding and colors - Privacy (no external requests during development) - Works offline

For most teams, using Picsum or Placeholder.com is simpler. Build your own only if you need custom features or cannot rely on external services during development.

FAQ

Are placeholder image services free?

Yes. Picsum, Placeholder.com, and Placehold.co are all free to use, including for commercial projects. They are funded by the open-source community or donations. Be respectful of their bandwidth by not using them in production or high-traffic situations.

Can I use Picsum images in my final product?

Picsum serves images from Unsplash, which uses a permissive license that allows commercial use. However, for your final product, download images directly from Unsplash where you can choose specific photos and credit the photographers. Do not hot-link to picsum.photos in production.

How do I handle placeholder images in tests?

Mock the image URLs in your tests rather than hitting external services. Use local test fixtures or data URIs for predictable test images. External service calls in tests make them slow, flaky, and dependent on network connectivity.

What size should my placeholder images be?

Match your design specifications. If your design calls for 800x600 thumbnails, use 800x600 placeholders. If your design is responsive and images scale, use the largest size you will display (the max-width of the image container) and let CSS handle the scaling.