Image Sizing Guide
There's no single "best" image size because the display area changes based on each visitor's screen. Here's what you need to know to get great results.
How it works
Think of the layout as having a picture frame your image is shown through. We resize the image to completely fill that frame without stretching or squashing it. Since the frame's shape varies by device, some cropping is unavoidable; but you have control over where that cropping happens.
What matters
Resolution: Use a high-resolution image so it doesn't look grainy on large screens. As always, balance this need with avoiding unnecessarily large files that slow down page load times.
Aspect ratio: What causes cropping isn't your image's shape alone — it's how your image's shape compares to the frame's shape on that particular device. Since the frame varies by screen size:
When your image is narrower relative to the frame → we scale to fit the width, and crop top/bottom
When your image is wider relative to the frame → we scale to fit the height, and crop left/right
Since you can't control the frame, the same image might get cropped differently on a phone vs. your desktop vs someone else's desktop. This is normal.
Image Anchor Position: This setting tells us which part of your image to protect from cropping. We align that point in the frame first, then crop from the opposite edges.
Rules of thumb
Full-torso shot, head near the top of frame? Set anchor to top-center. Cropping will happen from the bottom and sides, keeping the face safe.
Headshot filling most of the frame? Use a landscape (wide) photo. This virtually eliminates vertical cropping, pushing all cropping to the less-important sides.
In general: think about what you don't want cut off, position that subject near the anchor point, and leave "expendable" space on the opposite edges.
Last updated