Image Placement and Cropping

Also searched as: hero image size, image dimensions for website, why is my photo cropped, recommended image resolution

Selecting the right images for your website has a big impact on its overall look. The design template your community uses determines which types of image widgets you'll load photos into. There are two widget types you'll run into across your site: flexible-width and fixed-ratio. (Exact pixel dimensions vary by theme — the examples below use the Serendipity theme's measurements as a reference point.)

Flexible-Width Image Widgets

Some image widgets have a fixed height, but their width depends on the visitor's browser window.

Most themes center site content within a fixed-width column that stays put regardless of browser width (1200 pixels/px wide, in the Serendipity theme). A few images — most notably the "hero" image at the top of the Home page — extend beyond that column and stretch to the edges of the browser window.

1. By default, an uploaded image centers both vertically and horizontally within the widget's viewable space, and stretches horizontally to always fill it.
2. Because the widget's height stays fixed while its width can grow, the top and bottom of the image get cropped further as the browser window widens.
3. Choose a wide, panoramic image for this area — one that still looks good with its top and bottom trimmed.

Tip: If your image features people, crop or select it so faces sit close to the center of the frame. That keeps the focal point visible no matter how wide the visitor's browser window is.

Avoid vertical (portrait-mode) images in flexible-width areas. A vertical image stretched into a wide horizontal space produces an awkward crop, with the subject and focal point trimmed off the top and bottom.

Fixed-Ratio Image Widgets

The second widget type you'll encounter has a fixed width-to-height ratio and stays inside the site's content column, so it's less affected by overall browser width than a flexible hero widget.

• An uncropped image centers within the widget and stretches proportionately to fill it.
• A vertical (portrait) image stretches horizontally to fill the space.
• A horizontal (landscape) image fits more naturally, since fixed-ratio widgets are typically wider than they are tall.

Recommended Resolutions

• Full browser-width (hero) image: ~2000 px wide
• Full column-width image: ~1500 px wide

Uploading at these resolutions (or larger) keeps images sharp on high-resolution and widescreen displays. If your theme's content column is narrower or wider than 1200px, scale these targets accordingly.

If you have additional questions about image use, visit the Support Desk through your Admin Dashboard and open a support ticket.