Name
ImageFocal pointSpecify Image Focal point
Specify the focus of this image in the form "leftoffset,topoffset" where offsets are in percents.
Ex: 25,75One 75
One file only.
100 MB limit.
Allowed types: png gif jpg jpeg.
...
Images can help users if they are clear and simple. Make sure everyone can access the information that images convey.
Image dimensions and formats
Images need to be cropped and resized before uploading into the CMS. We recommend using JPG format as PNG can slow down the page's loading speed for users.
...
.
...
Type of image
...
Dimensions (in pixels)
...
Body content
(using basic text component)
...
Portrait = up to 400 (h)
...
Image gallery
...
Landscape = 1200 (w) x 800 (h)
Portrait = 533 (w) x 800 (h)
Square = 800 (w) x 800 (h)
Landscape is preferred.
...
Navigation and Promotion cards
...
818 (w) x 496 (h)
...
Hero banner
...
1600 (w) x 600 (h)
...
Feature image
(appears in promotion cards and also when shared on social media)
...
818 (w) x 496 (h)
...
Primary campaign
...
699 (w) x 411 (h)
...
Secondary campaign
...
580 (w) x 340 (h)
...
CTA image
...
336 (w) x 249 (h)
...
Profile image
...
156 (w) x 156 (h)
This automatically displays as a circle.
...
Complex image component
...
800 (w) x 400 (h)
...
Logo in hero banner
...
128 (w) x 100 (h)
This will be decreased down to a height of 64 on mobile.
Avoid adding an image/logo over another image.
...
Logo in top navigation (for devs only)
...
See Ripple
...
Logos in footer (for devs only)
...
See Ripple
Embedding images in your content
...
These resources are useful for tips on how to write great alternative text descriptions:
...
Writing great alt text: Emotion matters
...