Hero Header and Feature Highlight images are responsive, so the same image can be framed differently on mobile, tablet, and desktop. Use images that still look good if the outer edges are cropped.
Hero Header images
Avoid placing text, logos, faces, or other important details close to the edge of the image.
Treat the image like a background, especially when the Hero Header is set to Full Width.
If you need the full image to stay visible, enable Prevent Cropping? in the component settings. This changes how the image is fitted, so preview the page at desktop and mobile sizes before publishing.
Feature Highlight images
Choose images with a clear subject and some space around the subject.
Preview both left and right media positions, because the available space changes with the layout and screen size.
Enable Prevent Cropping? when exact image framing matters more than filling the available space.
As a rule of thumb, use large landscape images with a generous safe area around the main subject. If the composition includes essential text or precise framing, upload a version designed for that component and check it on both desktop and mobile.