TL;DR
Images are now more flexible and the crops are more predictable
As always, follow best practices for image resolutions, particularly for high-resolution displays
See below for specific specs and direction depending on the surface you’re using: Image, Card, or Background
Spec | Requirement |
File types | JPEG, JPG, PNG, SVG, GIF |
Max file size | 10 MB |
Transparency | PNG (or SVG); JPEG for photos |
Logos / simple graphics | SVG when possible; otherwise PNG |
Image Resolution
Images render at different widths depending on size setting, column layout, and device.
Rule of thumb: Please be sure to always size your images for high-density displays. It’s best to size the image for roughly ~2x the largest width you expect on screen. This will suffice for retina / high-density displays (without creating enormous files).
Intended use | Largest typical on-screen width | Suggested image (longest edge) |
Image (Small / Medium) | ~140–200 px | ~600–1000 px |
Image (Large) | Up to ~600 px (or full column, if narrower) | ~1200–1600 px |
Card | Full card width (1 column layout) | ~1200–1600 px at ~2.3:1 |
Page background | Full viewport | ~1600–2400 px |
A “Large” image in a narrow column may still look small (because it will never be larger than the container it sits in). Prefer a moderately oversized image over an undersized one; always stay under 10 MB.
Image
Size | Approx. display width |
Small | ~140 px |
Medium | ~200 px |
Large | up to ~600 px (or full column width, whichever is smaller) |
Also available:
Border radius (None, Small, Medium, Large, Full)
This will round the corners on the image. A “Full” border radius will attempt to make a circle (or oval) with the crop.
Alignment (Left, Center, Right)
This will align the image in its container. You may only see a visual difference if the image is smaller than its container.
Focal point (green dot)
This will help ensure that the subject stays in view if the frame crops further.
Galleries: An Image can technically hold multiple images. Visitors swipe between them (pagination dots). The first image sets the shared crop/frame; subsequent images will inherit the first image’s aspect ratio.
Card
Image on top + caption underneath (caption text is not part of the image file)
Spec | Value |
Aspect ratio | 8:5 (wide landscape) |
Focal point | Not available in a fixed frame |
Suggested export | e.g. 1400 × ~610 px, or any size near 5:3 in the 1200–1600 px width range |
Keep critical content centered. Matching 5:3 on export reduces surprise cropping.
Page background
This is the most dynamic surface because visible crop changes with browser size. You can pair with a background color for gaps (letterboxing, no-repeat, transparency).
Defaults are typically Fill area, Center, Show once, Scroll when adding a background image.
Setting | Options |
Fit and sizing | Fill area (crop if needed) · Fit entire image (no crop) · Actual size |
Position | Center, edges, corners |
Repeat | Show once · Tile · Tile X · Tile Y |
Scroll | Scroll · Fixed |