Placeholder Image Generator Guide: Layout Testing & Prototyping

How to Use the Generator

Set your dimensions

Enter the exact Width and Height in pixels (1–4000px each). Use the Preset buttons for the most common ratios:

Control the image with seed

The Seed field determines which photo from the Lorem Picsum library is loaded. The same seed always returns the same image — useful when you want a consistent placeholder across sessions or team reviews. Click Randomize to pick a different photo while keeping your current dimensions.

Apply visual effects

• Grayscale — strips color from the photo. Use this when presenting wireframes so stakeholders focus on layout, not the image content.
• Blur (0–10) — applies a Gaussian blur. Useful for simulating low-quality image placeholders (LQIP), lazy-load previews, or hero backgrounds where text must stay readable.

Copy the URL or download

• Copy Image URL — copies the full picsum.photos URL to your clipboard so you can paste it directly into HTML, CSS, Markdown, or Figma.
• Download JPG — fetches and saves the image file to disk for offline use or Figma imports.

The generated URL format is:

https://picsum.photos/seed/{seed}/{width}/{height}?grayscale&blur={0-10}

Examples:

# 1280×720 photo, always the same (seed 42)
https://picsum.photos/seed/42/1280/720

# Same photo in grayscale
https://picsum.photos/seed/42/1280/720?grayscale

# Blurred, for LQIP
https://picsum.photos/seed/42/1280/720?blur=5

# Grayscale + blur combined
https://picsum.photos/seed/42/1280/720?grayscale&blur=3

Why Placeholder Images Matter in Development

Layouts built without images have a fatal flaw: they're tested in a condition that never exists in production. Adding images changes:

• Column widths — images often have fixed min-widths that break fluid columns
• Card heights — variable image heights break grid alignment
• Flex/grid behavior — images with natural aspect ratios change how flex containers distribute space
• Overflow and clipping — object-fit: cover behavior only becomes visible with actual image dimensions
• Cumulative Layout Shift (CLS) — images without defined dimensions shift the page as they load

A placeholder image with the correct dimensions solves all of these — your layout is built with real proportions from the start.

Common Placeholder Image Services

Our generator is powered by Lorem Picsum for realistic photo placeholders and includes controls for dimensions, grayscale, and blur — giving you images that look like real content rather than test patterns.

Aspect Ratio Fundamentals

Always specify images using aspect ratios, not fixed pixel heights. This ensures responsive behavior:

/* Old approach — fixed height breaks on small screens */
.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Modern approach — maintains ratio at any width */
.card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

Common aspect ratios by use case:

Use the preset buttons in the generator to set these ratios instantly, then fine-tune the pixel dimensions to match your exact breakpoints.

Responsive Image Implementation

srcset for resolution-switching

<!-- Browser chooses the right size based on device pixel ratio and viewport -->
<img
    src="https://picsum.photos/seed/42/800/450"
    srcset="https://picsum.photos/seed/42/400/225 400w,
            https://picsum.photos/seed/42/800/450 800w,
            https://picsum.photos/seed/42/1200/675 1200w"
    sizes="(max-width: 640px) 400px,
           (max-width: 1024px) 800px,
           1200px"
    alt="Product hero image"
    width="1200"
    height="675"
>

Always include width and height attributes — they let the browser reserve the correct space before the image loads, eliminating layout shift (CLS).

Art direction with <picture>

<!-- Different image crops for different screen sizes -->
<picture>
    <!-- Mobile: square crop -->
    <source media="(max-width: 640px)" srcset="https://picsum.photos/seed/42/400/400">
    <!-- Tablet: wide crop -->
    <source media="(max-width: 1024px)" srcset="https://picsum.photos/seed/42/800/400">
    <!-- Desktop: ultra-wide -->
    <img src="https://picsum.photos/seed/42/1600/600" alt="Hero" width="1600" height="600">
</picture>

CSS object-fit behavior

/* How images fill their container */
.card-image {
    width: 100%;
    height: 250px;
    object-fit: cover;       /* Crop to fill — most common for cards */
    object-position: center; /* What part to show if cropping */
}

Test this behavior with placeholder images before your design team delivers final photography — object-fit: cover with centered positioning works for most photos, but portraits may need object-position: top to keep faces visible.

Simulating Loading States

Production images don't load instantly. Test your loading states during development:

/* Shimmer animation for image skeleton */
.image-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; }
}

Use placeholder images with the blur parameter enabled to simulate low-quality image placeholders (LQIP) — the common technique of loading a tiny blurred version first, then replacing with the full image.

Auditing Images Before Launch

When real images replace your placeholders, check each one:

• File size: use browser DevTools to confirm images are appropriately sized
• EXIF metadata: before publishing, check for embedded GPS coordinates with our EXIF Viewer — photos from client cameras often contain location data
• Alt text: every <img> needs meaningful alt text for accessibility and SEO
• Contrast: if text overlays the image, check readability with our Contrast Checker

Combine placeholder images with our Lorem Ipsum Generator for complete structural mockups that look convincingly close to the final design — helping stakeholders review layout decisions without getting distracted by content.