SharePoint Design
SharePoint Image Sizes
Recommended Image Sizes in Modern SharePoint
Images used within SharePoint can be different sizes and aspect ratios depending on your chosen number of columns and web part layouts.
In most cases, images in modern web parts work best across layouts and devices when they have an aspect ratio of either 1:1 (square), 16:9 or 4:3, depending on the layout.
Images should be in .GIF, .PNG or .JPG format and maintaining good resolution is important for ensuring the best UX.
The trickiest SharePoint images to ‘get right’ in terms of format are the ones you use for those panoramic page banner (title images) – and unfortunately, you’ll find you need a lot of these.
Discover how to keep your SharePoint looking ‘on-brand’ with clever use of imagery.
As a general guide:
| Image usage | Recommended Sizes W x H in pixels | Aspect Ratios |
|---|---|---|
| 5 image Hero web part (tiles) | 5 x images at 1200 x 900 | 4:3 |
| 4 image Hero web part (tiles) | 3 x images at 1200 x 900 1 x image at 1200 x 675 | 4:3 + 16:9 |
| 3 image Hero web part (tiles) | 1 x image at 1200 x 900 2 x images at 1200 x 675 | 4:3 + 16:9 |
| Page banners (header/title images) | 1 x 1920 x 1080 Note that page banners are auto-cropped to around 300 H for a Image+title layout & 150 H for a Colour block layout. | A 16:9 image is recommended, but you can pre-crop your image for more predictable results. Note, however, that this can impact the image used on thumbnails or on mobile views* |
| ‘Regular’ images – 1 column across | 1200 x 1200, 1200 x 675 or 1200 x 900 | 1:1, 16:9 or 4:3 |
| ‘Regular’ images – 2 columns across | 586 x 586, 586 x 330 or 586 x 439 | 1:1, 4:3 or 16:9 |
| ‘Regular’ images – 3 columns | 380 x 380, 380 x 214 or 380 x 285 | 1:1, 4:3 or 16:9 |
| Hero Carousel Images | 1200 x 675 | 16:9 |
| Full width images | 1 x 1920 x ? | You can crop your image as desired, but having 1920 width will give good resolution. |
More information on image scaling and sizing can be found here.
*Bear in mind SharePoint will crop and resize images differently on desktop, tablet, and mobile.
Another ‘gotcha’ is when creating news posts in SharePoint. By default, the news web part uses a 16:9 ratio ‘thumbnail’ of the page banner image.
If you’ve cropped your banner image into a skinny strip, the thumbnail may end up with the wrong aspect ratio (e.g. being stretched).
For this reason you may wish to stick with a 16:9 ratio for your banner image, and selecting the relevant focal point.
We also recommend you check out a preview of your image before publishing. See below.
Don’t miss out – subscribe to our SharePoint Essentials newsletter.
Use the image focal point tool to see what your image will look like in differently cropped and sized formats:
Find out more about Essential SharePoint Services
Essential offers a range of SharePoint services, including migration, SharePoint configuration and design services.
