Placeholder Images for Development

Placeholder images are essential for web design and development, allowing you to visualize layouts and test responsive designs before final images are available. Lorem Picsum provides free, easy-to-use placeholder images from Unsplash.

Why Use Placeholder Images?

• Visual mockups: Show clients realistic designs
• Testing layouts: Verify responsive behavior
• Performance testing: Test image loading and optimization
• Development speed: Don't wait for final assets
• Client presentations: Professional-looking demos

Common Image Dimensions

Use Case	Dimensions	Example URL
Thumbnail	150x150	https://picsum.photos/150/150
Avatar	200x200	https://picsum.photos/200/200
Card Image	400x300	https://picsum.photos/400/300
Blog Header	1200x600	https://picsum.photos/1200/600
Full HD	1920x1080	https://picsum.photos/1920/1080

Lorem Picsum Features

Basic Usage

https://picsum.photos/800/600  // Random image
https://picsum.photos/seed/abc/800/600  // Specific image

Effects

https://picsum.photos/800/600?grayscale  // Black and white
https://picsum.photos/800/600?blur  // Blurred image
https://picsum.photos/800/600?blur=2  // Custom blur level

Image List

https://picsum.photos/v2/list  // Get list of all images
https://picsum.photos/v2/list?page=2&limit=10  // Paginated list

Alternative Placeholder Services

1. PlaceIMG (Categorized Images)

https://placeimg.com/640/480/any  // Random category
https://placeimg.com/640/480/animals  // Animals
https://placeimg.com/640/480/tech  // Technology

2. Placeholder.com (Solid Colors)

https://via.placeholder.com/350x150  // Default gray
https://via.placeholder.com/350x150/FF0000/FFFFFF  // Red background, white text
https://via.placeholder.com/350x150.png?text=Hello+World  // Custom text

3. DummyImage.com

https://dummyimage.com/600x400/000/fff  // Black background, white text
https://dummyimage.com/600x400/cc0000/fff.png&text=Banner  // Custom colors and text

Responsive Image Techniques

Using srcset

<img
    src="https://picsum.photos/800/600"
    srcset="https://picsum.photos/400/300 400w,
            https://picsum.photos/800/600 800w,
            https://picsum.photos/1200/900 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 1200px) 800px,
           1200px"
    alt="Responsive image"
>

Using picture element

<picture>
    <source media="(max-width: 600px)"
            srcset="https://picsum.photos/400/300">
    <source media="(max-width: 1200px)"
            srcset="https://picsum.photos/800/600">
    <img src="https://picsum.photos/1200/900" alt="Adaptive image">
</picture>

Performance Considerations

• Use appropriate dimensions: Don't load 4K images for thumbnails
• Lazy loading: Add loading="lazy" attribute
• WebP format: Consider modern image formats
• CDN delivery: Lorem Picsum uses CDN for fast delivery
• Caching: Images are cached for better performance

CSS Background Images

.hero {
    background-image: url('https://picsum.photos/1920/1080');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .hero {
        background-image: url('https://picsum.photos/768/576');
    }
}