Embedding
Embed placeholder images via URL
A stable image URL with width × height and format beats stock photos and empty gray boxes. Here is how to use dummyimages.dev in markup, styles, and components.
URL structure
Public test images follow /{width}x{height}.{format}, optionally with query parameters for background, text color, label, quality, and pattern. Example: /1200x630.webp?background=18181b&text=Hero. The response is a real image file with cache headers — suitable for CDNs and staging.
HTML and Markdown
The simplest case is an img tag with the generated URL as src. The same URL works in Markdown images for docs and READMEs. Use meaningful alt text (“Placeholder 1200×630”) so layout reviews and accessibility checks stay clear.
CSS and design tokens
For background surfaces use background-image: url("…"). In design systems a fixed dummy URL helps demo components without an asset pipeline. Change format and size to exercise object-fit, aspect-ratio, and lazy loading.
Frameworks and apps
In React/Vue pass the URL as a string prop; in Laravel Blade use the absolute dummyimages.dev URL. For offline local demos prefer the generator download button and version the file — the live URL needs network access.
From generator to final URL
Open the dummy image generator, pick size and format, create a preview, then copy the image URL, HTML, or CSS snippet. That avoids typos in query parameters and gives the team a shareable reference.
FAQ
Do I need an API key?
No. Image URLs are public and work without authentication.
Are images stored?
They are generated on demand and may be cached by CDN/browser. There is no personal media library.
Which formats are supported?
JPG, PNG, WebP, AVIF, and GIF — depending on the extension or generator setting.