- Where to find it
- On the composer’s palette, labelled Image. Drag it onto the canvas to add one.
- Its settings
- 10 of them, in the “Selected Component” section of the Modify drawer.
- Provided by
- RuleCMS, in
@rulecms/source-components-react. Available to every team.
In plain English
The Image component puts a picture on the page. Rather than serving whatever file you uploaded, it delivers the image through Cloudinary, which resizes and re-encodes it on the way to each visitor. Someone on a phone gets a small, modern-format file; someone on a large monitor gets a bigger one. You do not have to prepare several versions yourself.
In everyday use you only touch one setting: Media Selector, which is where you pick the picture. Choosing an image there fills in the technical settings underneath it for you.
The rest of the settings exist for the times when the defaults are not quite right, and they fall into two groups. Some describe the picture to the browser and to people who cannot see it — the alt text, the intrinsic width and height. Others tune how it is loaded and how important it is — Loading, Fetch Priority, Sizes. The two Cloudinary fields and Transformations are the escape hatch for when you want to reach the service directly.
When you would use it
- Any photograph, illustration, logo, or screenshot on the page.
- A hero image that has to look sharp on a wide monitor without slowing down phones.
Its settings
These are the settings this component offers, in the order the Modify drawer lists them. Each has its own page.
| Setting | Label in the drawer | What it does |
|---|---|---|
| Cloudinary Cloud Name | Cloudinary Cloud Name | Which Cloudinary account the image is served from. Normally filled in for you. |
| Image Public ID | Image Public ID | The identifier of a specific image inside a Cloudinary account. Normally filled in for you. |
| Media Selector | Media Selector | Pick the image an image component displays from your team's media library. |
| Image Alt Text | Image Alt Text | A short written description of the image, read aloud to visitors who cannot see it. |
| Image Intrinsic Width | Image Intrinsic Width | The image's real pixel width, which lets the browser reserve the right space before the picture arrives. |
| Image Intrinsic Height | Image Intrinsic Height | The image's real pixel height, used with the width so the browser can hold the right space open. |
| Image Sizes | Image Sizes | Tells the browser how wide the image will be on screen, so it can download the right version. |
| Image Loading | Image Loading | Whether the image downloads immediately or waits until the visitor scrolls near it. |
| Image Fetch Priority | Image Fetch Priority | How urgently the browser should download this image compared with everything else. |
| Cloudinary Transformations | Cloudinary Transformations | Extra instructions for cropping, resizing, and adjusting the image as it is delivered. |
Watch out for
- Alt text is not optional. It is what a blind visitor hears and what search engines read, and a picture with none is invisible to both.
- Do not set Loading to "lazy" on the first image a visitor sees. Lazy loading delays the image until the reader scrolls towards it, which is exactly wrong for a hero and will make the page feel slower.
- Size, spacing, and borders are column settings. Set Width and Height on the column that holds the image, not on the image itself — the two Intrinsic settings here are a different thing, and they describe the file rather than resize it.
Where to go next
- All RuleCMS components
- Attribute Reference — the column and row settings that shape how this component sits on the page: spacing, size, colour, and typography.
- The Composer — the editing surface it lives in.