Skip to content
  • There are no suggestions because the search field is empty.

What are the best image sizes and aspect ratios for SharePoint modern pages?

Optimize images for responsive SharePoint layouts and web parts

1. Overview

Modern SharePoint pages are fully responsive, meaning images automatically adjust their size and shape depending on screen size, layout, and web part design. Whether your page is viewed on a desktop or a mobile device, SharePoint scales and crops images to fit perfectly within their section or web part.

This article explains recommended image sizes and aspect ratios to help your visuals display correctly across all devices — including for Hero, News, Image Gallery, and Quick Links web parts.

2. What you’ll learn

In this article, you’ll discover:

  • How image scaling works on modern SharePoint pages.

  • Recommended image sizes per column layout.

  • The best aspect ratios for different web parts (Hero, News, Image Gallery, etc.).

  • How to set focal points and logos that display clearly across devices.

3. Image sizing principles

Because of the responsive design, there’s no single fixed size that fits all situations. Instead, follow these general rules:

📐 Aspect ratios

Aspect ratio = width : height (e.g., 16:9, 4:3).

  • 16:9 is ideal for wide layouts and banners.

  • 4:3 works well for standard content areas.

  • For best results, use consistent aspect ratios throughout a page.

🧱 Column layouts

Different page layouts require different image widths.

Layout Recommended width (px)
Full-width column 1920
One column 1204
Two columns 586 per column
Three columns 380 per column
One-third left 380 (left) / 792 (right)
One-third right 792 (left) / 380 (right)

👉 The height depends on the aspect ratio. For example:

  • One column at 16:9 → 1204 x 677 px

  • Two columns at 16:9 → 586 x 330 px

4. Web part image recommendations

🦸 Hero web part

  • Tiles layout: 4:3 ratio (overall height 8:3)

  • Layers layout: 16:9 ratio per image

  • Mobile view: Carousel layout at 16:9

📰 News web part

  • Supports 4:3, 16:9, and 21:9 depending on layout.

  • Recommended: 16:9 for Top Story and Carousel layouts.

🖼️ Image web part

  • Expands to full width of the section.

  • Use 16:9 aspect ratio for optimal balance.

  • You can crop freely or resize within the image editing tool.

🧩 Image gallery web part

  • Brick & Carousel: respects all ratios (16:9, 1:1, 4:3).

  • Grid layout: limited to 1:1, 16:9, or 4:3.

🔗 Quick links web part

  • Compact, List, Tiles: 1:1 or 4:3

  • Filmstrip, Grid, Button: 16:9

5. Page visuals

🏞️ Page title image

  • Use landscape (16:9 or wider) images of at least 1 MB.

  • Always set a focal point to keep key content visible in thumbnails and search results.

🖼️ Page thumbnail

  • Recommended: 16:9 aspect ratio.

  • Appears in search, news, and highlighted content results.

6. Site logos and header images

Element Description Recommended size (px) Format
Site logo Larger logo (non-square, transparent supported) 192 × 64 PNG, JPEG, SVG*
Site logo thumbnail Square logo used in compact views 64 × 64 PNG, JPEG, SVG*
Extended layout logo Used in extended site headers 300 × 64 JPEG, PNG, SVG
Extended layout background image Header background 2560 × 164 JPEG, PNG

*SVG not supported on group-connected sites.

7. Pro tips

  • Always test your pages on desktop and mobile to verify cropping.

  • Keep visual consistency: use similar aspect ratios throughout your site.

  • Use SharePoint’s focal point tool in the Hero and title area to keep key image parts centered.

 

Involv version 5.2