A layout that works with square images breaks with portrait ones. Lock an aspect ratio here, generate a batch, and you find out whether your grid actually holds — or take the inline data URI option and get images that need no network at all.
What you can control
- Aspect-ratio locking recomputes the height, so a batch stays consistent at 16:9 or 3:2.
- The inline SVG option embeds the image as a data URI — no request, no dependency, works offline.
- Five file formats, including SVG and WebP, for testing format negotiation.
- Markup mode emits a complete
<img>tag with width, height, alt text and lazy loading.
What this is not
Three of the four providers are external services. The inline option is the only one that keeps working without a network, which makes it the right choice for tests that must not depend on someone else's uptime.
Questions
Which provider should I use?
Inline SVG for anything running in CI — it has no external dependency. Lorem Picsum when you need actual photographs rather than grey rectangles.
Why does the markup include width and height?
Because without them the browser cannot reserve space, and the page jumps as images load. That layout shift is measured by Core Web Vitals.
Can I generate images that fail to load?
Point the custom provider at a non-existent path. Testing the broken-image state matters more than most teams assume.