Placeholder Image Generator

Placeholder Image Generator: Create Custom Dummy Images for Development and Design

Placeholder images are blank or labeled images used during development and prototyping to represent spaces where real images will eventually appear. They allow developers to build and test layouts, components, and user interfaces without waiting for final assets from designers or content teams. Our Placeholder Image Generator creates custom-sized placeholder images with configurable colors, text labels, and formats "” instantly and for free.

Placeholder images serve a critical role in modern web development workflows. They allow frontend developers and designers to work independently: the developer builds the layout using placeholder images of the correct dimensions, and the designer or content team supplies the real images later. This parallel workflow is the norm in agile development teams. Placeholder images are also essential for design systems documentation, component library Storybook stories, README screenshots, and user acceptance testing scenarios.

A History of Placeholder Image Services

The concept of a remote placeholder image service originated with placehold.it (now via.placeholder.com), launched around 2009. The service provided a simple URL API "”https://via.placeholder.com/300x200 "” that returned a gray rectangle with the size printed as text. This format became the universal standard for placeholder images in web development.

Many creative variants followed. Lorempixel (now defunct) provided real photographs in specific categories (food, nature, people) as placeholders. Picsum Photos (picsum.photos) uses unsplash-style photographs randomly selected by seed. Placebear, Placedog, and similar services provided humorous alternatives with bear and dog photos. For professional projects, these photograph-based placeholders could sometimes confuse clients into thinking real images had been selected. The labeled gray rectangle remains the clearest signal that "this is a placeholder."

Common Placeholder Image Dimensions

Standard dimensions used in web design correspond to common UI patterns:

• 16×16: favicon, small icon
• 32×32: standard icon
• 48×48: medium icon, avatar in list view
• 64×64: small avatar
• 100×100: small profile photo
• 150×150: thumbnail, product card image
• 200×200: square thumbnail
• 300×200: horizontal card image, blog post thumbnail
• 400×300: standard article image
• 600×400: featured image
• 800×600: large content image, 4:3 ratio
• 1200×630: Open Graph image (og:image), Facebook share preview
• 1280×720: 720p HD, hero image, banner
• 1920×1080: 1080p Full HD, full-width hero banner
• 2560×1440: 2K/1440p, large background image

Aspect ratios matter as much as dimensions. Common aspect ratios in web design:

• 1:1 (square): profile photos, product thumbnails, avatar
• 4:3: traditional monitor, general content images
• 16:9: HD video, wide hero banners, slides
• 3:2: DSLR photography, wide card images
• 2:1: wide panoramic banners
• 9:16: portrait (Stories, TikTok, mobile full-screen)
• 21:9: ultra-wide cinematic

Generating Placeholder Images with CSS

For pure CSS placeholder implementations without any external dependency, several techniques work:

CSS Background Color with Aspect Ratio

.placeholder {
  background-color: #e5e7eb;
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.875rem;
}
.placeholder::before {
  content: "Image placeholder";
}

CSS-Generated SVG Data URI

An SVG data URI can be embedded directly in CSS as a background image, creating a self-contained placeholder with custom colors and text:

background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="300" height="200"%3E%3Crect width="100%25" height="100%25" fill="%23e5e7eb"/%3E%3Ctext x="50%25" y="50%25" text-anchor="middle" dominant-baseline="middle" fill="%23888" font-family="sans-serif" font-size="14"%3E300×200%3C/text%3E%3C/svg%3E');

Generating Placeholder Images with SVG

SVG is the ideal format for placeholder images because it is infinitely scalable, tiny in file size, and can be generated on the fly with arbitrary dimensions. A complete SVG placeholder:

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300">
  <rect width="100%" height="100%" fill="#e5e7eb"/>
  <!-- Cross pattern for visual interest -->
  <line x1="0" y1="0" x2="400" y2="300" stroke="#d1d5db" stroke-width="1"/>
  <line x1="400" y1="0" x2="0" y2="300" stroke="#d1d5db" stroke-width="1"/>
  <rect x="1" y="1" width="398" height="298" fill="none" stroke="#d1d5db" stroke-width="1"/>
  <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle"
    fill="#6b7280" font-family="sans-serif" font-size="16" font-weight="500">
    400×300
  </text>
</svg>

SVG placeholders can include diagonal lines (the classic "X" pattern from design wireframes), a camera icon, custom text, or any other visual cue. The SVG can be inlined directly in HTML or referenced as an src attribute value.

URL-Based Placeholder Services

Remote URL-based placeholder services provide the quickest way to add placeholders to HTML without generating files:

via.placeholder.com

https://via.placeholder.com/300x200
https://via.placeholder.com/300x200/ff0000/ffffff?text=Title
https://via.placeholder.com/300  <!-- square -->

picsum.photos (Lorem Picsum)

https://picsum.photos/300/200          <!-- random photo -->
https://picsum.photos/seed/abc/300/200   <!-- deterministic -->
https://picsum.photos/300/200?grayscale  <!-- grayscale -->
https://picsum.photos/300/200?blur=5     <!-- blurred -->

dummyimage.com

https://dummyimage.com/300x200/000/fff
https://dummyimage.com/300x200.png
https://dummyimage.com/300x200/ff0000/00ff00&text=Hello

Self-Hosted with Canvas API

