For layout work, start with Lorem Picsum. Its size-based URLs return an image without any upload or account, and you can use fixed IDs, seeded requests, grayscale, and blur when a repeatable fixture matters. When the sample must look like a real product photograph or editorial image, use a repository such as Unsplash and verify the license for every asset.
This guide shows which source fits each job, how to make placeholders deterministic and responsive, how to use images legally, and how to capture a finished page for documentation or visual tests.
Choose the image source by the job
“Sample image” can mean several different things: a predictable box for a component test, a realistic image for a mockup, or a production-like asset used to test loading and responsive behavior. Those goals need different sources.
| Source | Best use | What it provides | Important limitation |
|---|---|---|---|
| Lorem Picsum | Fast placeholders, prototypes, screenshot fixtures | Direct size paths, fixed image IDs, seeded URLs, grayscale and blur options | Subject matter is not controlled like a stock-photo search |
| PicSUM:DEV | Web and mobile mockups, wireframes, commercial products and educational demonstrations | Images intended for application demos; guidance to request the exact rendered size and cache strategically | Confirm current service terms, including caching and request limits, for your use case |
| Unsplash | Realistic, editorial-looking imagery and developer integrations | A broad free-use license for commercial and non-commercial use plus an official API exposing photo metadata and image URLs | The license prohibits compiling images to replicate a competing service |
| Your own licensed assets | Production interfaces and brand-specific tests | Known ownership, art direction and stable hosting | You must manage storage, transformations, delivery and rights records |
For a neutral component fixture, a URL such as https://picsum.photos/200/300 is enough. For a visual-regression test, use a fixed or seeded request rather than a random image. For a marketing mockup, select a specific licensed photograph and keep its license record with the project.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
Use Lorem Picsum as a placeholder API
A basic image URL
The path expresses the requested width and height:
<img src="https://picsum.photos/200/300"
width="200" height="300"
alt="Placeholder image">Request the dimensions your component actually renders. Downloading a very large original and shrinking it in CSS wastes bandwidth and can make loading tests misleading.
Make fixtures repeatable
Random placeholders are useful for a quick demo but poor for snapshots: a changed image can make a test fail even when your CSS did not change. Lorem Picsum supports fixed image IDs and seeded URLs. Choose one of those modes for stories, documentation screenshots and visual-regression suites, then keep the URL in source control. The exact URL pattern can be found in the service documentation; the key requirement is that the identifier or seed remains constant.
Add grayscale or blur deliberately
Grayscale can show hierarchy without color distracting from spacing. Blur can represent a loading state. Apply those options in the placeholder URL only when the state is part of the test; otherwise, a CSS filter makes the behavior easier to toggle without changing the fixture URL.
.media--loading img {
filter: blur(8px);
}
.media--muted img {
filter: grayscale(100%);
}Cache without freezing a mistake
For local development, browser caching is usually sufficient. In CI, cache the exact response or mirror a small approved set so a service outage does not block unrelated tests. Respect the provider’s terms when caching. PicSUM:DEV specifically advises requesting the exact size needed and caching strategically; the same discipline keeps any placeholder workflow predictable.
Use licensed photos when realism matters
What the Unsplash license allows
Unsplash states: “Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use images from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash.” That is broad permission for ordinary website use.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The same license does not permit compiling Unsplash images to replicate a similar or competing image service. A gallery that simply displays selected photos is different from downloading the collection to build a replacement image catalog; if your product resembles the latter, obtain legal advice and review the current terms before proceeding.
Keep a rights record
MDN’s image guidance is straightforward: an image being visible online does not make it free to reuse. You should own it, obtain permission, or comply with the stated license. If a page does not show clear licensing terms, treat the image as protected by copyright.
- Record the source, image identifier or URL, date obtained and applicable license.
- Save any required attribution text even if the current license does not require displaying it.
- Do not assume a search result, social-media post or “free download” button proves permission.
- Recheck terms when you move from a prototype to a paid product, advertisement or downloadable bundle.
Unsplash’s API page snapshot for 2026 lists 8.7 million photos, 429.1 thousand photographers and 29 thousand applications. Those figures describe that snapshot, not a guarantee of availability for a particular query or account.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Build responsive image markup
Start with intrinsic dimensions
Always provide width and height (or an equivalent aspect-ratio rule) so the browser can reserve space before the image arrives. This prevents layout shifts.
<figure class="card-media">
<img
src="https://picsum.photos/800/450"
width="800"
height="450"
loading="eager"
decoding="async"
alt="Placeholder landscape image">
</figure>.card-media {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.card-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}Use resolution switching with srcset
Resolution switching gives the browser several files with the same crop at different pixel densities. The browser uses sizes to estimate the displayed width, then selects an appropriate candidate.
Rank #3
<img
src="https://picsum.photos/800/450"
srcset="
https://picsum.photos/400/225 400w,
https://picsum.photos/800/450 800w,
https://picsum.photos/1200/675 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
width="1200"
height="675"
alt="Responsive placeholder landscape image">The width descriptors must match the actual intrinsic widths returned by the URLs. If your CDN creates transformed files, use its documented dimensions rather than guessing.
Use art direction when the crop changes
Resolution switching keeps the same composition. Art direction supplies a different crop when the layout allocation changes, such as a tall mobile hero and a wide desktop hero.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstall<picture>
<source media="(max-width: 600px)"
srcset="https://picsum.photos/600/900"
width="600" height="900">
<img src="https://picsum.photos/1200/600"
width="1200" height="600"
alt="Hero image with responsive crop">
</picture>MDN distinguishes these techniques: resolution switching chooses among pixel densities, while art direction chooses among different crops. Use the latter when preserving the subject’s focal point is more important than reusing one file.
Handle failure and accessibility
- Write alternative text that conveys the image’s purpose, not “image” or a filename.
- For decorative placeholders, use an empty
altattribute so assistive technology skips them. - Provide a visually similar fallback background or a local fixture if a remote placeholder is unavailable.
- Do not rely on color alone to communicate a loading or error state.
A practical workflow for demos and tests
- Define the rendered slot. Measure the component’s CSS width and aspect ratio at each breakpoint.
- Select the source. Use Lorem Picsum for layout, PicSUM:DEV for application mockups, or a licensed repository for realistic content.
- Choose determinism. Fix an ID or seed for snapshots; allow randomness only in throwaway demos.
- Request suitable dimensions. Supply the largest likely display width, not an arbitrarily huge original.
- Add responsive candidates. Use
srcset/sizesfor same-crop variants andpicturefor art-directed crops. - Test slow and failed loads. Verify reserved space, alt text, loading indicators and fallback behavior with the network throttled or disabled.
- Record rights. Store the source and license alongside the fixture or content record.
Capture the finished page without setting up a browser
If you need a screenshot of the component, documentation page or responsive state, ScreenshotNeo is the first service to try: it removes cookie banners, newsletter popups and chat widgets before capture, and bills only clean shots.
Or skip the browser setup
One GET request returns a PNG, JPEG, WebP or PDF. The API reports whether a response was a clean page, a bot check, a blank page, a timeout or another failed load; those failed cases and cache hits are not billed. Every step can be controlled, including consent handling and widget removal. An MCP server also lets Claude, Cursor and other MCP clients call take_screenshot, get_page_info and capture_pdf.
See the ScreenshotNeo API documentation for all options. A cURL capture:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://stripe.com
-o shot.webpPython:
import requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));ScreenshotNeo has a free plan with 1,000 screenshots per month and no card. Paid plans start at $5 for 3,000 shots; every feature is included on every plan. Create a free ScreenshotNeo account.
Performance, reliability and cost checks
- Bandwidth: request the displayed dimensions and use responsive candidates instead of shipping one oversized original.
- Determinism: pin IDs or seeds and cache approved responses for visual tests.
- Availability: remote placeholders can fail; keep a local fallback for CI and critical demos.
- Licensing: maintain a record per image and review terms before reuse in a product or asset library.
- Screenshot cost: ScreenshotNeo bills only clean shots; bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, with status exposed in response headers.
Troubleshooting common image problems
The placeholder changes between test runs
You are probably using a random request. Replace it with a fixed image ID or seed, and cache that exact response where the provider permits.
The image is blurry on a high-density display
The candidate is too small for the rendered slot or the browser selected an incorrect sizes value. Add a larger width candidate and make sizes reflect the real layout.
The page jumps when images load
Add accurate width/height attributes or an aspect-ratio container. Do not let the image define the layout only after its response arrives.
Recommended Free Tools
A “free” photograph triggers a takedown
Stop publishing it, preserve the source record, and verify ownership or license terms. If the page did not provide clear terms, it should have been treated as protected.
A screenshot contains consent banners or widgets
Use ScreenshotNeo’s consent and cleanup steps, or remove the elements in your own browser automation before capture. If the target presents a bot check or blank page, inspect the returned X-Page-Verdict and X-Billed headers rather than treating the file as a valid screenshot.
FAQ
Should I commit downloaded placeholder files to Git?
Commit small, approved fixtures when reproducibility matters or when builds must work offline. Keep the source URL and license information next to each file.
Can I use a placeholder URL as a permanent production image?
Only if the service’s current terms, reliability and caching policy fit production. A controlled, licensed asset pipeline is safer for customer-facing content.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Do I need attribution for Unsplash images?
The quoted Unsplash license says attribution is not required, but retain the license record and check the current terms for your exact use.
Frequently Asked Questions
What is the simplest placeholder image URL?
Use https://picsum.photos/200/300 for a 200-by-300 placeholder, then choose a fixed ID or seed when the image must remain unchanged.
Which responsive technique should I use?
Use srcset and sizes when the crop stays the same; use picture with alternate sources when mobile and desktop need different crops.
Are online images automatically free to reuse?
No. Confirm that you own the image, have permission, or comply with a stated license; unclear terms should be treated as copyright-protected.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
