What Is a Placeholder Image? The Complete Guide
A placeholder image is a temporary, generic image used in web development and design to represent the space where a real image will eventually appear. Placeholder images allow developers to build and test layouts without sourcing actual photography or graphics, and they help designers communicate image dimensions and placement to clients and stakeholders.
What Does "Placeholder Image" Mean?
The term "placeholder image" refers to any image that holds the place of a real image that has not yet been finalized. In web development, placeholder images are used during the construction phase of a website or application. They fill containers with the correct dimensions so the layout looks complete and functional while the project is still in progress.
Placeholder images are sometimes called dummy images, filler images, mock images, or Lorem Ipsum images — a nod to the well-known Lorem Ipsum dummy text used in typography and design. Just as Lorem Ipsum text fills text containers without meaningful content, a placeholder image fills image containers without meaningful visuals.
Why Do Developers Use Placeholder Images?
There are several important reasons developers and designers rely on placeholder images during a project:
- Layout testing — Placeholder images let you see exactly how a layout will look before real content is ready. Without them, empty image containers collapse to zero height, which distorts the design completely.
- Prototyping speed — Instead of spending time finding or creating real images during the prototyping phase, developers use placeholder image URLs to keep the workflow moving.
- Team collaboration — Sharing a mockup or staging site with placeholder images communicates the intended design to clients, project managers, and content teams without requiring finalized assets.
- Responsive design testing — Placeholder images with exact dimensions help verify that responsive breakpoints and CSS grid/flexbox layouts work correctly across screen sizes.
- API and database seeding — When populating a database with test data, placeholder image URLs provide valid image sources without requiring real uploads.
- Fallback handling — In production applications, placeholder images are used as fallbacks when a user has not uploaded a profile picture, when a product has no photos, or when an image fails to load.
How Do Placeholder Image Services Work?
Modern placeholder image services like PlaceholderImage.co work entirely through URL-based APIs. You construct a URL that specifies the image dimensions, colors, and optional text — and the service generates the image on the fly, returning it with the correct HTTP headers.
For example, the URL https://placeholderimage.co/600x400 returns a 600×400 SVG placeholder image with a gray background and the text "600x400" centered on the image. You can customize every aspect: background color, text color, label text, font, format, and retina scale — all through the URL.
This approach means placeholder images can be used directly in HTML <img> tags, CSS background-image properties, JavaScript, React components, Vue templates, Angular, Flutter, and any other environment that can make HTTP requests.
What Are the Most Common Placeholder Image Sizes?
The most frequently used placeholder image dimensions vary by use case:
- 100x100, 200x200 — user avatars and profile placeholder images
- 300x300, 400x400 — product placeholder images for e-commerce
- 600x400 — blog post thumbnails and article images
- 1200x630 — Open Graph social sharing placeholder images
- 1280x720 — video thumbnail placeholder images (16:9 HD)
- 1920x1080 — hero banner placeholder images (Full HD)
See the full placeholder image sizes guide for a complete reference of standard dimensions.
What Formats Are Available for Placeholder Images?
PlaceholderImage.co supports six formats: SVG (default), PNG, JPEG, WebP, AVIF, and GIF. SVG is the recommended format for most use cases because it is infinitely scalable, has the smallest file size, and supports transparency. For React Native, Flutter, and other native app frameworks that require raster images, PNG is the most compatible choice.
Learn more on the placeholder image formats page.
How to Add a Placeholder Image in HTML
The simplest way to add a placeholder image in HTML is to use the service URL as the src attribute:
<img src="https://placeholderimage.co/600x400" width="600" height="400" alt="placeholder image" /> Always include the width and height attributes to prevent layout shift. Read the complete HTML placeholder image guide for more examples.
Placeholder Images vs. Skeleton Loaders
Placeholder images and skeleton loaders serve different purposes. A placeholder image is a static image that represents where a real image will appear — it shows the correct dimensions and optionally a label. A skeleton loader is an animated CSS loading state that shows a pulsing or shimmering gray block to indicate that content is loading.
Placeholder images are better for development, prototyping, and fallback states. Skeleton loaders are better for user-facing loading states in production applications. Many apps use both — a skeleton loader while an image is being fetched from a CDN, and a placeholder image as the fallback if the image fails to load.
The History of Placeholder Image Services
The first dedicated placeholder image service was lorempixel.com, launched around 2012, which served random photography in specified dimensions. This was followed by placehold.it (now placehold.co) and via.placeholder.com, which focused on clean, labeled gray boxes rather than random photography. These URL-based approaches became the standard because they are predictable, fast, and require zero setup.
Today, placeholder image services run on global CDN infrastructure — PlaceholderImage.co runs on Cloudflare's worldwide edge network — ensuring every placeholder image request is served in milliseconds regardless of the user's location.