Media

Images, animated GIFs, and videos with shared sizes and frames.

Hornet beside an ornate cage in a moss-covered cavern. Hollow Knight: Silksong.

Images#

Put the image description in square brackets and its path or URL in parentheses. Click an image to open the lightbox; press Escape to close it. Add a quoted title after the path for a caption.

![Hornet beside an ornate cage in a moss-covered cavern.](/images/silksong.jpg 'Hollow Knight: Silksong.')

Set width and height to reserve the aspect ratio while the image loads. Local images use Brief's image optimization when available; set optimize=false to serve the original file.

![A landscape.](/landscape.jpg){width=1200 height=800 optimize=false}

Animated GIFs#

Use the same syntax for GIFs. They play automatically, keep their animation in the lightbox, and use the same captions, sizes, and frames as still images. Brief preserves animated originals rather than turning them into still images.

Hornet traversing Pharloom in Hollow Knight: Silksong. Hollow Knight: Silksong gameplay.

![Hornet traversing Pharloom in Hollow Knight: Silksong.](/media/silksong-gameplay.gif){width=480 height=270}

Videos#

Use Video with a direct video file URL and a descriptive label. The player includes play/pause, mute and volume, a seek bar, elapsed and remaining time, playback speed, and fullscreen and picture-in-picture when the browser supports them. Videos wait for the reader to start playback.

00:00-00:00

Gameplay from the Hollow Knight: Silksong release trailer.

::Video{src="/media/silksong-gameplay.mp4" poster="/media/silksong-gameplay.jpg" label="Silksong gameplay featuring Hornet exploring and fighting in Pharloom" width=960 height=540}
::

Use Tab to focus the controls. Enter or Space activates a focused button, and the arrow keys adjust a focused seek or volume slider. Add loop=true for repeated playback or muted=true to begin with the sound muted.

Size#

Images, GIFs, and videos accept size="small", "medium", or "large". Small is the default and uses 70% of the available content width, medium uses 85%, and large uses 100%. Media is centered and follows the configured page width or its enclosing container. On mobile, all three sizes use the full available width.

Silksong gameplay at medium size.

Silksong gameplay at large size.

![Silksong gameplay.](/media/silksong-gameplay.jpg){size=medium}

::Video{src="/media/silksong-gameplay.mp4" label="Silksong gameplay" size="large"}
::

Borderless#

Set borderless=true to remove the frame, shadow, background, rounded clipping, and overlay ring. This also applies in the image lightbox and is useful for transparent artwork. Videos retain their playback controls.

Hornet holding her needle, with a transparent background.

![Hornet holding her needle.](/media/hornet.svg){borderless=true}

::Video{src="/media/silksong-gameplay.mp4" label="Silksong gameplay" borderless=true}
::

Framed media uses components.image.frame in the visual configuration, so images, GIFs, and videos share the chosen frame.

Example gameplay and Hornet artwork are by Team Cherry. The video and GIF use an excerpt from the official release trailer; the Hornet sprite is from the Hollow Knight Wiki.

Image reference#

srcRequired: string; Image path or HTTP(S) URL.

altDefault undefined: string; Text describing the image. Use an empty string only for a decorative image.

titleDefault undefined: string; Markdown image title, displayed as a visible caption when nonblank.

widthDefault undefined: number | string; Intrinsic width in pixels. Supply height too to reserve the aspect ratio.

heightDefault undefined: number | string; Intrinsic height in pixels. Supply width too to reserve the aspect ratio.

sizesDefault undefined: string; Responsive source-size hint. Defaults to the standard prose column; override it for custom layouts or narrower containers.

optimizeDefault undefined: boolean; Generate responsive derivatives when enabled by the site image policy.

qualityDefault undefined: number; Lossy encoder quality from 1 to 100; defaults to 80.

formatDefault undefined: "webp" | "avif"; Derivative image format; defaults to WebP.

losslessDefault undefined: boolean; Use lossless encoding; defaults to false.

sizeDefault undefined: "small" | "medium" | "large"; Small uses 70% of the available content width (default), medium uses 85%, and large uses 100%. Media is centered, and all sizes use the full available width on mobile.

borderlessDefault false: boolean; Remove the frame, shadow, background, rounded clipping, and overlay ring.

Video reference#

srcRequired: string; Direct video file URL, such as MP4 or WebM.

titleDefault undefined: string; Visible caption beneath the video.

labelRequired: string; Accessible description of the video.

posterDefault undefined: string; Image shown before playback begins.

widthDefault undefined: number; Intrinsic width in pixels; provide height too to reserve space.

heightDefault undefined: number; Intrinsic height in pixels.

mutedDefault false: boolean; Start playback with sound muted.

loopDefault false: boolean; Restart playback automatically after the end.

sizeDefault undefined: "small" | "medium" | "large"; Small uses 70% of the available content width (default), medium uses 85%, and large uses 100%. Media is centered, and all sizes use the full available width on mobile.

borderlessDefault false: boolean; Remove the frame, shadow, background, rounded clipping, and overlay ring.