Image Block
Use Image for editorial images, campaign media, supporting product imagery, icons uploaded as media, and visual content inside containers or compatible sections.
Setup Order
- Choose the desktop imageStart with the main image and confirm the subject placement works in the selected section or container.
- Add a mobile image when neededUse a separate mobile image when the desktop crop does not preserve the key product, model, or message on small screens.
- Pick the loading strategyUse lazy loading for normal below-the-fold images and eager loading only for above-the-fold images that should load immediately.
- Set ratio and sizeChoose the aspect ratio, width, and height after the real media is selected so cropping and spacing are easy to judge.
- Review linked imagesIf the image links somewhere, add an accessibility label that describes the destination or action.
Key Settings
| Setting group | What it controls |
|---|---|
| Image | Desktop image asset and optional mobile-specific image asset. |
| Link | Optional destination and accessibility label for linked images. |
| Loading | Lazy or eager loading behavior. |
| Aspect ratio | Desktop and mobile ratio handling, including adapt, portrait, square, and landscape options. |
| Size | Desktop and mobile width behavior plus fit or fill height behavior. |
| Border | Border style, width, opacity, and radius. |
| Padding | Space around the image block. |
Media Guidance
Use images with clear subject placement and enough resolution for the largest expected layout. If the same image must work across desktop and mobile, keep the important subject away from the edges.
Use eager loading sparingly. It is appropriate for the first visible hero or critical above-the-fold media, but normal content images should usually stay lazy.
QA Checklist
| State | What to confirm |
|---|---|
| Desktop crop | The product, model, or visual subject is not cut off unexpectedly. |
| Mobile crop | The mobile image or ratio keeps the important subject visible. |
| Blank optional image | Optional blank media does not create a misleading published layout. |
| Linked image | The accessibility label and destination are clear. |
| Border radius | Rounded corners and borders do not conflict with surrounding surfaces. |
| Performance | Only critical above-the-fold images use eager loading. |