Image
Show a photograph or illustration with control over its size, cropping and optional destination.
Code name: Image · Category: Media
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use images to show your work, your team or a relevant service. Choose a source you own or have permission to use.
In the editor
- Upload or choose the image.
- Write alt text describing meaningful content.
- Set its size and crop, then check that the subject remains visible on mobile.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Image src="/defaults/image_placeholder.svg" alt="Replace with a description of your own photograph" />Behaviour and limitations
- src identifies the image; changing alt does not replace the source.
- An optional navigatePathname makes the image a link. Preserve hrefTarget when changing only the destination.
- Use priority only when the image is important to the initial view; it is not a general quality setting.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
src | string | "/defaults/image_placeholder.svg" (renderer) | Image. See the usage notes for this block. |
alt | string | "" (renderer) | Image name (alt). See the usage notes for this block. |
width | number | Computed by renderer | Width. See the usage notes for this block. |
height | number | Computed by renderer | Height. See the usage notes for this block. |
objectFit | "default", "contain", "cover", "fixed-height-cover", "fill" | "default" (renderer) | Image Fit. See the usage notes for this block. |
align | "left", "center", "right" | "center" (renderer) | Align. See the usage notes for this block. |
alignVertical | See guidance | "" (renderer) | Vertical alignment within the surrounding layout. |
backgroundColor | string | Not declared here | Background colour. Theme-derived appearance can still depend on the surrounding section. |
borderRadius | number | 0 (renderer) | Border Radius. See the usage notes for this block. |
spacing | object | Not declared here | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "fade-up" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
priority | boolean | false (renderer) | Priority Image Load (LCP). See the usage notes for this block. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
navigatePathname | string | "" (renderer) | The link destination. Use an existing page or a verified URL. |
hrefTarget | See guidance | Not declared here | Link browsing context, such as _self or _blank. It is separate from the destination. |
actions | See guidance | Not declared here | Editor group only. Set its individual supported properties; do not emit an actions object. |
plausibleGoal | string | Not declared here | Goal Name. See the usage notes for this block. Editor group: actions. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
