What Are Placeholder Images?

Placeholder images are temporary graphics used during the design and development process. They allow designers and developers to visualize layouts, test responsive behavior, and present mockups before final content is ready. They're essential for prototyping and ensuring designs work at various image sizes.

Why Use Placeholder Images?

Common Placeholder Image Sizes

Use Case	Common Sizes	Aspect Ratio
Avatar / Profile	32x32, 64x64, 128x128	1:1 (Square)
Thumbnail	150x150, 200x200	1:1 (Square)
Blog Featured Image	1200x630, 1200x675	1.91:1 (Facebook/LinkedIn)
Hero Banner	1920x600, 1920x800	Wide (3:1 to 2.4:1)
Product Image	600x600, 800x800	1:1 (Square)
Video Thumbnail	1280x720, 1920x1080	16:9 (Widescreen)
Instagram Post	1080x1080, 1080x1350	1:1 or 4:5
Card Image	300x200, 400x250	3:2 or 16:10

Placeholder Image Best Practices

• Match final dimensions: Use the exact size of the final image to prevent layout shifts
• Subtle colors: Use muted grays that don't distract from the overall design
• Include dimensions: Display width x height to help developers identify image slots
• Consistent styling: Use the same placeholder style across your project
• Consider dark mode: Ensure placeholders work on both light and dark backgrounds

Data URLs vs. External Services

Popular Placeholder Image Services

• placeholder.com: Simple dimensions-based placeholders
• placehold.co: Modern alternative with more options
• picsum.photos: Random stock photos as placeholders
• placekitten.com: Kitten images for fun prototypes
• dummyimage.com: Highly customizable options

Skeleton Loading Alternative

For production applications, consider using skeleton screens instead of placeholder images:

/* CSS Skeleton Animation */
.skeleton {
    background: linear-gradient(90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

Skeleton screens provide a better perceived performance experience than static placeholders.