Lorem Picsum

Both give you a repeatable image, but they work differently. An image ID pulls one exact photo from the Picsum catalog, which runs from #1 to #1084 — the URL becomes picsum.photos/id/237/640/480, and that specific picture loads every time. A seed is any text string you choose, like your project name; Picsum hashes it into a consistent random photo using a /seed/yourtext/ path. The key distinction is control versus convenience: an ID guarantees a known photo you have already seen, while a seed guarantees the same random photo for every teammate without you needing to pick one. Use an ID when a particular image matters, and a seed when you just want mockups to stop reshuffling on each refresh. This tool builds either URL for you and previews the result instantly.

Picsum applies effects through URL parameters, and this tool adds them for you with a toggle and a slider. For black and white, it appends ?grayscale to the link, producing something like picsum.photos/800/600?grayscale. For blur, it adds ?blur=N where N is a level from 1 to 10 — higher numbers soften the image more, so ?blur=5 is moderate and ?blur=10 is heavily diffused. When you enable both, they combine in a single query string. These effects are useful for low-fidelity wireframes, muted background textures behind text, or checking that overlaid captions stay readable against a busy photo. Flip the grayscale switch or drag the blur slider here, and the live preview and copy-ready snippet update immediately so you can paste the exact URL into your markup.

Specifying width and height tells the browser how much space an image will occupy before it has finished downloading. Without those dimensions, the browser does not know the image's size, so surrounding content jumps as the picture loads — a problem measured by Cumulative Layout Shift (CLS), one of Google's Core Web Vitals. By reserving the correct space up front, you keep the layout stable and protect your CLS score, which matters even when the final photography replaces your placeholders. That is why the HTML snippet from this tool ships with matching width and height attributes already filled in, alongside loading="lazy", and the Next.js output includes the width and height props that next/image requires. Generate your placeholder here and the copy-ready markup carries the right dimensions automatically, so you build good layout habits from the prototype stage onward.

Yes. Beyond a single image, the batch gallery creates several placeholders in one click — pick 4, 6, 9, or 12, or set any count up to 24. You can keep every image at the same dimensions for a uniform grid, or let the tool vary them across common aspect ratios to simulate the mixed content a real masonry or card layout would hold. That variety is what reveals layout problems early: how cards reflow at different shapes, where gaps open, and whether a row breathes on mobile. Each card in the gallery is independent — refresh it for a new photo, lock it to a seed so it stops changing, open it in a new tab, download it as a JPEG, or remove it. It is the fastest way to populate a prototype grid with realistic images instead of gray boxes.

Both serve real photographs as placeholders, but from different sources with different controls. The default Picsum mode pulls from the picsum.photos catalog of curated images numbered #1 to #1084, supports exact image IDs and seeds for repeatable results, and accepts grayscale and blur parameters. The Unsplash Source mode fetches from Unsplash's larger, more varied library and is handy when you want fresh, topical-looking photography or a different visual feel. In practice, choose Picsum when you need a specific, reproducible image or a known catalog ID, and switch to Unsplash when you want broader variety and do not need to pin one exact photo. Both options assemble the URL in your browser while the actual images come from those external CDNs. Toggle between the two services in this tool and copy whichever URL fits your mockup.