Two ways an image gets onto a page

There is an important distinction here, and getting it wrong is the cause of most image problems.

An Image area is a dedicated field on a layout or component. The template controls how it is displayed — the size it renders at, whether it crops, how it behaves on a phone. You choose the picture; the design handles the rest.

An image inside rich text is embedded in the prose. It renders wherever you put it, at whatever size the editor recorded, with no design system involvement.

Prefer the Image area

Whenever a layout or component offers an Image area, use it. Images placed through an area stay consistent with the design, adapt properly on small screens, and can be swapped later without touching the copy.

Rich-text images are for cases where the image genuinely belongs within the flow of the writing — a screenshot illustrating a step, a diagram between two paragraphs.

Always link, never paste

Pasting an image straight from a document or a web page can embed it in a way that is not backed by the media library. It looks fine on the day and breaks later, when whatever hosted it moves or expires.

Upload to the library first, then insert from there. If you are copying content from elsewhere, treat the images as a separate job rather than assuming they came along with the text.

Sizing inside rich text

Resist resizing images by dragging them in the editor. That sets a fixed width that will not adapt on a phone, and it does not reduce the file the visitor actually downloads. Upload the image at the size you want it displayed.

Linking to documents

Link to files from the library rather than pasting a URL you copied from somewhere. A library link keeps working when the file is replaced; a pasted URL is a guess about a path that may change.