Version: latest

Works everywhere

Image works in both server and client environments. Always use the standard import (e.g. @prokodo/ui/image) — the library detects the runtime automatically.

Image

Image wraps next/image providing lazy loading, automatic blur placeholder generation, aspect-ratio containers, and a consistent API across all prokodo components.

Live demo →

Overview

import { Image } from "@prokodo/ui/image"
;<Image src="/hero.jpg" alt="Hero image" width={1200} height={630} priority />

Live PreviewOpen in Storybook ↗

Import

import { Image } from "@prokodo/ui/image"

CSS:

import "@prokodo/ui/image.css"

Props

Prop	Type	Default	Required	Description
`src`	`string`	—	✅	Image source URL.
`alt`	`string`	—	✅	Alt text for accessibility.
`width`	`number`	—	—	Intrinsic width in pixels.
`height`	`number`	—	—	Intrinsic height in pixels.
`fill`	`boolean`	`false`	—	Fill parent container (Next.js Image fill mode).
`priority`	`boolean`	`false`	—	Eagerly load the image.
`quality`	`number`	—	—	Image quality (1–100).
`caption`	`string`	—	—	Caption text rendered below the image.
`containerClassName`	`string`	—	—	CSS class on the image container wrapper.
`captionClassName`	`string`	—	—	CSS class on the caption element.
`className`	`string`	—	—	CSS class on the `<img>` element.

See src/components/image/Image.model.ts for the full ImageProps type.

Above-the-fold optimization (`priority`)

Use priority for images that are visible immediately on first paint (for example, hero/LCP images):

<Image src="/hero.jpg" alt="Homepage hero" width={1200} height={630} priority />

What priority does in this library:

Emits a <link rel="preload"> hint so the browser fetches the image before parsing the page
Omits loading="lazy" (non-priority images are lazy by default)
Sets decoding="async" for non-blocking decode
Applies the behavior in both server and client rendering paths

Use it sparingly for truly critical above-the-fold images only.

Design Tokens

Image does not define component-specific CSS custom properties. Override appearance by customising the following global design-system tokens on :root or a scoped ancestor:

Token	Description
`--pk-space-lg`	Bottom padding reserving space for the figure caption
`--pk-color-fg`	Caption text color — adaptive (white in dark mode, dark in light)

Dark mode: The caption text uses var(--pk-color-fg) at 0.6 opacity, ensuring readability on both light and dark backgrounds.

AIC Note

Use the standard import path in application code:

import { Image } from "@prokodo/ui/image"

No separate /client or /lazy import selection is required in consumer code.

AIC components also support a priority flag for critical above-the-fold elements. This is most visible on Image (native preloading via <link rel="preload"> for above-the-fold content).

WCAG 2.2 Status

Criterion	Name	Status	Note
1.1.1	Non-text Content (A)	🔍 Manual review	All images, icons, and media require a text alternative (alt, aria-label, or aria-labelledby). Decorative-only elements must carry aria-hidden.
1.4.3	Contrast (Minimum) (AA)	🔍 Manual review	Text must have a contrast ratio of at least 4.5:1 (3:1 for large text). Verify against the final product theme.
1.4.5	Images of Text (AA)	🔍 Manual review	Text should be rendered as real text rather than as an image, unless unavoidable (e.g. logo, brand mark).
1.4.11	Non-text Contrast (AA)	🔍 Manual review	UI component boundaries and icons must achieve at least 3:1 contrast against adjacent colours. Verify in the product theme.
4.1.2	Name, Role, Value (A)	🔍 Manual review	Name, role, and state of all interactive UI components must be programmatically determinable via native HTML semantics or ARIA.

Test coverage: 3 jest-axe assertion(s) across 4 test file(s) · 0 ARIA attribute occurrence(s) in source scan. Criteria marked 🔍 require manual verification in the final product integration and theme context.

Storybook

👉 Open Image in Storybook

Source

src/components/image/Image.model.ts