Lorem Picsum

Overview

Lorem Picsum is a service designed to provide simple, customizable placeholder images for web development and design prototyping. It functions by allowing developers to request images directly through a URL, specifying parameters such as width, height, image ID, and even transformations like grayscale or blur. This eliminates the need for designers or developers to manually source temporary images, streamlining the early stages of project development. The service draws its images from Unsplash, ensuring a diverse and high-quality collection of photographs.

The primary use case for Lorem Picsum is in front-end development, where mock data and visual assets are required to test layouts and user interfaces before final content is available. It is particularly valuable for rapid prototyping and iterative design processes. For instance, a developer building a product listing page can quickly populate image placeholders for dozens of items by simply varying the image ID in the URL. Its simplicity means there is no authentication, API keys, or complex setup required, making it accessible for quick integration into any project.

While Lorem Picsum is effective for development and prototyping, it is not intended for production-grade image hosting or content delivery networks (CDNs). Its focus is on ease of use for temporary assets, rather than advanced image optimization, scaling, or caching required for live applications. For production environments, developers typically integrate with dedicated image management solutions or CDNs to handle performance, reliability, and security considerations. However, for the initial stages of development and client presentations, Lorem Picsum offers a lightweight and efficient solution.

The API's design aligns with RESTful principles, using clear URL structures to define image requests. Developers can request a random image, a specific image by its ID, or a list of images with pagination. This flexibility supports various development scenarios, from single image displays to gallery-like layouts. The service also provides endpoints to retrieve metadata about the images, such as author and dimensions, which can be useful for display captions or further development.

Key features

• Random Image Generation: Allows retrieval of a random image with specified dimensions using a simple URL (e.g., https://picsum.photos/200/300).
• Specific Image Retrieval: Fetch a particular image by its unique ID, ensuring consistency across development iterations (e.g., https://picsum.photos/id/237/200/300).
• Custom Dimensions: Specify width and height parameters directly in the URL to fit exact layout requirements.
• Grayscale Option: Apply a grayscale filter to any requested image by adding /grayscale to the URL, useful for monochrome designs.
• Blur Effect: Add a blur effect with a configurable radius using /blur[?amount] for scenarios requiring blurred backgrounds or artistic effects.
• Image List API: Access a paginated list of all available image IDs, authors, and URLs, enabling programmatic selection and display.
• No Authentication Required: The API does not require keys, tokens, or any form of authentication, simplifying integration.
• Direct from Unsplash: Images are sourced from Unsplash, providing a wide variety of high-quality photographs for placeholders.

Pricing

As of May 28, 2026, Lorem Picsum is a free service, primarily maintained by its open-source community. There are no paid tiers or subscription models for its core image placeholder functionality. Users can access all features without cost or usage limits, subject to fair use guidelines and the underlying Unsplash license for the images themselves.

Common integrations

Lorem Picsum's straightforward URL-based API enables integration into various development tools and frameworks without dedicated libraries or SDKs. Its primary mode of integration is direct URL embedding.

• Web Development Frameworks (React, Vue, Angular): Developers embed image URLs directly into <img> tags within component templates or JavaScript code to display placeholders. For instance, in a React component, an image source might be dynamically constructed based on component props.
• Static Site Generators (Gatsby, Next.js, Hugo): During development, Lorem Picsum URLs can be hardcoded or dynamically generated in templates to populate image fields before actual content is ready.
• Design Tools (Figma, Sketch, Adobe XD): While not direct API integrations, designers often use Lorem Picsum URLs as image fills in their mockups and prototypes to visualize data-driven layouts.
• Backend API Development: When building APIs that return image URLs, Lorem Picsum links can serve as mock data for image fields in JSON responses during the development and testing phases.
• Markdown and Documentation: Simple embedding of image URLs directly into markdown files or documentation using standard image syntax.

Alternatives

• Unsplash: A platform offering a vast library of high-quality, free-to-use stock photos, often used as a source for placeholder image services.
• Pexels: Provides free stock photos and videos, similar to Unsplash, with a strong community focus and API access.
• Placeholder.com: Offers customizable placeholder images with text overlays and specific dimensions, focusing more on visual cues than real images.

Getting started

Getting started with Lorem Picsum involves constructing a URL to request the desired image. No setup, API keys, or authentication are required. The most basic request involves specifying width and height:

<!-- Request a random image with dimensions 200x300 pixels -->
<img src="https://picsum.photos/200/300" alt="Placeholder Image">

To retrieve a specific image by its ID, include /id/ followed by the image ID:

<!-- Request image with ID 237, dimensions 200x300 pixels -->
<img src="https://picsum.photos/id/237/200/300" alt="Specific Placeholder Image">

You can add a grayscale effect:

<!-- Request a random grayscale image -->
<img src="https://picsum.photos/seed/picsum/200/300?grayscale" alt="Grayscale Placeholder Image">

Or apply a blur effect:

<!-- Request a random blurred image with blur amount 2 -->
<img src="https://picsum.photos/200/300?blur=2" alt="Blurred Placeholder Image">

Combining effects is also possible:

<!-- Request a random grayscale and blurred image -->
<img src="https://picsum.photos/200/300?grayscale&blur=5" alt="Grayscale Blurred Placeholder Image">

For more advanced usage, you can fetch a list of images programmatically using a GET request:

fetch('https://picsum.photos/v2/list?page=2&limit=10')
  .then(response => response.json())
  .then(data => {
    console.log(data); // Array of image objects with id, author, width, height, url, download_url
    // Example: data[0].download_url could be used as an image source
  })
  .catch(error => console.error('Error fetching image list:', error));

The /v2/list endpoint supports pagination with page and limit parameters, allowing developers to retrieve batches of image metadata. Each object in the response includes a download_url that directly links to the full-resolution image, and an id that can be used to request specific custom-sized placeholder images using the /id/{id}/{width}/{height} format. This provides flexibility for dynamic content loading and pre-selection of images.