Images

Nothing on this page is a screenshot of anything. The files are synthetic fixtures — flat shapes drawn at a screenshot's dimensions — and they exist so a real build renders ProseImg instead of a fenced example of it. Every ![…] in the component reference sits inside a code block, so until this page existed the build walked straight past the component: no srcset was ever emitted, no dialog variant was ever generated, and nothing measured either.

They are deliberately larger than the column that draws them. A 2560px original scaled into a 48rem slot is the case responsive sources exist for, and a fixture already the right size would prove nothing.

#A dark twin, with dimensions

The most common ugly thing in documentation is a screenshot of a dark editor on a white page. Two files, named explicitly, and CSS picks — toggle the theme and this swaps.

width and height are supplied here, which is what lets the browser reserve the box before the file arrives.

#The same image with no dimensions

Identical file, nothing declared. The box has no ratio until the image loads, so the text below it moves when it does — which is the reflow the reference page recommends against and does not pretend to solve.

#An original narrower than the column

A badge is 160px wide and has nothing to downscale to. It is left at its own size rather than stretched, and it says so with a sizes of its own: the layer's policy describes the prose column, and this image is not the prose column.

#A vector

An SVG has no pixels to resample, so it is served exactly as committed — no srcset, in the page and in the dialog alike. It still zooms, because a diagram set into a 48rem column is exactly the thing a reader wants larger.

It also names a background for each theme. Its ink is drawn for a light surface, and a transparent file on a dark page is ink on ink — so the colour sits behind it in the page and in the viewer alike.

#An animation

A GIF run through a raster pipeline comes back as its first frame. This one is passed through for the same reason the vector is, and keeps moving in the dialog.

#An image that does not zoom

zoom="false" has to leave an image looking inert: no indicator in the corner, no focus ring, no cursor, and nothing to tab into. Compare its corner with the first image on this page.

It is a file of its own rather than a second copy of the screenshot above, and deliberately so: an image that cannot be zoomed must also have no dialog-sized variants written for it on a static build, and two images sharing a source would make that impossible to tell apart in the output. Nothing named ornament may appear at a zoom width in .output/public/_ipx/.

#A documentation-owned terminal demo

This reproducible VHS fixture lives beside its tape under docs/_assets/. The build publishes its GIF and keeps the tape private.