Lorem Pixel API: The Complete Guide

Need realistic placeholder photos for your mockups? This guide covers everything you need to know about generating random placeholder photos via API, including category selection, custom sizes, and implementation examples.

What is Lorem Pixel?

Lorem Pixel (named after Lorem Ipsum) provides random placeholder photographs instead of plain colored boxes. These photos are perfect for mockups, prototypes, and development environments where you want realistic imagery without sourcing actual photos.

A URL like https://api.tinyfn.io/v1/lorem-pixel/800x600/nature returns a random nature photograph at 800x600 pixels.

Why Use Random Photos?

Random placeholder photos offer several advantages over plain placeholders:

• Realistic Mockups: Show clients how designs look with real imagery
• Design Testing: Test how layouts handle various image compositions
• Variety: Each request can return different images
• Category Matching: Use relevant categories for your content

Using the Lorem Pixel API

TinyFn provides a simple URL-based endpoint for Lorem Pixel images:

GET https://api.tinyfn.io/v1/lorem-pixel/800x600
GET https://api.tinyfn.io/v1/lorem-pixel/800x600/nature
GET https://api.tinyfn.io/v1/lorem-pixel/800x600/business?grayscale=true

Content-Type: image/jpeg
[Binary image data - random photo at requested dimensions]

Parameters

Code Examples

HTML

<!-- Random photo -->
<img src="https://api.tinyfn.io/v1/lorem-pixel/400x300" alt="Random">

<!-- Nature category -->
<img src="https://api.tinyfn.io/v1/lorem-pixel/800x400/nature" alt="Nature">

<!-- Grayscale business photo -->
<img src="https://api.tinyfn.io/v1/lorem-pixel/600x400/business?grayscale=true" alt="Business">

<!-- Consistent image with seed -->
<img src="https://api.tinyfn.io/v1/lorem-pixel/300x300/people?seed=user123" alt="Profile">

JavaScript / React

// Generate lorem pixel URL
function getLoremPixel(width, height, options = {}) {
  const { category, grayscale, blur, seed } = options;
  let url = `https://api.tinyfn.io/v1/lorem-pixel/${width}x${height}`;
  if (category) url += `/${category}`;

  const params = new URLSearchParams();
  if (grayscale) params.set('grayscale', 'true');
  if (blur) params.set('blur', blur);
  if (seed) params.set('seed', seed);

  return params.toString() ? `${url}?${params}` : url;
}

// Usage
const heroPhoto = getLoremPixel(1200, 600, { category: 'nature' });

CSS Background

.hero-section {
  background-image: url('https://api.tinyfn.io/v1/lorem-pixel/1920x1080/city');
  background-size: cover;
  background-position: center;
}

Photo Categories

Best Practices

1. Choose relevant categories: Match categories to your content type
2. Use seeds for consistency: Use seed parameter for reproducible results
3. Test with variety: Refresh to see how designs handle different images
4. Replace before launch: Always use licensed images in production