Atrium crops images to fit their slot and serves each one at several sizes, so you upload one good original per image and the theme does the rest. The table gives the size that fills every slot at full quality.
Sizes
| Where | Upload at | Notes |
|---|---|---|
| Hero slide, desktop | 2400 by 1350 | Keep the left or bottom third quiet for the headline. |
| Hero slide, Mobile image | 1200 by 1500 | Optional. Without it the desktop image is cropped to portrait. |
| Service, team, product and offer cards | 1200 by 1500 | Portrait. Cards can also be square or adapt to the image. |
| Location cards and location hero | 1500 by 1000 | Landscape. |
| Image with text | 1200 by 1500 | Portrait, or square, landscape or wide by Image shape. |
| Before and after pairs | 1200 by 1500, same framing for both | Same person, same light, same crop. |
| Gallery tiles | 1200 by 1200 | Square. A Feature tile is the same image at twice the size. |
| Call to action banner and gift card band backgrounds | 2400 by 1030 | Low contrast; text sits on it. |
| Collection image | 2400 by 1000 | Used by the collection banner. |
| Logo | Any ratio, 400 pixels wide or more | Height is set by Logo width. SVG or PNG. |
| Logo marquee logos | 600 by 240 | PNG or SVG with a transparent background. |
| Map images | 1200 by 800 | Exported from your map provider. |
| Favicon | 512 by 512 | Scaled to 32 by 32. |
Shopify accepts images up to 20 megapixels; there is no reason to go beyond the sizes above, and JPEG at quality 80 is plenty. Shopify converts to modern formats on delivery.
Focal points
Every image in Atrium is rendered through Shopify's image tag, which honors the focal point set on the file. Set it under Content → Files in your admin: open the image, drag the point to the face or the product, save. Every crop the theme makes, in every section, keeps that point in frame. This is the fix for a portrait whose head is cut off in a landscape card.
Alt text
Write alt text on the file under Content → Files, and every section uses it unless the section gives you its own field (Image description on image with text, the gift card band, the map and the video). Product images use the alt text set in the product's media. A decorative image can have empty alt text; a photo of a person or a place should say who or where.
Lazy loading
Images below the first screen load only as the guest scrolls to them, and the hero image is given priority so the page paints quickly. There is nothing to set.
Placeholders
A section with no image shows a placeholder illustration rather than a broken frame, so a half-built page never looks broken. Replace every placeholder before you publish.