For projects that cannot depend on external services (air-gapped environments, CI testing, offline development), the HTML Canvas API can generate placeholder images in-browser:

function generatePlaceholder(width, height, bg = '#e5e7eb', fg = '#6b7280') {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, width, height);
  ctx.strokeStyle = fg;
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(width, height);
  ctx.moveTo(width, 0);
  ctx.lineTo(0, height);
  ctx.stroke();
  ctx.fillStyle = fg;
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = `${Math.min(width, height) * 0.1}px sans-serif`;
  ctx.fillText(`${width}×${height}`, width / 2, height / 2);
  return canvas.toDataURL();
}

Placeholder Images in Design Tools

Figma

Figma supports placeholder images via the "image fill" option: create a frame with the target dimensions, fill it with a color (typically gray), and add a text label. Figma's component library for design systems often includes a standardized "placeholder" component with consistent styling. The Unsplash plugin provides real photograph placeholders directly in Figma.

Sketch

Sketch has built-in placeholder support: rectangles with "data" fills that auto-populate with images from a predefined set. The "Images" data type provides random stock photographs. Custom data sources can be configured for project-specific placeholder sets.

Adobe XD

XD provides "Repeat Grid" with auto-populated image content from a folder, making it easy to create realistic-looking prototype layouts with multiple card images simultaneously.

Placeholder Images in JavaScript Frameworks

React

// Simple SVG placeholder component
function Placeholder({ width, height, text, bg = '#e5e7eb', fg = '#9ca3af' }) {
  return (
    <svg
      width={width}
      height={height}
      xmlns="http://www.w3.org/2000/svg"
      viewBox={`0 0 ${width} ${height}`}
    >
      <rect width="100%" height="100%" fill={bg} />
      <text
        x="50%"
        y="50%"
        textAnchor="middle"
        dominantBaseline="middle"
        fill={fg}
        fontSize={Math.min(width, height) * 0.1}
        fontFamily="sans-serif"
      >
        {text || `${width}×${height}`}
      </text>
    </svg>
  );
}

Next.js Image Component

Next.js's <Image> component supports a placeholder prop:

• placeholder="empty": no placeholder (default)
• placeholder="blur": a blurred low-resolution version while the full image loads. For local images, Next.js generates the blur automatically; for remote images, provide a blurDataURL
• placeholder="data:...": use a custom data URI as the placeholder

import Image from "next/image";

<Image
  src="/product.jpg"
  width={400}
  height={300}
  placeholder="blur"
  alt="Product photo"
/>

Lazy Loading and Low-Quality Image Placeholders (LQIP)

The Low-Quality Image Placeholder pattern uses a tiny, heavily compressed (10×10 pixels or smaller) version of the actual image as a placeholder that is immediately available, then progressively replaces it with the full-resolution image as it loads. The placeholder is often encoded as a base64 data URI and inlined directly in the HTML, eliminating an extra network request. Tools like Squoosh, Sharp, and plaiceholder can generate appropriate LQIP data URIs.

Skeleton Screens: The Modern Alternative

Skeleton screens (also called content placeholders or skeleton loaders) are UI patterns where blank shapes matching the approximate layout of loading content are shown while data is fetched. For images, this means a gray rectangle of the correct aspect ratio with a pulsing animation. This approach provides better perceived performance than a loading spinner and communicates the layout to the user before content arrives.

/* CSS skeleton loader */
.skeleton-image {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Skeleton screens are the current industry standard for loading states in web and mobile applications, used by Facebook, LinkedIn, YouTube, and virtually every major application.

Image Placeholder Best Practices for SEO

When using placeholder images in production (which should be rare "” placeholders should be replaced before launch), be aware of SEO implications:

• Always include descriptive alt text "” even for placeholders, an empty alt="" is better than omitting it
• Avoid linking to external placeholder services in production; they may have downtime and introduce external dependencies
• External placeholder services may be blocked by corporate firewalls and content security policies
• Placeholder images count against Core Web Vitals LCP (Largest Contentful Paint) if they are large "” keep placeholder images appropriately sized

Server-Side Placeholder Generation

For dynamic applications, placeholder images can be generated server-side on demand:

Node.js with Sharp

import sharp from 'sharp';

async function generatePlaceholder(width, height) {
  return sharp({
    create: {
      width,
      height,
      channels: 3,
      background: { r: 229, g: 231, b: 235 }
    }
  })
  .png()
  .toBuffer();
}

Express.js Placeholder Route

app.get('/placeholder/:size', async (req, res) => {
  const [width, height] = req.params.size.split('x').map(Number);
  const buffer = await generatePlaceholder(width, height);
  res.set('Content-Type', 'image/png');
  res.set('Cache-Control', 'public, max-age=31536000');
  res.send(buffer);
});

How to Use This Placeholder Image Generator

Enter the desired width and height in pixels, customize the background color, text color, and label text. The generator produces the image immediately in the preview and offers download as PNG or SVG. You can also copy the image as a base64 data URI for inline embedding in HTML or CSS. Select from preset sizes for common use cases (avatar, card image, hero banner, Open Graph) to quickly generate standard-dimension placeholders. The generated images are clean, clearly labeled with their dimensions, and suitable for development wireframes, Storybook stories, design documentation, and prototype presentations.